[프로그래머스 Level1] 크레인 인형뽑기 게임 - 우수 코드 분석(Javascript, reduce, map 사용)

☺️ 나의 코드

https://hoyashu.tistory.com/254

[프로그래머스] 크레인 인형뽑기 게임 - 나의 코드(Javascript)

 

 

👍우수 코드

프로그래머스에서 제공하는 다른 사람들의 코드 중 좋아요가 가장 높은 코드

const transpose = matrix =>
    matrix.reduce(
        (result, row) => row.map((_, i) => [...(result[i] || []), row[i]]),
        []
    );

const solution = (board, moves) => {
    const stacks = transpose(board).map(row =>
        row.reverse().filter(el => el !== 0)
    );
    const basket = [];
    let result = 0;

    for (const move of moves) {
        const pop = stacks[move - 1].pop();
        if (!pop) continue;
        if (pop === basket[basket.length - 1]) {
            basket.pop();
            result += 2;
            continue;
        }
        basket.push(pop);
    }

    return result;
};

 

 

👨🏻‍💻선행되어야 할 공부

1. Arrow Function 및 ES6문법
2. three dot 이란?
3. .reduce() 
4. .map()
5. .filter()
6. .pop()

 

 

😎알고리즘 분석

1. 가로로 되어있는 배열 세로 배열로 만들기
2. 배열 역순으로 바꾸기
3. 뒤에서 부터 하나씩 꺼내서 바구니에 담기
4. 바구니에 담으면서 바로바로 이전것과 같은지 확인하고 그런 경우 바로 삭제되게 처리

 

 

🌊흐름 이해

1. ES6문법 

//es6
const transpose = matrix => 
    matrix.reduce(
        (result, row) => row.map((_, i) => [...(result[i] || []), row[i]]),[]
   );
    
//es5
const transpose = function (matrix){
    return matrix.reduce(
        function(result, row){
            return row.map(
                function(_, i){
                    return [...(result[i] || []), row[i]];
                })
        },[]
    )
};

풀어서 쓰면 이렇다. 잘 이해가 안되면 풀어서 써보고 다시 줄여보는 연습을 하자. (es6를 es5로 변환해주는 사이트)

arrow function 에서 return은 생략할수 있다.

순서대로 접근해보자

 

메서드의 기능을 대략적으로 보면

map는 배열 내 요소들에 각각 무언가를 실행시킬때 사용한다. (배열의 foreach같은 느낌이랄까..)

reduce은 요소를 점진적으로 반복해서 실행시켜야 할때 사용한다.

 

파라미터 값

board	moves	result
[[0,0,0,0,0],[0,0,1,0,3],[0,2,5,0,1],[4,2,4,4,2],[3,5,1,3,1]]	[1,5,3,5,1,2,1,4]	4

 

2.matrix.reduce() 구분 작동 

	result	row	실행되는 map구분	반환값
1번째	[] ,뒤에있는 []	[0,0,0,0,0]	a	[[0],[0],[0],[0],[0]]
2번째	[[0],[0],[0],[0],[0]]	[0,0,1,0,3]	b	[[0,0],[0,0],[0,1],[0,0],[0,3]]
3번째	[[0,0],[0,0],[0,1],[0,0],[0,3]]	[0,2,5,0,1]	c	[ [ 0, 0, 0 ], [ 0, 0, 2 ], [ 0, 1, 5 ], [ 0, 0, 0 ], [ 0, 3, 1 ] ]
4번째	[ [ 0, 0, 0 ], [ 0, 0, 2 ], [ 0, 1, 5 ], [ 0, 0, 0 ], [ 0, 3, 1 ] ]	[4,2,4,4,2]	d	[ [ 0, 0, 0, 4 ], [ 0, 0, 2, 2 ], [ 0, 1, 5, 4 ], [ 0, 0, 0, 4 ], [ 0, 3, 1, 2 ] ]
5번째	[ [ 0, 0, 0, 4 ], [ 0, 0, 2, 2 ], [ 0, 1, 5, 4 ], [ 0, 0, 0, 4 ], [ 0, 3, 1, 2 ] ]	[3,5,1,3,1]	e	[ [0, 0, 0, 4 ,3], [0, 0, 2, 2 , 5],  [0, 1, 5, 4 , 1],  [0, 0, 0, 4, 3],  [0, 3, 1, 2, 1] ]

 

3.return row.map(~) 구분 작동

map 구분	i	result[i]	row[i]	[...(result[i] || []), row[i]]
a	0	undefined result가 []이기에	[0]	[0] - (result[i] || []) = [] - [...[], 0] = [0] 첫번째 result[i]는 undefined가 나오는데, 그러면 Rest Parameter로써 배열을 합칠수 없기 때문에, ||를 사용해 false인 경우 []가 되어 row[i]와 배열이 된다.
a	1	"	"	[0]
a	2	"	"	[0]
a	3	"	"	[0]
a	4	"	"	[0]
b	0	[0]	[0]	- (result[i] || []) = [0] - [...[0], 0] = [0, 0]
b	1	[0]	[0]	[0, 0]
b	2	[0]	[1]	[0, 1]
b	3	[0]	[0]	[0, 0]
b	4	[0]	[3]	[0, 3]
c	0	[0, 0]	[0]	- (result[i] || []) = [0, 0] - [...[0, 0], 0] = [0, 0, 0]
c	1	[0, 0]	[2]	[0, 0, 2]
c	2	[0, 1]	[5]	[0, 1, 5]
c	3	[0, 0]	[0]	[0, 0, 0]
c	4	[0, 3]	[1]	[0, 3, 1]
d	0	[ 0, 0, 0 ]	[4]	[0, 0, 0, 4]
d	1	[ 0, 0, 2 ],	[2]	[0, 0, 2, 2]
d	2	[ 0, 1, 5 ]	[4]	[0, 1, 5, 4]
d	3	[ 0, 0, 0 ]	[4]	[0, 0, 0, 4]
d	4	[ 0, 3, 1 ]	[2]	[0, 3, 1, 2]
e	0	[ 0, 0, 0, 4 ]	[3]	[0, 0, 0, 4 ,3]
e	1	[ 0, 0, 2, 2 ]	[5]	[0, 0, 2, 2 , 5]
e	2	[ 0, 1, 5, 4 ]	[1]	[0, 1, 5, 4 , 1]
e	3	[0, 0, 0, 4 ]	[3]	[0, 0, 0, 4, 3]
e	4	[ 0, 3, 1, 2 ]	[1]	[0, 3, 1, 2, 1]

 

4.function(_, i){~}

(_, i)에서 _가 무엇인지 알아보니, 딱히 저곳에 아무 값을 넣지 않아도 될때 넣는 임의 값이라고 한다. 코드상 저 위치는 "처리할 현재 요소"가 들어가는 곳이고 row[i]를 의미 하는 것이다.

_를 쓰지 않고도 코드 작성은 가능한데, _에 변수를 넣고 이후 row[i]에 해당 변수를 넣으면 된다.

더 자세히 보기

 

 

5.pop()

배열에서 마지막 요소를 꺼내고 그 요소를 반환함

 

 

❤️배운 점

가로형을 세로형으로 만든 방식을 reduce와 map을 이용해서 코드를 짧게 작성 함
basket에 값을 넣고 바로 이전 값과 같은지 확인해서 처리 함

 

 

관련글

- [프로그래머스] 크레인 인형뽑기 게임 - 나의 코드(Javascript)