map 함수는 기본적으로 배열 안의 모든 값에 영향을 줍니다. 그런데 조건부로 처리하면 원하는 값에만 변화를 줄 수 있습니다.

예를 들어, 다음 배열에서 숫자 0을 10으로 바꾸고 싶다고 가정해봅시다.

const numbers = [-3, -2, -1, 0, 1, 2, 3];

그러면 다음과 같이 코드를 작성해 0을 10으로 바꾼 새로운 배열을 생성할 수 있습니다.

const numbers = [-3, -2, -1, 0, 1, 2, 3];
const nextNumbers = numbers.map(number => number === 0 ? 10 : number);
console.log(nextNumbers); // [-3, -2, -1, 10, 1, 2, 3]

삼항연산자를 사용해 조건을 만족하면 10, 그렇지 않으면 기존 값을 그대로 사용하도록 한 것이죠.

filter를 사용했을 때와 마찬가지로 원한다면 배열의 index를 사용해 업데이트할 수도 있습니다. 예를 들어, 배열의 index가 3인 원소를 10으로 바꾸고 싶다면 다음과 같이 코드를 작성하면 됩니다.

const numbers = [-3, -2, -1, 0, 1, 2, 3];
const nextNumbers = numbers.map((number, i) => i === 3 ? 10 : number);
console.log(nextNumbers); // [-3, -2, -1, 10, 1, 2, 3]

여러 객체로 이루어진 배열을 다룰 때도 마찬가지입니다. 한 가지 주의할 점은, 객체 내부의 값을 업데이트할 때도 불변성을 유지하면서 업데이트해야 한다는 점입니다.

const items = [
      { id: 1, text: '안녕하세요' },
      { id: 2, text: '환영합니다' },
      { id: 3, text: '반갑습니다' }
];