[JavaScript] concat() 함수 사용법 / 변이 (mutation) 함수

- 사용 기술 -
React(class형) / mobx

 

- 배경 설명 -

select 요소가 있다.
select 를 클릭하면 option 목록이 뜬다.
option 목록 중 하나를 클릭하면 select 값이 바뀐다.

option 목록은 정해져 있지 않다.
서버에서 요청해서 db로부터 뽑아온다.
그 db 값들을 가지고 option 목록을 만든다.

option list 에서도 고정된 값이 있기는 하다.
가장 첫 번째 값은 '전체'다.
조회하는 조건을 select 하는 건데, 조회 조건에 '전체'도 있다.

따라서 option list 를 아래와 같은 순서로 만들었다.
우선 빈 배열을 하나 만든다.
그 배열 안에 '전체' 요소부터 먼저 넣는다.
그 다음에 서버로부터 받은 리스트를 합친다.
합칠 때는 concat 함수를 이용했다.

const selectList = [];
selectList.push({text:"전체", value: "all"});
const optionList = this.props.dataStore.getSelectList(type1);
selectList.concat(option || []);

- 문제점 -

selectList 에 '전체' option 까지는 잘 들어간다.
서버로부터 받은 option 들은 들어가지 않았다.
개발자 도구로 network log 를 보면 분명 서버까지 잘 다녀온다.
리스트도 잘 던져준다.
그 리스트가 담겨 있는 변수 optionlist 를 console 로 찍어 봤다.
분명 안에 값도 잘 들어 있다.
그런데도 selectList 는 '전체' 하나밖에 들어 있지 않았다.
debugger; 를 이용해서 한 줄 한 줄 살펴봐도 마찬가지였다.

 

 

- 원인과 해결 -

concat 함수는 실행한 결과를 다른 변수로 받아주어야 하는데 이 부분을 놓쳤다.
concat 함수는 두 배열을 합쳐주는 기능이다.
이때 두 배열을 합친다고 해서 원본 함수를 수정하지는 않는다.
대신 두 배열을 합쳐서 그 결과를 새 배열로 만들어 return 값으로 반환한다.
따라서 concat 함수를 실행하면 그 결과를 다른 변수로 받아주어야 한다.
그런데 위에서는 실행만 하고 그 결과를 받아주지 않았다.

let selectList = [];
selectList.push({text:"전체", value: "all"});
const optionList = this.props.dataStore.getSelectList(type1);
selectList = selectList.concat(option || []);

- 개념 -

함수를 실행하면 그 인스턴스 자체를 조작하는 함수가 있다.
예를 들어 아래 함수를 보자.

const fruitList = ["banana", "peach", "apple", "orange"];
fruitList.sort();
console.log(fruitList); // ['apple', 'banana', 'orange', 'peach']

위를 보면 sort() 함수를 실행하기 전과 후에 fruitList 는 내용물이 다르다.
sort() 함수를 실행하면 fruitList 변수 안에 있는 데이터 자체를 변이시킨다.
이런 함수를 변이(mutation) 함수라고 한다.

반면에 원본 데이터는 건드리지 않는 함수도 있다.
예를 들어 위에서 사용했던 concat() 함수가 그렇다.

const arr1 = ["banana", "peach"];
const arr2 = ["apple", "orange"];
const result = arr1.concat(arr2);
console.log(arr1);  // ["banana", "peach"]
console.log(result); // ["banana", "peach", "apple", "orange"]

concat 함수를 실행하면 원본 데이터 arr1 과 arr2 는 건드리지 않는다.
다만 그 둘을 재료로 사용하여 새로운 데이터를 만들고 반환한다.

-221213