JavaScript 배열 메소드 map() 쉽게 배우기 - 예시 코드 제공

JavaScript 배열 메소드 map() 쉽게 배우기 - 예시 코드 제공

 

 

JavaScript의 배열 메소드 중 map()은 배열의 각 요소를 변환하고 새로운 배열을 반환하는 데 사용되는 강력한 도구입니다. 이 글에서는 map() 메소드의 사용 방법과 예시 코드를 통해 이해해보겠습니다.

 

map() 메소드란?

 

 

 

map() 메소드는 배열의 각 요소에 대해 지정된 함수를 호출하고, 각 함수 호출의 결과를 모아서 새로운 배열을 생성합니다. 이 메소드는 원본 배열을 변경하지 않고, 각 요소를 변환할 때 주로 사용됩니다.

 

// 기본 문법
const newArray = array.map(function(currentValue, index, array) {
    // 각 요소를 변환한 결과를 반환
    return transformedValue;
});

 

• currentValue: 현재 반복 중인 요소의 값
• index: 현재 요소의 인덱스
• array: 원본 배열

 

 

map() 메소드 사용 예시

 

JavaScript 바닐라 자바스크립트 개념, 장점, 사용법, 예시 코드

 

이제 map() 메소드의 사용 예시를 통해 실제 동작을 살펴보겠습니다.

 

// 예시 배열
const numbers = [1, 2, 3, 4, 5];

// 각 숫자를 제곱한 새로운 배열 생성
const squaredNumbers = numbers.map(function(number) {
    return number * number;
});

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

 

위 코드에서 map()를 사용하여 numbers 배열의 각 숫자를 제곱한 새로운 배열인 squaredNumbers를 생성합니다.

 

 

map()을 사용한 배열 요소 변환

 

 

 

map() 메소드를 사용하여 배열 요소를 변환할 수 있습니다. 예를 들어, 문자열 배열의 각 요소에 접두사를 추가할 수 있습니다.

 

// 예시 배열
const colors = ['빨강', '파랑', '노랑'];

// 각 요소에 '밝은' 접두사 추가
const brightColors = colors.map(function(color) {
    return '밝은 ' + color;
});

console.log(brightColors); // ['밝은 빨강', '밝은 파랑', '밝은 노랑']

 

위 코드에서 map()를 사용하여 colors 배열의 각 요소에 "밝은 "이라는 접두사를 추가한 brightColors 배열을 생성합니다.

 

 

map()의 반환 값

 

map() 메소드는 새로운 배열을 반환합니다. 원본 배열은 변경되지 않으며, 새로운 배열에 변환된 값이 포함됩니다.

 

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

const squaredNumbers = numbers.map(function(number) {
    return number * number;
});

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

 

끝으로

 

map() 메소드는 배열의 각 요소를 변환하고, 새로운 배열을 반환하는 유용한 배열 메소드입니다. 이를 통해 배열의 요소를 간단히 변환하거나 가공할 수 있으며, 원본 배열을 변경하지 않습니다. map()를 활용하여 JavaScript 코드를 보다 효율적으로 작성하고 다양한 변환 작업을 수행하세요.

 

▼ 아래 글도 읽어보세요! ▼

 

JavaScript Spread 연산자 (...) 소개, 개념, 사용법, 예제 코드

 

JavaScript null과 undefined 소개, 특징, 예시, 개발자들 사이의 약속

 

JavaScript forEach() 쉽게 배우기 - 소개, 구문, 특징, 예제 코드