[JavaScript 심화] Date 객체
·
React/JavaScript 심화
`Date` 객체는 날짜와 시간 정보를 다루는 내장 객체로생성부터 추출, 수정, 포맷까지 다양하게 활용 가능1. Date 객체 생성하기// 현재 시간let date1 = new Date();console.log(date1);// 특정 시간 (문자열)let date2 = new Date("1998-02-07 10:10:10");console.log(date2);`new Date()` -> 현재 시간(로컬 기준)을 저장문자열 `"YYYY-MM-DD hh:mm:ss"`형태로 지정 가능 (`"" ` 생략도 가능)생성자이기 때문에 반드시 `new` 키워드 사용!2. 타임 스탬프타임스탬프란 `1970-01-01 00:00:00 UTC` 기준으로몇 밀리초(ms)가 지낫는지를 나타내는 숫자값임let ts1 = date..
[JavaScript 심화] 배열 메서드 (배열 변형)
·
React/JavaScript 심화
배열의 데이터를 필터링, 가공, 정렬, 문자열로 변환할 때 사용하는 메서드들을 정리해봄이들은 원본 배열을 변경하거나 새로운 배열을 만들어내는 변형 메서드임1. filter()조건을 만족하는 요소만 남겨 새로운 배열로 반환let arr1 = [ { name: "도서", hobby: "코딩" }, { name: "이도서", hobby: "코딩" }, { name: "doseo", hobby: "게임" },];const gamePeople = arr1.filter((item) => { if (item.hobby === "게임") return true;});console.log(gamePeople);const gamePeople1 = arr1.filter((item) => item.hobby === "게..
[JavaScript 심화] 배열 메서드 (요소 순회 & 탐색)
·
React/JavaScript 심화
배열의 요소를 하나씩 돌아보거나(순회),조건에 맞는 요소를 찾는(탐색) 메서드 정리1. forEach()배열의 모든 요소를 순회하면서 콜백 함수를 실행let arr1 = [1, 2, 3];arr1.forEach(function (item, idx, arr) { console.log(idx, item * 2);});let doubledArr = [];arr1.forEach((item) => { doubledArr.push(item * 2);});console.log(doubledArr); // [2, 4, 6]콜백함수 인자: `(item, index, array)`항상 원본 배열의 길이만큼 실행`return`값이 없으면? `undefined`새로운 배열을 만들고 싶다면 `map()`을 사용하는게 더 효..
[JavaScript 심화] 배열 메서드 (요소 조작)
·
React/JavaScript 심화
배열의 데이터를 추가, 삭제, 잘라내기, 병합할 때 사용하는 가장 기본적이면서 자주 쓰이는 메서드 6가지를 정리해봄1. `push()`배열 맨 뒤에 요소를 추가하는 메서드let arr1 = [1, 2, 3];const newLength = arr1.push(4, 5, 6);console.log(arr1); // [1, 2, 3, 4, 5, 6]console.log(newLength); // 6 (추가 후의 배열 길이)여러 개의 요소를 한 번에 추가 가능원본 배열이 변경됨2. `pop()`배열 맨 뒤에 요소를 제거하고 반환let arr2 = [1, 2, 3];const poppedItem = arr2.pop();console.log(arr2); // [1, 2]console.log(pop..
[JavaScript 심화] 순회 정리
·
React/JavaScript 심화
순회란 배열/객체에 저장된 여러 값들 순서대로 하나씩 접근하는 것1. 배열 순회1-1. 인덱스 `for`루프const arr = [1, 2, 3];for (let i = 0; i 장점: 인덱스(`i`)를 직접 다룰 수 있어 범위, 간격, 역순 등 세밀 제어 가능주의: 루프 도중 `arr.length`가 변하지 않도록 주의! (배열 수정 X)1-2. `for...of` (값 중심 순회)for (const item of arr) { console.log(item);}값을 바로 꺼내 쓰는 가장 간단한 방식배열, 문자열, `Map`/`Set`같은 iterable에 사용인덱스가 필요하면 `arr.entries()`를 함께 사용for (const [i, v] of arr.entries()) { console.l..
[JavaScript 심화] Spread & Rest
·
React/JavaScript 심화
두 문법은 생김새가 같지만 `...`의 역할이 완전히 다름`Spread` 연산자 : 값을 '펼치는'역할`Rest` 매개변수 : 남은 값을 '모아주는' 역할1. `Spread` 연산자 (전개 연산자)배열이나 객체의 요소를 하나씩 흩뿌려서 복사하거나 합칠 때 사용함let arr1 = [1, 2, 3];let arr2 = [4, ...arr1, 5, 6]; // ...arr1이 Spread 연산자console.log(arr2); // [4, 1, 2, 3, 5, 6]배열 합치기 / 복사할 때 유용함let arr3 = [...arr1]; // 얕은 복사 (shallow copy)console.log(arr3); // [1, 2, 3]객체에서도 사용 가능let obj1 = { a: 1, b: 2 };let obj..
[JavaScript 심화] 단락 평가
·
React/JavaScript 심화
"단락 평가"란, 논리 연산자(`&&`, `||`)가 왼쪽 값만으로 결과가 확정되면 오른쪽은 평가하지 않는 것을 의미함1. 기본개념function returnFalse() { console.log("False 함수"); return false;}function returnTrue() { console.log("True 함수"); return true;}console.log(returnFalse() && returnTrue());// 출력: // False 함수 // false설명`&&`는 왼쪽이 `false`면 이미 전체가 false -> 오른쪽 실행 X그래서 `returnTrue()`는 호출되지 않음-> 이게 "단락 평가"의 핵심2. 동작 비교console.log(returnTrue() && ..
[JavaScript 기본] 배열
·
React/JavaScript 기본
배열은 여러 데이터를 순서대로 저장할 수 있는 자료형숫자 목록이나 이름 목록처럼 "순서가 있는 데이터"를 다룰 때 사용함1. 배열 생성let arrA = new Array(); // 배열 생성자let arrB = []; // 배열 리터럴 → 대부분 이렇게 사용2. 다양한 자료형을 담을 수 있음let arrC = [1, 2, 3, true, "hello", null, undefined, () => {}, {}, []];자바스크립트 배열은 숫자, 문자열, 함수, 객체 등 모든 자료형을 섞어서 넣을 수 있음3. 배열 요소 접근let item1 = arrC[0]; // 첫 번째 요소 (인덱스 0)let item2 = arrC[1]; // 두 번째 요소console.log(item1, item2)..
[JavaScipt 기본] 객체(object)
·
React/JavaScript 기본
자바스크립트에서 객체는 "하나의 관련된 값들을 묶어놓은 것" 이라고 보면 됨`이름`, `나이`, `직업`처럼 어떤 대상을 표현할 때 쓰는 것이 객체1. 객체 생성하기// (1) 생성자로 만드는 법let obj1 = new Object();// (2) 리터럴로 만드는 법 -> 이거 제일 많이 씀let obj2 = {}; 2. 객체 프로퍼티(속성)let person = { name: "도서", // key: value age: 27, hobby: "독서", job: "개발자", extra: {}, 10: 20, // 숫자도 key가 될 수 있음 (내부적으로는 "10" 문자열로 저장됨) "like cat": true, // 공백 있는 key → 반드시 따옴표로!};포인트`..