[자바스크립트] map() 함수로 배열 순환하기

Map

배열을 순회하며 지정된 콜백 함수를 적용하여 각 요소를 변환하고, 그 변환된 값을 모아서 새로운 배열로 반환하는 역할을 수행합니다.

 

기본구문

arr.map(function(currentValue[, index[, array]]) {
    // 변환(mapping)할 로직: 변환된 결과를 반환해야 합니다.
}[, thisArg]);

function	각 배열 요소에 적용될 때 호출되는 콜백함수 currentValue (필수): 처리할 현재 요소. 이 매개변수를 통해 현재 요소에 접근할 수 있습니다. index (옵션): 처리할 현재 요소의 인덱스. 이 매개변수를 사용하여 현재 요소의 인덱스에 접근할 수 있습니다. array (옵션): map() 함수를 호출한 배열. 이 매개변수를 사용하여 원본 배열에 접근할 수 있습니다.
thisArg	function을 실행할 때 this로 사용할 객체. 이 매개변수는 필요에 따라 사용됩니다.

 

반환값

배열의 각 요소에 대해 실행한 function의 결과를 모은 새로운 배열을 반환합니다.

 

 

 

---

 

예제

해당 배열이 있을 때 각 요소에 곱하기 5를 해보자

let arr = [3, 4, 5, 6];

 

 

for문

for(let i = 0; i < arr.length; i++){
	arr[i] = arr[i]*3; 
}
console.log(arr); // [15, 20, 25, 30]

 

map()

각 배열에 있는 요소를 순회하며 매핑해준 값을 반환한다. 일반적으로 특정 숫자를 곱하거나, 애플리케이션에 필요한 다른 작업을 수행하는 등 요소에 어떤 변경 사항을 적용하는 데 사용된다고 한다.

let arr_map = arr.map((element, index) => element * 5 );

console.log(arr_map); // [ 15, 20, 25, 30 ]

 

 

 

---

 

map() 함수의 장점

• 각 배열 요소를 변환하여 새로운 배열을 반환합니다.
• 반환된 배열은 원본 배열과 길이가 같고, 각 요소는 변환된 값으로 구성됩니다.
• 변환 작업을 통해 새로운 배열을 생성하기 때문에 원본 배열은 변경되지 않습니다.

 

map() 함수의 단점

• 새로운 배열을 생성하는 과정에서 메모리를 사용하므로, 큰 크기의 배열에 대해서는 성능 이슈가 있을 수 있습니다.

 

---

 

 

✏️ 예제

function solution(arr, n) {
    var answer = [];
    
    if(arr.length % 2 === 1){
        return arr.map((element, index) => index % 2 == 0 ? element + n : element);
    }else{
        return arr.map((element, index) => index % 2 == 1 ? element + n : element);
    }
}

 

정수 배열 arr과 정수 n이 매개변수, arr의 길이가 홀수라면 arr의 모든 짝수 인덱스 위치에 n을 더한 배열을, 

arr의 길이가 짝수라면 arr의 모든 홀수 인덱스 위치에 n을 더한 배열을 return 하는 함수

 

코드를 자연어 그대로 나열하자면 아래와 같다.

if()문으로 배열의 길이가 홀수라면 / 반환한다 / 배열을 순회해서 / 인덱스가 짝수라면(홀수라면) / 각 요소에 + n / + n

 

//n = 27
//arr = [49, 12, 100, 276, 33]

입력값 〉[49, 12, 100, 276, 33], 27
기댓값 〉[76, 12, 127, 276, 60]

 

 

---

 

 

const myMap = new Map(); //맵 생성
myMap.set('one',1);
myMap.set('two',2);
myMap.set('three',3);

//반복을 위한 method -> keys, values, entries
for(const key of myMap.keys()){
    console.log(key);
}

// 결과
// one
// two
// three


for(const value of myMap.values()){
    console.log(value);
}

// 결과
// 1
// 2
// 3

for(const entries of myMap.entries()){
    console.log(entries);
}

// 결과
// ['one', 1]
// ['two', 2]
// ['three', 3]

 

반복을 위한 메소드로는 keys, values, entries가 있다.

Map 을 순회할 때는 for .. of 를 쓰거나 forEach문을 쓰면된다.

forEach 구문을 사용할 때에는 Key와 Value의 순서가 반대라는 것만 기억하면 된다.

for (let [key, val] of testmap.entries()) {
  console.log(key, ':', val); // 1:123, 2:345, 3: 789
}

for (let [key, val] of testmap) {
  console.log(key, ':', val);
}

testmap.forEach((val, key) => {
  console.log(key, ':', val);
})

 

 

Set

고유한 값을 저장하는 자료구조로 값만 저장하며 Key값은 저장되지 않는다.

값이 중복되지 않는 유일한 요소이다.

const mySet = new Set();
mySet.add('value1'); //key X value O
mySet.add('value2');
mySet.add('value2');

console.log(mySet);

 

중복되는 값은 저장되지 않으므로 결과로는 Set(2) { 'value1', 'value2' } 이 출력된다.