[JavaScript]두 배열 요소 합쳐서 return 하기 / concat 함수 null 체크

- Cannot read properties of undefined 에러가 나는 경우 -

 

배열 a와 b가 있다.

getTotalMember(a, b) {
    // do somethig
}

배열 a와 배열 b는 둘 다 null일지 아닐지 모른다.
근데 두 배열이 가지는 요소들을 합쳐서 return 해줘야 하는 상황이다.
당장 떠오르는 방법은 배열 a나  b에 concat() 함수를 붙여주는 방법이다.
a.concat(b);
b.concat(a);

그런데 이렇게 하면 null 에러가 뜰지도 모른다.

> Uncaught TypeError: Cannot read properties of undefined (reading 'concat')
왜냐하면 배열 a와 배열 b는 양쪽 모두 null로 넘어올 수 있는 상황이기 때문이다.
a.concat(b); 
위 명령어를 실행한다고 했을 때, b가 null일 때는 상관 없지만, 
a가 null 로 넘어온다고 생각해 보면 이해가 갈 것이다.

그러면 임시로 빈 배열을 하나 만들어 두고, 
그 안에다가 배열 a와 배열 b 의 요소들을 넣어두면 어떨까?
그리고 그 임시 배열을 반환해준다면 a배열과 b배열의 요소가 모두 담긴 배열을 얻을 수 있을 것이다.
const temp = [];
temp.concat(a, b);
위처럼 하면 temp 를 빈 배열로 확실히 정의했기 때문에 null 에러는 뜨지 않을 것이다.

 

- 요소에 undefined 나 null 이 들어가는 경우 - 

실제로 실행해 보면 null 에러는 뜨지 않지만 또 다른 문제가 발생한다.
a나 b가 null 이어도 concat 함수를 실행하면 그 자체를 요소로 집어넣기 때문이다.
temp 가 빈 배열이고 a 가 null 일 때 concat 함수를 실행하면 그 결과는 아래와 같다.
const temp = [];
const a = null;
const b = ["hello"];
temp.concat(a, b);  // [null, "hello"];
위처럼 null 이나 undefined 가 그대로 요소로 들어가 버린다.

따라서 concat 함수 안에서도 a와 b배열에 nullish check 를 한 번 더 해줘야 한다.
a 나 b 가 null 일 경우에는 빈 배열을 이어붙이도록 연산자를 추가했다.
let temp = [];
temp = temp.concat(a || []);
temp = temp.concat(b || []);

이렇게 하면 null pointer exception 도 뜰 일이 없으면서 
null이나 undefined가 배열 요소로 들어가지도 않는다.

getTotalMember(a, b) {
    let temp = [];
    temp = temp.concat(a || []);
    temp = temp.concat(b || []);
    return temp;
}