[Javascript] at(), slice(), splice()

[Javascript] at(), slice(), splice()

강의를 보던중 at이라는 함수의 쓰임을 보고 비슷한 기능을 하는 함수들과

비교를 해보고 싶다는 생강이 들어서 블로그에 정리합니다.

 

.at(), .slice(), 그리고 .splice()는 JavaScript에서 배열을 다룰 때 사용하는 메서드입니다. 

 

 

.at()

• JavaScript에서 배열(Array), 문자열(String), 그리고 타입화 배열(TypedArray)에서 특정 인덱스에 있는 요소를 반환하는 메서드입니다.
• 이 메서드는 특히 음수 인덱스를 사용하여 배열이나 문자열의 끝에서부터 요소를 가져올 때 유용합니다.
• 음수 인덱스 사용 가능: 기존의 대괄호 표기법(array[index])에서는 음수 인덱스를 사용할 수 없지만, .at() 메서드를 사용하면 배열이나 문자열의 끝에서부터 요소를 쉽게 가져올 수 있습니다.
• 가독성 향상: 코드의 의도가 더 명확해지며, 특히 마지막 몇 개의 요소에 접근할 때 코드 가독성이 향상됩니다.

const array = [10, 20, 30, 40, 50];
console.log(array.at(0));  // 10
console.log(array.at(2));  // 30
console.log(array.at(-1)); // 50 (마지막 요소)
console.log(array.at(-2)); // 40 (마지막에서 두 번째 요소)

const str = 'Hello';
console.log(str.at(0));  // 'H'
console.log(str.at(1));  // 'e'
console.log(str.at(-1)); // 'o' (마지막 문자)
console.log(str.at(-2)); // 'l' (마지막에서 두 번째 문자)

const typedArray = new Uint8Array([1, 2, 3, 4, 5]);
console.log(typedArray.at(0));  // 1
console.log(typedArray.at(3));  // 4
console.log(typedArray.at(-1)); // 5 (마지막 요소)
console.log(typedArray.at(-3)); // 3 (마지막에서 세 번째 요소)

 

 

 

.slice()

• .slice() 메서드는 배열의 일부를 복사하여 새 배열을 생성합니다.
• 원본 배열은 변경되지 않습니다.
• 두 개의 매개변수를 사용하여 시작 인덱스와 종료 인덱스를 지정합니다.
• 종료 인덱스는 포함되지 않습니다.

const array = [10, 20, 30, 40, 50];

console.log(array.slice(1, 3)); // [20, 30] (인덱스 1부터 3 전까지)
console.log(array.slice(-2));   // [40, 50] (마지막 두 요소)
console.log(array.slice(2));    // [30, 40, 50] (인덱스 2부터 끝까지)

 

 

 

.splice()

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

const array = [10, 20, 30, 40, 50];

// 삭제
const removed = array.splice(2, 1); // [30] (인덱스 2에서 1개의 요소 삭제)
console.log(array);                 // [10, 20, 40, 50]
console.log(removed);               // [30]

// 추가
array.splice(2, 0, 60);             // 인덱스 2에 60 추가
console.log(array);                 // [10, 20, 60, 40, 50]

// 교체
array.splice(3, 1, 70);             // 인덱스 3의 1개 요소를 70으로 교체
console.log(array);                 // [10, 20, 60, 70, 50]