배열 arr.slice / arr.splice / arr.join 다시보기

배열 코플릿을 풀면서 헷갈렸던 것들을 다시 알아보는 시간 !

arr.slice()

어떤 배열의 처음부터 끝까지 (끝 미포함)에 대한 얕은 복사본을 새로운 배열로 반환한다. 원본 배열은 바뀌지 않는다.

arr.slice(begin, end)
arr.slice는 두가지 매개변수를 가질 수 있는데, 둘다 optional이다.

begin
음수 인덱스는 배열의 끝에서부터의 길이를 나타낸다.
slice(-2) 는 배열에서 마지막 두 개의 엘리먼트를 추출한다.
배열에서 마지막 엘리먼트를 지우고 싶다면 slice(0, -1)을 하면 된다.
마지막 요소만 남기고 싶다면 slice(-1)
아예 똑같은 배열을 복사하고 싶다면, arr.slice() 혹은 arr.slice(0)을 하면 된다.
첫번째 매개변수가 undefined인 경우에는, 0번 인덱스부터 slice 한다.
첫번째 매개변수가 배열의 길이보다 큰 경우에는, 빈 배열을 반환한다.

end
end인덱스에 들어간 값을 제외하고 추출한다.
예를 들어 slice(0,5)라면 0~4까지 추출
음수 인덱스는 배열의 끝에서부터의 길이를 나타낸다.
예를 들어 slice(2,-1)은 세번째부터 끝에서 두번째 요소까지 추출한다.
만약 end 값이 배열의 길이보다 크다면, slice()는 배열의 끝까지(arr.length) 추출한다.

사용 예시

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // Array ["camel", "duck"] console.log(animals.slice(1, 5)); // Array ["bison", "camel", "duck", "elephant"] console.log(animals.slice(2, 1)); // Array ["camel", "duck", "elephant"] // 음수를 넣을때 console.log(animals.slice(-2)); // Array ["duck", "elephant"] console.log(animals.slice(2, -1)); // Array ["camel", "duck"] console.log(animals.slice(1, -1)); // Array ["bison", "camel", "duck"] console.log(animals.slice(0, -1)); // Array ["ant", "bison", "camel", "duck"] console.log(animals.slice(-2, -1)); // Array ["duck"]

Arr.splice()

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

start
배열의 변경을 시작할 인덱스이다.
첫번째 인덱스가 배열의 길이보다 큰 값이라면 실제 시작 인덱스가 배열의 길이로 설정된다.
음수인 경우 배열의 끝에서부터 요소를 센다.
-n이면 뒤에서 n번째 요소.
array.length - n 번째 인덱스와 같다.
값의 절대값이 배열의 길이보다 크면 0으로 설정된다.
ex) splice(-1)은 마지막 요소 제거

deleteCount (optional)
배열에서 제거할 요소의 수
deleteCount를 생략하거나 값이 array.length - start 보다 크면 start부터의 모든 요소를 제거
deleteCount가 0 이하라면 어떤 요소도 제거하지 않는다. 이 때는 최소한 하나의 새로운 요소를 지정해야한다.

item1, item2, ... (optional)
배열에 추가할 요소. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 한다.

사용 예시

const months = ['Jan', 'March', 'April', 'June']; months.splice(2); // > Array ["Jan", "March"] months.splice(-1); // > Array ["Jan", "March", "April"] months.splice(1,2); // > Array ["Jan", "June"] months.splice(1, 0, 'Feb'); // > Array ["Jan", "Feb", "March", "April", "June"] months.splice(4, 1, 'May'); //> Array ["Jan", "March", "April", "June", "May"]

arr.join()

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다.

arr.join(['seperator'])

매개변수
separator (optional)
배열의 각 요소를 구분할 문자열을 넣어주면 된다. 문자열을 넣는다. ' '
생략하면 배열의 요소들이 쉼표로 구분된다.
separator가 빈 문자열이면 모든 요소들 사이에 아무 문자도 없이 쭉 연결된다.

반환 값
배열의 모든 요소들을 연결한 하나의 문자열을 반환한다. 만약 arr.length가 0이라면 빈 문자열 반환한다.

사용 예시

const elements = ['Fire', 'Air', 'Water']; console.log(elements.join()); // expected output: "Fire,Air,Water" console.log(elements.join('')); // expected output: "FireAirWater" console.log(elements.join('-')); // expected output: "Fire-Air-Water" 

참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice