map() - 배열 변환

송한솔·2023년 5월 3일

설정한 조건에 따라 배열에 변화를 주는 메서드

배열에 원하는 값을 호출하여 변화를 줄 수 있습니다

var array = [12,0,2,3,4,5]; 
var b = array.map(item => item ** 3);
// item의 3제곱 
console.log(b); // [1728, 0, 8, 27, 64, 125]

map 함수에 두번째 인자를 추가하여 index요소를 추가할 수 있습니다.

var array = [2,2,2];
var array_mul = array.map((a,b) => (b+1) * a);
console.log(array_mul); // [2, 4, 6]

첫 번째 인자인 a는 순회하는 배열의 요소 값이고
두 번째 인자인 b는 순회하는 요소의 인덱스 번호입니다.

첫 번째 연산
array_mul(0) = 2;
((인덱스번호 0 + 1)) * 2 = 2;

두 번째 연산
array_mul(1) = 2;
((인덱스번호 1) + 1)) * 2 == 4;

세 번째 연산
array_mul(2) = 2;
((인덱스번호 2) + 1)) * 2 == 6;

따라서 array_mul = [2,4,6] 이 됩니다.

예시 1.

// 문제 설명
문자열 배열 strlist가 매개변수로 주어집니다.
strlist 각 원소의 길이를 담은 배열을 retrun하도록 solution 함수를 완성해주세요.


// 제한사항
1 ≤ strlist 원소의 길이 ≤ 100
strlist는 알파벳 소문자, 대문자, 특수문자로 구성되어 있습니다.

// 입출력 예
strlist	                        result
["We", "are", "the", "world!"]	[2, 3, 3, 6]
["I", "Love", "Programmers."]	  [1, 4, 12]

// 주어진 함수
function solution(strlist) {
    var answer = [];
    return answer;
}

// 풀이
function solution(strlist) {
    var answer = [];
    for(var i of strlist){
        answer.push(i.length);
    }
    return answer; // [2, 3, 3, 6]
}

// map을 이용한 풀이
function solution(strlist) {
    return strlist.map(item => item.length); // [2, 3, 3, 6]
}

이렇게 주어진 배열을 원하는 데이터로 변환하여 반환할 수 있습니다

예시 2.

// 문제 설명
문자열 my_string과 정수 n이 매개변수로 주어질 때,
my_string에 들어있는 각 문자를 n만큼 반복한 문자열을 return 하도록 solution 함수를 완성해보세요.

// 제한사항
2 ≤ my_string 길이 ≤ 5
2 ≤ n ≤ 10
"my_string"은 영어 대소문자로 이루어져 있습니다.

// 입출력 예
my_string	    n	    result
"hello"	      3	    "hhheeellllllooo"

// 주어진 함수
function solution(my_string, n) {
	var answer = '';
	return answer;
}

// map()을 활용한 풀이방식
function solution(my_string, n) {
    var answer = [...my_string].map(item => item.repeat(n)).join("");
    // 1. map()을 사용하기위해 [...mystring]을 사용하여 배열데이터로 변경
    // 2. map을 활용하여 item을 n번만큼 repeat
    // 3. join("")을 통하여 구분없는 하나의 문자열로 합칩니다.
    return answer;
}

예시 3. 화살표 함수를 사용하지 않는 map() 사용법

ES6 이후 화살표 함수의 방식으로 map 함수를 사용할 수 있게 됬습니다.
화살표 함수를 사용하지 않은 map 함수 활용법입니다.


// 배열 생성
    var numbers = [1, 2, 3, 4, 5];

// map()함수로 새로운 배열 생성
    var processed = numbers.map(function(num){
        return num*num;
    });

// 콘솔에 출력합니다.
    console.log(processed);

결과

0개의 댓글