[자바스크립트] 배열과 객체 다루기

1. 배열 메서드

1.1 map
배열의 각 요소를 순회하며, 주어진 콜백 함수의 결과를 새로운 배열로 반환합니다.
기존 배열은 변경되지 않습니다.

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map((num) => num ** 2);

console.log(squared); // [1, 4, 9, 16, 25]
console.log(numbers); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)

1.2 filter
배열의 각 요소를 순회하며, 주어진 조건에 일치하는 요소들로만 새로운 배열을 반환합니다.
기존 배열은 변경되지 않습니다.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // [2, 4]
console.log(numbers); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)

1.3 reduce
배열을 순회하며, 주어진 콜백 함수를 사용해 하나의 값으로 축약합니다.
초기값을 설정할 수 있으며, 콜백 함수는 누적값(accumulator)과 현재 값을 인자로 받습니다.

* reduce의 콜백인자의 인자는 4개까지 가능
array.reduce((accumulator, currentValue, currentIndex, array) => {
  // 로직
}, initialValue);

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // 15

const numbers = [1, 2, 3, 4, 5];
const avg = numbers.reduce((acc, num, _, arr) => acc + num / arr.length, 0);
console.log(avg); // 3

1.4 조합
map, filter, reduce를 조합해 배열을 변환하고 필터링할 수 있습니다.
예제: 숫자 배열에서 짝수를 제곱한 결과 반환

const numbers = [1, 2, 3, 4, 5];
const result = numbers
  .filter((num) => num % 2 === 0) // 짝수 필터링
  .map((num) => num ** 2);        // 제곱 변환

console.log(result); // [4, 16]

 

 

2. 객체 다루기

2.1 구조분해

객체나 배열의 속성을 간단히 추출하여 변수에 할당할 수 있습니다.

예제: 객체

const person = { name: "Alice", age: 25, city: "Seoul" };
const { name, age } = person;

console.log(name); // "Alice"
console.log(age);  // 25

예제: 배열

const numbers = [10, 20, 30];
const [first, second] = numbers;

console.log(first);  // 10
console.log(second); // 20

기본값 설정
구조 분해 시 값이 없을 경우 기본값을 설정할 수 있습니다.

const { name, country = "Korea" } = { name: "Alice" };
console.log(country); // "Korea"

2.2 스프레드 연산자 (...)
배열이나 객체를 복사하거나 합칠 때 유용하게 사용됩니다.
배열 복사

const numbers = [1, 2, 3];
const copy = [...numbers];

console.log(copy); // [1, 2, 3]

배열 합치기

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];

console.log(combined); // [1, 2, 3, 4]

객체 병합

const person = { name: "Alice", age: 25 };
const updatedPerson = { ...person, city: "Seoul" };

console.log(updatedPerson); // { name: "Alice", age: 25, city: "Seoul" }

파라미터 분리
함수에서 나머지 파라미터를 분리하는 데 사용됩니다.

function printNumbers(first, ...rest) {
  console.log(first); // 첫 번째 요소
  console.log(rest);  // 나머지 요소
}

printNumbers(1, 2, 3, 4); 
// 1
// [2, 3, 4]