[Javascript] ES6 문법 3.1 - slice(), concat() 메서드 (feat. 무결성)

slice(), concat() 메서드 (feat. 무결성)

slice ( begin , end ) 메서드

slice() 메서드는 어떤 배열의 begin 부터 end 까지 ( end 미포함 ) 에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 즉, 원본 배열은 바뀌지 않는다!!

• begin :  0을 시작으로 하는 추출 시작점에 대한 인덱스 (음수 인덱스는 배열의 끝에서부터의 길이를 나타냄. begin 이 undefined 인 경우에는 0번 인덱스가 시작점임. begin이 배열의 길이보다 큰 경우에는 빈 배열을 반환함.)
• end : 추출을 종료할 0 기준 인덱스 (즉, end 미포함함. 만약 end 값이 배열의 길이보다 크다면 배열의 끝까지 추출함. )

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));  //인덱스 2부터 끝까지
// ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));  //인덱스 2부터 3까지
// ["camel", "duck"]

console.log(animals.slice(1, 5));  //인덱스 1부터 4까지
// ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));  //시작점이 뒤에서 2번째부터 끝까지
// ["duck", "elephant"]

console.log(animals.slice(2, -1));  //인덱스 2부터 뒤에서 2번째까지
// ["camel", "duck"]

console.log(animals.slice());  //인덱스 0부터 끝까지
// ["ant", "bison", "camel", "duck", "elephant"]

concat ( ...items ) 메서드

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다. 즉, 원본 배열을 변경하지 않는다!! (배열이나 값을 이어붙여도 원본은 변하지 않으며, 새로운 배열이나 원본 배열을 조작해도 서로 영향을 받지 않음.) 

 

• items (매개변수) : 배열 또는 값으로 인자를 생략한다면 기존 배열의 얕은 복사본을 반환함.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);  //두 배열을 붙임
console.log(array3);  // ["a", "b", "c", "d", "e", "f"]

splice() 함수는 왜 무결성 제약조건을 위배할까? 

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여  "원본 배열의 내용을 변경"  한다. 이 점에서 const의 불변 변수로 된 원본 배열을 일관되게 유지하지 못한다는 점에서 무결성 제약 조건을 위배한다. 이런 무결성 제약 조건을 위배하지 않고 무결성을 유지하기 위해서 새 배열을 반환하는 slice()와 concat() 함수를 사용하는 것이다. 

const a = [1,2,3,4,5,6,7];
console.log(a.slice(0,2).concat(8,9,a.slice(5)));
// [1,2,8,9,6,7]
console.log(a);  //원본 배열을 보면 변한게 없음.
// [1,2,3,4,5,6,7]
a.splice(2,3,8,9);
console.log(a);  //원본 배열 자체가 변함. (무결성 제약조건 위배)
// [1,2,8,9,6,7]

concat()과 slice() 메서드 예제

아래 경우와 같이 concat과 slice는 모두 새 배열을 반환하기 때문에 새로운 const 변수를 선언하여 할당하는 것이 무결성도 유지하는 안전한 코딩 방법이다.

const fruits = ["Apple","Banana","Orange","Strawberry"];
console.log("fruits : ", fruits);
const fruits2 = fruits.concat("Grape");
console.log("fruits2 : ", fruits2);
const fruits3 = fruits2.slice(0,fruits2.length -1);
console.log("fruits3 : ", fruits3);
const fruits4 = fruits3.slice(1);
console.log("fruits4 : ", fruits4)
const fruits5 = fruits4.slice(0,1).concat(fruits4.slice(3));
console.log("fruits5 : ", fruits5);