자바스크립트에서 배열은 많은 종류의 데이터를 다루는 데 유용한 자료 구조입니다. 배열을 사용하여 여러 개의 값을 저장하고, 접근하고, 조작할 수 있습니다. 맵핑(Mapping)은 자바스크립트 배열에서 각 요소에 특정 작업을 적용하여 새로운 배열을 생성하는 과정을 의미합니다. 이번 블로그 포스트에서는 자바스크립트 배열에서 맵핑을 어떻게 수행할 수 있는지 알아보겠습니다.

map() 함수

자바스크립트 배열에서 맵핑 작업을 수행하는 가장 일반적인 방법은 map() 함수를 사용하는 것입니다. map() 함수는 각 배열 요소에 대해 주어진 작업(callback 함수)을 실행한 결과를 새로운 배열로 반환합니다. 이때, 기존 배열은 변경되지 않습니다.

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((num) => {
  return num * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

위의 예제에서 map() 함수는 numbers 배열의 각 요소를 2배로 만들어 doubledNumbers 배열을 생성합니다. map() 함수는 배열의 각 요소에 대해 콜백 함수를 실행하고, 콜백 함수의 반환값으로 새로운 배열을 생성합니다.

map() 함수의 활용 예시

map() 함수는 맵핑 작업의 다양한 활용 예시를 제공합니다. 몇 가지 예시를 살펴보겠습니다.

문자열 길이 맵핑

const names = ["Alice", "Bob", "Charlie", "Dave"];

const nameLengths = names.map((name) => {
  return name.length;
});

console.log(nameLengths); // [5, 3, 7, 4]

위의 예제에서 nameLengths 배열은 names 배열의 각 이름의 길이를 담고 있습니다. map() 함수를 사용하여 각 이름의 길이를 구하고, 새로운 배열을 생성합니다.

객체 속성 추출 맵핑

const students = [
  { name: "Alice", grade: 80 },
  { name: "Bob", grade: 90 },
  { name: "Charlie", grade: 70 },
];

const studentNames = students.map((student) => {
  return student.name;
});

console.log(studentNames); // ["Alice", "Bob", "Charlie"]

위의 예제에서 studentNames 배열은 students 배열의 각 학생 객체에서 이름을 추출하여 담고 있습니다. map() 함수를 사용하여 각 학생 객체의 이름을 추출하고, 새로운 배열을 생성합니다.

결론

자바스크립트 배열에서 맵핑은 각 요소에 특정 작업을 적용하여 새로운 배열을 생성하는 과정입니다. map() 함수를 사용하여 간편하고 가독성 있는 방식으로 맵핑 작업을 수행할 수 있습니다. 맵핑은 배열에서 데이터의 변환, 추출, 계산 등 다양한 용도로 활용될 수 있습니다. 자바스크립트 개발에서 맵핑을 적재적소에 사용하여 효율적이고 유지보수가 용이한 코드를 작성해보세요.