💡forEach 와 map의 정확한 차이 파악

기억해야 할 점은 map은 새로운 배열을 반환한다는 점이다.

let arr = [1, 2, 3, 4, 5];

arr.forEach((value, index) => {
  arr[index] = value * 2;
)};

// arr = [2, 4, 6, 8, 10]

반환 값은 단순히 버려지기 때문에 forEach에서 반환하지 않는다.

let arr = [1, 2, 3, 4, 5];

const newArr = arr.map((value) => value * 2);

반면 map은 새로운 배열을 반환한다.

만약 함수형 프로그래밍을 선호한다면 map을 사용하는 것이 더 바람직하다. forEach 를 사용한다면 기존 Array에 영향을 주는 반면에 map은 완전히 새로운 Array를 반환하기 때문에 원래의 배열을 건들지 않는다.

또한 데이터를 변경할 때 다른 메서드를 연결하는 것도 map이 훨씬 수월하다.

💡 slice와 splice의 차이 파악

slice 함수는 인자로 시작 인덱스와 종료 인덱스를 받는다.

**중요한 점은 종료 인덱스는 반환에 포함시키지 않고, 원본 배열은 절대 변경되지 않는다. **

splice 함수는 slice와 다르게 원본 배열을 변경시킨다. 또한 시작 인덱스부터 몇개를 삭제할 것인지, 즉 시작 인덱스와 개수를 인자로 받는다. 이 부분은 예시와 함께 살펴보자.

let arr = [1, 2, 3, 4, 5];

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

또한 특정 배열의 값을 제거하고 그 자리에 다른 값을 채워 넣을 수도 있다.

let arr = [1, 2, 3, 4, 5, 6, 7];

arr.splice(0, 3, -1, -2, -3); // 0번째 index 부터 3개를 뒤에 숫자로 채움

console.log(arr); // [-1, -2, -3, 4, 5, 6, 7]

💡 새로운 배열 생성

보통 정적인 배열을 생성할 때 Array.from을 사용한다.

생각보다 Array.from을 사용하면 유용한 케이스가 여러 가지 있다.

💎 Set으로 배열 만들기

const set = new Set(['a', 'b', 'c', 'a']);
Array.from(set); // [ "a", "b", "c" ]

💎 Map으로 배열 만들기

const mapper = new Map([
  ['1', 'a'],
  ['2', 'b'],
]);

Array.from(mapper.values()); // ['a', 'b']

Array.from(mapper.keys()); // ['1', '2']

💎 화살표 함수 이용하기

Array.from({ length: 5 }, (v, i) => i); // [0, 1, 2, 3, 4]

Array.from([1, 2, 3], (x) => x + x); // [2, 4, 6]

💡 Object.entries 이해하기

Object.entries(obj);

기본적인 형태는 위와 같다. 객체 타입을 인자로 넣으면 key와 value를 값으로 하는 배열의 형태로 변환된다고 생각하면 편하다. 이것도 예를 들어서 확인해보자.

let obj = { a: 'apple', b: 'banana' };

return Object.entries(obj); // [ ['a', 'apple'], ['b', 'banana']]

아래와 같이 for…of 을 사용할 수도 있다.

let obj = { a: 'apple', b: 'banana' };

for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} : ${value}`); // "a : apple", "b : banana"
}

💡 for…in / for…of 사용해보자

for...in 과 for...of은 아직 사용하는 법에 대해서 익숙하지 않다. 다양한 방법을 사용할 줄 아는 것이 코드를 이해하고 더 나은 코드를 작성하는 것을 믿어 의심치 않기 때문에 이번 기회에 한번 포스팅 해본다.

한마디로 정리하자면 for in은 객체, for of은 배열에서 사용한다.

// for in 사용 예제

const obj = { a: 'apple', b: 'banana' };

for (const key in obj) {
  console.log(key); // 'a' 와 'b' 출력
}

for (const key in obj) {
  console.log(obj[key]); // 'apple' 와 'banana' 출력
}

for in은 index의 순서를 상관하지 않기 때문에 배열에서 사용하는 것은 정확도를 떨어트릴 수 있기 때문에 사용을 지양한다.

// for of 사용 예제

const fruits = ['apple', 'banana', 'cherry'];

for (let i of fruits) {
  console.log(i); // 배열 값 출력
}