1. 객체(Object) 메서드
1.1 객체 속성 접근 및 순회
Object.keys()
객체의 키(프로퍼티)를 배열로 반환합니다.
const user = {
name: '라이캣',
age: 30,
company: 'weniv',
}
console.log(Object.keys(user));
Object.keys(user).forEach(key => {
console.log(key, user[key]);
});
Object.values()
객체의 값을 배열로 반환합니다.
const user = {
name: '라이캣',
age: 30,
company: 'weniv',
}
console.log(Object.values(user));
Object.values(user).forEach(value => {
console.log(value);
});
Object.entries()
객체 속성(키와 값)을 [키, 값] 형태의 배열로 반환합니다.
const user = {
name: '라이캣',
age: 30,
company: 'weniv',
}
console.log(Object.entries(user));
Object.entries(user).forEach(([key, value]) => {
console.log(key, value);
});
1.2 객체 기능
Object.assign()
하나 이상의 객체를 병합 하여 타겟 객체를 반환합니다. 병합된 객체는 타겟 객체에 반영됩니다. 중복되는 프로퍼티는 뒤에 있는 객체의 값으로 덮어씁니다.
const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
const result = Object.assign(target, source);
console.log(result);
console.log(target);
console.log(result === target);
얕은 복사(Shallow copy)
Object.assign()은 얕은 복사를 수행합니다. 중첩된 객체는 참조로 복사됩니다.
const original = {a: 1, b: {c: 2}};
const copy = Object.assign({}, original);
original.b.c = 3;
console.log(original);
console.log(copy);
Object.prototype.hasOwnProperty()
객체가 특정 속성을 가지고 있는지 확인합니다.
const user = {
name: '라이캣',
age: 30,
company: 'weniv',
}
console.log(user.hasOwnProperty('name'));
console.log(user.hasOwnProperty('address'));
2. 배열(Array) 메서드
2.1 요소 추가 및 삭제
push(), pop()
push() 메서드는 배열의 끝에 요소를 추가하고 길이를 반환합니다. pop() 메서드는 배열의 마지막 요소를 제거하고 해당 요소를 반환합니다.
const arr = [1, 2, 3];
arr.push(4);
console.log(arr);
const elem = arr.pop();
console.log(elem);
console.log(arr);
unshift(), shift()
unshift() 메서드는 배열의 앞에 요소를 추가하고 길이를 반환합니다. shift() 메서드는 배열의 첫 번째 요소를 제거하고 해당 요소를 반환합니다.
const arr = [1, 2, 3];
arr.unshift(0);
console.log(arr);
const elem = arr.shift();
console.log(elem);
console.log(arr);
splice()
배열에 새로운 요소를 추가하거나, 기존 요소를 제거하거나, 요소를 교체할 수 있습니다. 시작 인덱스, 제거할 요소 개수, 추가할 요소를 인수로 전달합니다.
const arr = [1, 2, 3, 4, 5];
// 요소 추가
arr.splice(2, 0, 6);
console.log(arr);
// 요소 수정
arr.splice(2, 1, 7);
console.log(arr);
// 요소 삭제
arr.splice(2, 1);
console.log(arr);
2.2 요소 검색
indexOf()
배열에서 특정 요소를 찾아 인덱스를 반환합니다. 찾는 요소가 없으면 -1을 반환합니다.
const arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3));
console.log(arr.indexOf(6));
includes()
배열에 특정 요소가 포함되어 있는지 확인합니다. 포함되어 있으면 true, 없으면 false를 반환합니다.
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3));
console.log(arr.includes(6));
2.3 배열 추출 및 결합
Array.from()
순회 가능한 객체나 유사 배열 객체를 배열로 변환합니다.
const str = 'hello';
const arr = Array.from(str);
console.log(arr);
두 번째 인자로 매핑 함수를 전달할 수 있습니다.
const str = 'hello';
const arr = Array.from(str, x => x.toUpperCase());
console.log(arr);
const arr = Array.from({ length: 5 }, (v, i) => i);
console.log(arr);
slice()
배열의 요소를 추출하여 새로운 배열을 반환합니다. 시작 인덱스부터 종료 인덱스 전까지의 요소를 추출합니다.
const fruits = ['apple', 'banana', 'cherry', 'orange'];
console.log(fruits.slice(1, 3));
console.log(fruits.slice(2));
concat()
두 개 이상의 배열을 합쳐 새로운 배열을 반환합니다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
console.log(arr3);
배열 복사
여러 배열 메서드를 이용하여 배열을 복사할 수 있습니다.
-
Array.from()
const arr = [1, 2, 3];
const newArr = Array.from(arr);
arr[0] = 0;
console.log(newArr);
-
slice()
const arr = [1, 2, 3];
const newArr = arr.slice();
arr[0] = 0;
console.log(newArr);
-
concat()
const arr = [1, 2, 3];
const newArr = arr.concat();
arr[0] = 0;
console.log(newArr);
주의할 점은 위 복사는 얕은 복사(shallow copy)이므로 중첩된 객체는 참조로 복사됩니다.
const arr = [[1], [2], [3]];
const newArr = arr.slice();
arr[0][0] = 0;
console.log(newArr);
join()
배열의 모든 요소를 연결하여 하나의 문자열로 만듭니다. 구분자를 인자로 전달할 수 있고, 인자를 생략하면 쉼표로 구분됩니다.
const arr = ['apple', 'banana', 'cherry'];
console.log(arr.join());
console.log(arr.join(' '));
flat()
중첩된 배열을 평탄화하여 새로운 배열을 반환합니다. 인수로 깊이를 전달할 수 있습니다.
const arr = [1, 2, [3, 4, [5, 6]]];
console.log(arr.flat()); // 기본값은 1
console.log(arr.flat(2));
2.4 정렬
sort()
배열의 요소를 정렬하는데 사용합니다. 원본 배열을 정렬하며, 정렬 순서를 정의하는 함수를 인자로 전달할 수 있습니다.
const arr = [3, 1, 2];
arr.sort();
console.log(arr);
const fruits = ['사과', '바나나', '딸기', '수박', '포도'];
fruits.sort();
console.log(fruits);
하지만 숫자 배열을 정렬할 때는 주의해야 합니다. 기본적으로 문자열로 변환하여 정렬하기 때문에 숫자 배열을 정렬할 때는 비교 함수를 사용해야 합니다. 두 값 a, b를 비교하여 비교 함수의 반환값이 0보다 작으면 a를 앞으로, 0보다 크면 b를 앞으로 정렬합니다.
const arr = [40, 100, 1, 5, 2];
arr.sort();
console.log(arr);
// 오름차순
arr.sort((a, b) => a - b);
console.log(arr);
// 내림차순
arr.sort((a, b) => b - a);
console.log(arr);
Tim 정렬 알고리즘
sort() 메서드는 Tim 정렬 알고리즘을 사용합니다. Tim 정렬은 합병 정렬(Merge Sort)과 삽입 정렬(Insertion Sort)을 결합한 알고리즘입니다.
데이터를 여러 개의 덩어리로 분할하고 삽입 정렬 알고리즘으로 정렬한 다음, 합병 정렬 알고리즘으로 합병합니다. Python, Java 등의 언어에서도 Tim 정렬을 사용합니다.
Tim sort에 대해 알아보자reverse()
배열의 요소 순서를 반대로 뒤집습니다.
const arr = [1, 2, 3];
arr.reverse();
console.log(arr);
2.5 순회
forEach()
배열을 순회하며 각 요소에 대해 주어진 함수를 실행합니다. 이 때, 함수는 인자로 배열 요소, 인덱스, 배열 자체를 순서대로 받습니다. 반환하는 값은 없습니다.
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num, index, arr) => {
console.log(num, index, arr);
});
각 요소에 대해 특정 작업을 수행 할 때 사용합니다.
const fruits = ['apple', 'banana', 'cherry'];
const breads = []
fruits.forEach(fruit => {
breads.push(`${fruit} bread`);
});
console.log(breads);
map()
배열을 순회하며 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다.
const numbers = [1, 2, 3, 4, 5];
const double = numbers.map(num => num * 2);
console.log(double);
forEach와 비슷해 보이지만, map은 새로운 배열을 반환합니다. 배열 요소마다 특정 작업을 수행하고 return 되는 값으로 새로운 배열을 만들 때 사용합니다.
const fruits = ['apple', 'banana', 'cherry'];
const breads = fruits.map(fruit => `${fruit} bread`);
console.log(breads);
복잡한 데이터에서 특정 값을 추출하여 새로운 배열을 만들 때 유용합니다.
const users = [
{ name: '라이캣', level: 30, id: 1, color: 'orange' },
{ name: '빙키', level: 10, id: 2, color: 'pink' },
{ name: '소울곰', level: 20, id: 3, color: 'green' },
];
const names = users.map(user => user.name);
console.log(names);
for...of
반복가능한 객체(배열, 문자열, Map, Set, arguments 객체 등)를 순회하며 각 요소에 대해 주어진 문을 실행합니다.
const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
console.log(fruit);
}
reduce()
배열의 각 요소에 대해 주어진 함수를 실행하고, 하나의 결과값을 반환합니다. 함수에는 누적값과 현재 요소를 인자로 받으며, 초기값을 지정할 수 있습니다.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => {
console.log(`acc: ${acc}, cur: ${cur}`);
return acc + cur;
}, 0);
console.log(sum);
함수의 반환값을 다음 누적값(acc)으로 전달하여 사용합니다. 초기값을 지정하지 않으면 첫 번째 요소가 초기값이 됩니다.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur);
console.log(sum);
빈 배열의 경우 초기값을 지정하지 않으면 에러가 발생합니다. 초기값을 설정하면 에러가 발생하지 않습니다.
const numbers = [];
// const sum = numbers.reduce((acc, cur) => acc + cur);
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum);
2.6 조건
find(), findIndex()
조건을 만족하는 요소를 찾습니다. find는 조건을 만족하는 첫 번째 요소를, findIndex는 해당 요소의 인덱스를 반환합니다. 조건을 만족하는 요소가 없으면 undefined와 -1을 반환합니다.
const users = [
{ name: '라이캣', level: 30, id: 1, color: 'orange' },
{ name: '빙키', level: 10, id: 2, color: 'pink' },
{ name: '소울곰', level: 20, id: 3, color: 'green' },
];
const user = users.find(user => user.level > 20);
console.log(user);
const index = users.findIndex(user => user.level > 20);
console.log(index);
filter()
조건을 만족하는 요소들만 추출하여 새로운 배열을 반환합니다. 조건을 만족하는 요소가 없으면 빈 배열을 반환합니다.
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens);
const odds = numbers.filter(num => num % 2 !== 0);
console.log(odds);
some(), every()
some은 하나라도 조건을 만족한다면 true, every는 모든 요소가 조건을 만족한다면 true를 반환합니다.
const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven);
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven);
3. 전개 구문
전개 구문은 배열이나 객체를 확장하는데 사용합니다. 배열이나 객체의 요소를 쉽게 복사하거나 새로운 배열이나 객체를 생성할 수 있습니다.
'전개'라는 이름에서 알 수 있듯이 배열이나 객체로 포장되어 있는 데이터를 가지런히 펼치는 역할을 합니다.
3.1 배열의 전개 구문
배열 앞에 ...(Spread 문법)을 붙여 사용합니다. 여러 개의 배열을 합치거나, 배열을 복사할 때 사용합니다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined);
const copy = [...arr1];
console.log(copy);
3.2 객체의 전개 구문
객체 앞에 '...'을 붙여 사용합니다. 객체를 복사하거나 새로운 객체를 생성할 때 사용합니다. 중복되는 프로퍼티는 뒤에 있는 객체의 값으로 덮어써지기 때문에 일부 속성을 업데이트할 때 사용됩니다.
cosnt obj1 = {
name: '라이캣',
level: 10
};
const obj2 = {
name: '빙키',
color: 'pink'
}
const newObj = {...obj1, ...obj2};
console.log(newObj);
const updateObj = {...newObj, level: 20};
console.log(updateObj);
전개 구문의 사용 위치
전개 구문(...)은 특정 구문 내에서만 사용할 수 있습니다.
- 배열 리터럴 내부: [...arr]
- 객체 리터럴 내부: {...obj}
- 함수 호출의 인자: func(...args)
const arr = [1, 2, 3];
console.log([...arr]); // console.log(1, 2, 3); 과 동일
console.log(Math.max(...arr)); // console.log(Math.max(1, 2, 3)); 과 동일