Array.map()함수

프로그래머스 코딩 문제 풀면서 가장 많이 남들의 답으로 봤지만 가장 이해가 되지 않았던 map함수에 대해 오늘 조원들과 같이 머리를 싸매고 고민했다...  그런데!!!! 너무 설명이 잘 되어 있는 블로그를 찾게 되었다.

 

https://mjn5027.tistory.com/80

[ JavaScript ] 자바스크립트 map( ) 함수

여기 쓰신분이 진짜 너무 깔끔하게 map()의 예시와 설명을 적어주셔서 대략의 map의 이미지는 캐치했다. 

 

map( ) 함수는 값과 인덱스를 인자로 받아 자동으로 for문을 돌려 배열로 다시 나타낼 수 있게 해준다.

map( ) 함수의 인덱스 인자는 기본 for문 방식의 index 와 같은 역할.

 

arr.map((item,index) {조건이나... 그런거 들어감})

   item = arr속의 인자(?) 하나하나!

  index = for문에서 길이만큼 돌릴때 설정하는 i값! 

간단한 예시의 경우 위에 설명해 주신 사이트에 아주 잘 설명 되어있다. 내가 직접적으로 map에 충격을 받았던 문제를 함 봐보자!

 

행렬의 덧셈

문제 설명

행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.

제한 조건

• 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다.

function solution(arr1, arr2) {
    var answer = [];
    for(i=0;i<arr1.length;i++){
       answer[i]=[];
        for (j=0;j<arr1[i].length;j++){
            answer[i][j] = arr1[i][j]+arr2[i][j]
        }
    }return answer;
}


A=[[1,2],[2,3]]
B=[[3,4],[5,6]]

console.log(solution(A,B)) //[[4,6],[7,9]]

처음에 풀었던 식이다. 행렬안에 행렬이 포함되어있어서 한번 행렬을 풀고 한번 더 풀기 위해서 이중 for문을 사용했다.  풀어서 더한후에 다시 answer의 행렬 형식에 넣어서 답을 구했었다 근데 다른사람이 푼 풀이를봤는데 이게왠걸?  왤케 짧아? 이거보고 아 map공부할거야! 하고 시작 했던 일이였다. 그럼 이제 2중 map문을 사용한 식을 뜯어보자.

function sumMatrix(A,B){
  return A.map((a,i) => a.map((b, j) => b + B[i][j]));
}

A=[[1,2],[2,3]]
B=[[3,4],[5,6]]

console.log(sumMatrix(A,B))

<우리 기수의 엄청난 코딩 고수분이 설명해주신것>

function solution(arr1, arr2){
    return arr1.map((value,index) => value.map((value2, index2) => value2 + arr2[index][index2]));
}
// 1. arr1 의 요소들을 각각 조회 : arr1.map((value, index) => )
//   : ex) [[1,2],[2,3]] => [1,2], [2,3] 이렇게 하나씩 읽는다는 뜻임

// 2. arr1 안의 요소가 list로 되어있으니 다시 map 돌려서 각각 조회
//   : value.map((value2, index2)) => ( ... 여기는 나중에 식 써줄거임 ))
//   ex) [ 1, 2 ] => 1, 2 이렇게 하나씩 읽는다는 뜻임

// 3. 데이터 조회를 했으면 이제 요소를 내가 원하는 방식대로 요리해야함
//   : value2 + arr2[i][j] 
//   : index = 0, index2 = 0이면 => 1 + B[0][0] = 1 + 2 = 3
//   : index = 0, index2 = 1이면 => 2 + B[0][1] = 2 + 3 = 5
//.  : 내부 index2 다 돌았으니까, [3, 5] 요소는 요리완료하고 위에 index가 1로 넘어감

//   : index = 1, index2 = 0이면 => 2 + B[1][0] = 2 + 5 = 7
//.  : index = 1, index2 = 1이면 => 3 + B[1][1] = 3 + 6 = 9
//.  : 내부 index2 다 돌았으니까 [7, 9] 요리 완료, 다시 위 index 돌리러감

// 어 돌릴게 없네? 왜? index는 0 ,1 이 끝이었으니꽈. 그럼 다시 리스트로 묶어
// [[3, 5], [7,9]]

 

히야... 멋져! 바로 이해해부렀어 내가 헷갈렸던건 앞에서 부터 순서대로 해석을 하는건지 내부부터하는 건지 그것도 헷갈렸고.. 그리고 그러니까 arr1.map을 하면 뭐가 나오지? 이생각도 했는데 설명을 너무 기가 막하게 해주셔서 왠만큼 이해했다. 이제 이걸 바로 어디다가 활용해 봐야겠다. 써야 기억나지 진짜!!!!화이팅!!!

 

map의 새로운 활용법

 

let arr = [0,0,0]

const a = arr.map((i)=>(i=Math.floor(Math.random()*6)))// 랜덤숫자 0-5까지중에 그리고 floor로 정수 반환

console.log(a) // [1,3,2]의 랜덤한 숫자가 원하는 배열 수 만큼 나옴