JS Array 관련

추가

• 배열을 추가하는 방법으로는 push가 있다.
• 원본 배열 수정

const arr = [1, 2];

// 인수로 전달받은 모든 값을 원본 배열 arr의 마지막 요소로 추가하고 변경된 length값을 반환
const result = arr.push(3, 4);
console.log(result); // 4

// push는 원본 배열을 직접 변경함
console.log(arr); // [1, 2, 3, 4]

• push는 성능 면에서 좋지 않다고한다.
• push보다는 length를 사용하여 요소를 추가하자.

const arr = [1, 2];
arr[arr.length] = 3;

console.log(arr); // 1, 2, 3

• 원본 배열을 건드리는 문제가 있기 때문에, push보다는 스프레드 문법을 사용하자.

const arr = [1, 2];

const arr2 = [...arr, 3];

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

제거

• 배열에서 요소 제거는 pop을 사용.
• 원본 배열 수정

const arr = [1, 2];

// 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환
const result = arr.pop();
console.log(result); // 2

console.log(arr); // [1]

앞에 추가

• unshift는 인수로 전달받은 모든 값을 원본 배열의 제일 앞에 추가하고 변경된 length를 반환한다.
• 원본 배열 수정.
• 마찬가지로 스프레드 문법을 사용하는 것이 좋음.

const arr = [1, 2];

const result = arr.unshift(3, 4);
console.log(result); // 4

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

// 스프레드 문법
const arr2 = [3, 4, ...arr];
console.log(arr2); // [3, 4, 1, 2]

slice vs splice

slice

• 원본 배열을 변경하지 않음
• 인수로 전달된 범위의 요소들을 복사하여 배열로 반환

const arr = [1, 2, 3, 4];

// arr[0]부터 arr[1] 이전까지 복사하여 반환
arr.slice(0, 1); // [1]

// arr[1]부터 arr[2] 이전까지 복사하여 반환
arr.slice(1, 2); // [2]

splice

• 원본 배열 수정
• 원본 배열의 중간에 요소를 추가하거나 제거할 때 사용

const arr = [1, 2, 3, 4];

// 원본 배열의 인덱스의 1부터 2개를 제거하고 그 자리에 새로운 요소 20, 30 삽입
const result = arr.splice(1, 2, 20, 30);

console.log(result); // [2, 3]
console.log(arr)l // [1, 20, 30, 4]

includes

• 항상 indexOf로 배열에 요소가 있는지 확인했었는데, 이제부터 includes를 사용.

const arr = [1, 2, 3];

arr.includes(2); // true

forEach vs map

forEach

• 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하는 프로그래밍
• 단순 반복문을 대체하기 위함

const arr = [1, 2, 3];
const arr2 = [];

arr.forEach(i => arr2.push(i **2));

console.log(arr2); // [1, 4, 9]

map

• 콜백함수의 반환값들로 구성된 새로운 배열을 반환
• 원본배열을 변경하지 않음

const arr = [1, 4, 9];
const arr2 = arr.map(i => Math.sqrt(i));

console.log(arr); // [1, 4, 9]

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