JS 개념정리 05 - 배열 관련 메서드

음수 인덱스

음수인 인덱스는 역순을 가리킴. -2번 인덱스라면 뒤에서 2번째 요소.

다만 음수 인덱스를 활용해 요소 값을 반환하는 건 불가능하고, 메서드와 함께 활용할 수 있는 개념 

let colors = ["red", "blue", "green", "yellow", "purple"];

/* 직접 접근은 불가능 */
console.log(colors[-1]); // return : undefined

/* 메서드 활용은 가능 */
colors.splice(-1,1,"black"); // 뒤에서 첫 번째 요소부터 한 개를 제거하고 새 값을 추가
console.log(colors); // return : ["red", "blue", "green", "yellow", "black"]

 

.splice()

• 배열에서 원하는 위치의 요소를 원하는 개수만큼 제거할 수 있음. 반환값은 제거한 요소들의 배열

let colors = ["red", "blue", "green", "yellow", "purple"];
colors.splice(2,2); // 2번 인덱스의 요소부터 2개를 제거함

/* 반환값 */
console.log(colors.splice(2,2)); // return : ["green", "yellow"]
console.log(colors); // return : ["red", "blue", "purple"]

▼ delete 연산자를 적용하지 않는 이유

요소를 지울 순 있지만, 지운 인덱스 자리는 빈 자리로 남아버려 undefined를 반환

• 요소를 제거하는 동시에 추가할 수 있음

let numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 2, 5, 5); // 2번 인덱스 요소부터 2개를 제거하고, 2번 인덱스부터 5와 5를 추가

/* 반환값 */
console.log(numbers.splice(2, 2, 5, 5)); // return : [3,4] // 역시 제거한 요소들의 배열 반환
console.log(numbers); // return : [1, 2, 5, 5, 5]

• 요소를 제거하지 않고 추가할 수도 있음

let numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 0, 3, 3, 3); // 2번 인덱스 요소 다음에 3과 3과 3을 추가함

/* 반환값 */
console.log(numbers.splice(2, 0, 3, 3, 3)); // return : [] // 제거한 요소가 없으니 빈 배열 반환
console.log(numbers); // return : [1, 2, 3, 3, 3, 3, 4, 5]

 

.slice()

원하는 위치의 요소들을 원하는 만큼 복사해 새로운 배열을 반환. 기존의 배열 건드리지 않고 새 배열 만들 때 주로 활용

시작 위치 인덱스값과 끝 위치 값 둘을 인자로 받는데, 시작 위치 요소는 포함하고 끝 위치 요소는 포함하지 않고 반환

let numbers = [1, 2, 3, 4, 5];

/* 1번 인덱스 요소부터 3번 인덱스 요소 전까지! */
let test = numbers.slice(1,3);
console.log(test); // return : [2, 3], 1번인 2는 포함했고, 3번인 4는 포함되지 않았음

/* 시작 위치부터 끝까지 경우 두 가지! */
let test = numbers.slice(2);
console.log(test); // return : [3, 4, 5], 끝 위치를 지정하지 않을 경우 맨 끝까지 포함해 반환
let test = numbers.slice(3, 9999);
console.log(test); // return : [4, 5], 끝 위치를 배열 길이 초과로 지정하면 맨 끝까지 반환

/* 빈 배열을 반환하는 경우 두 가지! */
let test = numbers.slice(2, -3);
console.log(test); // return : [], 시작 위치와 끝 위치가 동일한 순서임
let test = numbers.slice(-1, 2);
console.log(test); // return : [], 시작 위치가 끝 위치보다 뒷 순서에 있음