[ES6] 배열 불변 내장 함수

const를 사용해도 배열 내장함수로 수정이 가능하다.

변경 가능한 함수들

push(...items), splice(s, c, ...items), pop(), shift()

대신

무결성 내장 함수를 사용하자. 기존 배열을 건드리지 않고 복사한 배열값을 준다.

concat(...items), slice(0, s), .concat(...items. slice(s+c)), slice(0, len -1), slice(1)

 

concat 추가해서 새 배열로 반환

const arr = [];

const arr2 = arr.concat(1, 2, 3);

const arr3 = arr2.concat(4)

console.log(arr, arr2, arr3);  -> [] [1, 2, 3] [1, 2, 3, 4]

 

 

slice 잘라서 새 배열로 반환

const arr = [0, 1, 2, 3];

console.log(arr.slice(0, 1));    ->[0] 인덱스 0부터 1 사이(이전)에 있는 값을 잘라서 반환

console.log(arr.slice(0,2));    ->[0, 1]

 

맨 앞에 있는 것을 잘라 없애는 shift 대신 slice사용

const arr = [0, 1, 2, 3];

const len = arr.length;    // length내장함수 사용

console.log(arr.slice(1, len));    ->[1, 2, 3]

const arry2 = arr.slice(1)

console.log(array2);          ->[1, 2, 3] 뒤 범위 생략하면 마지막 항목까지 나옴. 같은값.

 

마지막 항목을 추출하고 나머지 항목들을 반환하는 pop 대신 slice 사용

const arr = [0, 1, 2, 3];

const array3 = arr.slice(0, len -1);

console.log(array3); -> [0, 1, 2]

 

전개 연산자 ... 를 사용하여 중간 항목 제외하고 항목을 추가

splice(집어넣을 인덱스 번호, 길이, 사이에 넣을 아이템들 나열)

 

const arr = [0, 1, 2, 3];

arr.splice(1, 0, 0.3, 0.4, 0.7);  // 길이가 0이면 인덱스1번째 자리에 뒤의 값들이 추가됨

console.log(arr)   ->[0, 0.3, 0.4, 0.7, 1, 2, 3]

 

arr.splice(1, 1, 0.3, 0.4);   // 길이가 1이면 해당 길이만큼의 값을 지우고 뒤의 값들을 넣는다.

console.log(arr)   ->[0, 0.3, 0.4, 2, 3] 인덱스 1에 해당하는 1개 값인 1이 지워짐.

 

대신 무결성을 위해 전개연산자 활용

const arr4 = [

     ...arr.slice(0, 1),   // 기존 배열의 0부터 1까지 항목 나열

    0.3,

    0.4,

    0.5,

    5

    ...arr.slice(2)   // 1부터 마지막까지 항목 나열

];

console.log(arr4, arr);    ->[0, 0.3, 0.4, 0.5, 5, 2, 3] [0, 1, 2, 3] 기존항목 그대로 존재

 

 

객체Object의 경우

const obj = {

    a: 1,

    b: 2        

};

obj.a = 3;

console.log(obj);  -> {a: 3, b:2} 오브젝트 값 변경 가능.

이를 막을 수는 없으나 우리가 규칙을 정해서 변경하지 않기로 함.

오브젝트 값을 변경하고싶을 때는 오브젝트를 새로 만들고 전개연산자를 활용.

const obj = {

    a: 1,

    b: 2

};

const obj2 = {

    ...obj,

    a: 3

};

console.log(obj2, obj);     ->{a: 3, b:2} {a:1, b:2} 기존객체 그대로 유지.