7.1 메서드 splice()
JavaScript의 배열은 데이터 조작을 위한 다양한 내장 메서드를 제공해. 이번 강의에서는 배열의 네 가지 주요 메서드인 splice(), slice(), concat(), indexOf()를 살펴볼 거야. 이 메서드들은 각각 특정한 배열 작업을 수행하며, 데이터 처리에 있어 상당한 편의성을 제공해.
메서드 splice()는 배열의 내용을 변경하여 기존 요소들을 삭제하거나 새로운 요소들을 추가해.
구문:
splice
(start, deleteCount, item1, item2, ...);
여기서:
start: 변경을 시작할 인덱스deleteCount: 삭제할 요소의 개수. 지정하지 않으면, 시작 위치부터 모든 요소가 삭제됨item1,item2,...: 배열에 추가할 요소들. 지정하지 않으면, 요소가 추가되지 않음
예 1: 요소 삭제하기
이 예제에서는 배열 fruits에서 인덱스 2부터 두 개의 요소를 삭제해. 반환 값은 삭제된 요소들의 배열이야.
let fruits = ['apple', 'banana', 'cherry', 'date', 'fig'];
let removed = fruits.splice(2, 2);
console.log(fruits); // 출력: ['apple', 'banana', 'fig']
console.log(removed); // 출력: ['cherry', 'date']
예 2: 요소 추가하기
이번 예제에서는 배열 fruits에 두 개의 새로운 요소(date와 fig)를 인덱스 2부터 추가해. 요소 삭제는 진행되지 않아.
let fruits = ['apple', 'banana', 'cherry'];
fruits.splice(2, 0, 'date', 'fig');
console.log(fruits); // 출력: ['apple', 'banana', 'date', 'fig', 'cherry']
예 3: 요소 교체하기
이 예제에서는 인덱스 1의 요소(banana)가 두 개의 새로운 요소(date와 fig)로 교체돼.
let fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 1, 'date', 'fig');
console.log(fruits); // 출력: ['apple', 'date', 'fig', 'cherry']
7.2 메서드 slice()
메서드 slice()는 원본 배열의 일부를 복사한 새로운 배열을 반환해. 원본 배열은 변경되지 않아.
구문:
array.slice(begin, end);
여기서:
begin: 복사를 시작할 인덱스end: 복사를 종료할 인덱스(해당 인덱스의 요소는 포함되지 않음). 지정하지 않으면, 배열의 끝까지 복사됨
예 1: 배열의 일부 복사하기
이 예제에서는 배열 fruits의 인덱스 1부터 2까지의 요소를 포함한 새로운 배열을 생성해.
let fruits = ['apple', 'banana', 'cherry', 'date', 'fig'];
let sliced = fruits.slice(1, 3);
console.log(sliced); // 출력: ['banana', 'cherry']
예 2: 배열의 시작부터 복사하기
이 예제에서는 배열 fruits의 인덱스 0과 1의 요소를 포함한 새로운 배열을 생성해.
let fruits = ['apple', 'banana', 'cherry'];
let sliced = fruits.slice(0, 2);
console.log(sliced); // 출력: ['apple', 'banana']
예 3: 배열의 끝까지 복사하기
이 예제에서는 배열 fruits의 인덱스 1부터 끝까지의 요소를 포함한 새로운 배열을 생성해.
let fruits = ['apple', 'banana', 'cherry'];
let sliced = fruits.slice(1);
console.log(sliced); // 출력: ['banana', 'cherry']
7.3 메서드 concat()
메서드 concat()는 두 개 이상의 배열을 합치는 데 사용돼. 이 메서드는 합쳐진 모든 배열의 요소를 포함한 새로운 배열을 반환해.
구문:
array1.concat(array2, array3, ...);
여기서:
array1,array2,array3,...: 합치려는 배열들
예 1: 두 배열 합치기
이 예제에서는 배열 fruits1과 fruits2가 새로운 배열 combined로 합쳐져.
let fruits1 = ['apple', 'banana'];
let fruits2 = ['cherry', 'date'];
let combined = fruits1.concat(fruits2);
console.log(combined); // 출력: ['apple', 'banana', 'cherry', 'date']
예 2: 여러 배열 합치기
이 예제에서는 세 개의 배열이 새로운 배열 combined로 합쳐져.
let fruits1 = ['apple', 'banana'];
let fruits2 = ['cherry', 'date'];
let fruits3 = ['fig', 'grape'];
let combined = fruits1.concat(fruits2, fruits3);
console.log(combined); // 출력: ['apple', 'banana', 'cherry', 'date', 'fig', 'grape']
예 3: 배열에 요소 추가하기
이 예제에서는 배열 fruits에 cherry와 date 요소를 추가해서 새로운 배열 moreFruits를 생성해.
let fruits = ['apple', 'banana'];
let moreFruits = fruits.concat('cherry', 'date');
console.log(moreFruits); // 출력: ['apple', 'banana', 'cherry', 'date']
7.4 메서드 indexOf()
메서드 indexOf()는 배열에서 특정 요소의 첫 번째 인덱스를 반환하며, 요소가 없는 경우 -1을 반환해.
구문:
array.indexOf(searchElement, fromIndex);
여기서:
searchElement: 찾으려는 요소fromIndex: 검색을 시작할 인덱스. 지정하지 않으면, 배열의 시작부터 검색을 시작함
예 1: 배열에서 요소 찾기
이 예제에서는 메서드 indexOf()가 배열 fruits에서 banana 요소의 인덱스를 반환해.
let fruits = ['apple', 'banana', 'cherry'];
let index = fruits.indexOf('banana');
console.log(index); // 출력: 1
예 2: 요소가 없는 경우
이 예제에서는 메서드 indexOf()가 배열 fruits에서 date 요소를 찾지 못해 -1을 반환해.
let fruits = ['apple', 'banana', 'cherry'];
let index = fruits.indexOf('date');
console.log(index); // 출력: -1
예 3: 특정 인덱스부터 요소 찾기
이 예제에서는 메서드 indexOf()가 인덱스 2부터 banana 요소를 검색하여 인덱스 3에서 찾게 돼.
let fruits = ['apple', 'banana', 'cherry', 'banana'];
let index = fruits.indexOf('banana', 2);
console.log(index); // 출력: 3
GO TO FULL VERSION