addToBackOfNew & addToFrontOfNew

function addToBackOfNew(arr, el) {}

 

문제 

배열과 요소를 입력받아 새로운 요소가 추가된 새로운 배열을 리턴

 

▶ 새로운 배열(주소가다름)을 리턴

▶ 입력받은 배열을 수정하지 않아야 된다 (immutability)

 

입출력 예시

let input = [1, 2];
let output = addToBackOfNew(input, 3);
console.log(input); // --> [1, 2]
console.log(output); // --> [1, 2, 3]

 

수도코드 작성

1. 원본을 유지 할 수 있는 메서드를 사용하여 새로운 배열을 선언한다.

2. 새로운 배열에다 새로운 요소를 추가한다.

3. 추가한 요소의 배열을 반환한다.

 

코드작성

function addToBackOfNew(arr, el) {
 
  let addArr = arr.slice()
 
 addArr.push(el)
 
 return addArr
}

문제풀이

이문제는 mutable과 immutable의 차이점을 확실하게 이해 할 수 있는 문제입니다.

쉽게말해 원본이 수정이 되었느냐 안되었느냐 차이입니다.

 

3번줄에 slice()메서드는 immutable 메서드 입니다. 그래서 arr의 원본이 유지가 됩니다.

그래서 새롭게 할당된 addArr에 요소(el)를 추가해 줍니다.

 

그러면 결과값이 (입출력 예시 arr = [1,2] 를 넣었을 경우)

 

addToBackOfNew(arr , 3)  //  함수의 출력 값은 [1, 2, 3] 이 나옵니다.
arr   //   원본은 유지가 됩니다.  [1, 2]

 

그렇다면 이와 비슷한 맥락의 문제로 배열의 요소를 앞에서 추가하고 싶으면 ? 

 

function addToFrontOfNew(arr, el) {
 
  let newArr = arr.slice()
  
    newArr.unshift(el)
 
 return newArr
}
 

 

push대신 unshift 메서드를 사용해주면 앞에서 요소를 추가 할 수 있습니다.

 

 

 

mutable과 immutable의 차이점

https://joy-codeing-lee.tistory.com/52?category=961871

JavaScript _tip / MUTABLE과 IMMUTABLE 구분하자!!

 

배열 기본 개념

https://joy-codeing-lee.tistory.com/47?category=961278

JavaScript _개념정리/ 배열