2024.01.24 TIL #프로그래머스-행렬의덧셈 #함수의실행-매개변수호출

1. 프로그래머스 문제

  행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다.

   2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.

 

-  나의 첫 답변(오답)

 

 function solution ( arr1, arr2 ) {

  var answer = [ ];

 

  for ( let i = 0; i < arr1 .length; i++ )  {

    const newarr = arr1 [ i ] .map ( ( a )  =>  {

      return a + arr2 [ i ][ i ] ;

    } );

    answer. push ( newarr );

  }

  return answer;

 } 

 

 console.log ( solution ( arr1, arr2 ) );

 

 

- 이렇게 했더니 arr1 = [ [ 1, 2 ], [ 3, 4 ] ] 이고 arr2 = [ [ 5, 6 ], [ 7, 8 ] ] 일 때 기댓값은 [ [ 6,8 ], [ 10, 12 ] ] 인데,

  [ [ 6, 7 ], [ 11, 12 ] ]가 계속 나왔다. 

- 자세히 보니, 1 + 5 는 잘 됐는데 그 다음 요소가 2 + 6 이 아니라, 2 + 5가 되는 것이었다.

  즉, a는 잘 증가하는데에 반해 arr2[ i ][ i ]는 계속 첫 번째 요소에 머무르는 것이었다.

왜 인지를 생각해보니

- i = 0 일 때 a는 0번째, 1번째까지 증가하는 데에 반해, arr2[ i ][ i ] 는 여전히 0에 머물러 있어서 그런 것이다. 

 => arr2[ i ][ i ]의 두 번째 [ i ]를 a의 순서랑 일치하도록 맞춰줘야 했다.

 

수정된 답변

 

 

 function solution(arr1, arr2) {

  var answer = [];

 

  for (let i = 0; i < arr1.length; i++) {

    const newarr = arr1[i].map((a, idx) => {

      return a + arr2[i][idx];

    });

    answer.push(newarr);

  }

  return answer;

 }

 

console.log(solution(arr1, arr2));

 

 

- map 함수의 콜백 함수에는 세 개의 인자를 전달받을 수 있다.
  첫 번째 인자는 현재 배열 요소 (a) 

  두 번째 인자는 현재 배열 요소의 인덱스 (idx)
  세 번째 인자는 배열 자체

  => arr2[ i ][ i ]의 두 번째 [ i ] 를 a의 순서와 일치시켜주기 위해서 두 번째 [ i ] 대신에 idx를 넣음으로써 해결했다.

 

2. 함수의 "실행"을 호출할 때

const plusBtn = (a) => setState(state + a)
이런 함수가 있을 때,
onClick(( ) => plusBtn(a))
이렇게 반환값이 함수인 것은 매개변수 (a)를 쓰고자 할 때 앞에 ( ) =>  도 써줘야 한다.

- 왜? 함수의 "실행자체!" 를 onClick이라는 함수의 매개변수를 받아야 하기 때문이다.
버튼을 누르면 함수가 "실행"되기를 원하는 거니까.
onClick( plusBtn(a) ) 만 쓰면 plusBtn 함수의 반환값인 setState(state +a) 만 받는 거라
onClick을 하면 "state에~ a를 더하자~" 가 아니라, 이미 state에 + a를 한  그 "다음"의 상태,  그 "결과"를 받아버리게 된다.

반면,
const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간박스";
    case "green":
      return "초록박스";
    case "blue":
      return "파란박스";
    default:
      return "검정박스";
  }
}; 
이 경우 이 다음에 {getBoxName(a)} 이렇게 받는 이유는

얘는 함수의 "실행"을 원하는 게 아니라 이미 함수가 실행되고 난 뒤의 반환값, 그 결과인 "~~박스"가 필요하기 때문이다.

ok 그러니까~~~
onClick( ) 은 어쨌든 함수의 "실행" 을 매개변수로 받아야 하는 함수
So, 그 안에 들어갈 콜백함수가 다시 plusBtn(a) 이렇게 매개변수 (a) 를 쓸려면,

앞서 말했듯 함수의 "결과"가 아니라 "실행"을 받아야 하니까

앞에 ( ) => 화살표도 같이 써주든가, 아니면 plusBtn 만 받아서 둘 다 어쨌든 "실행"을 매개변수로 받을 수 있도록 하면 된다.