[자바스크립트 내장 객체] Array 객체(배열 요소 변경, splice, concat, slice)

# 배열 요소 변경

배열의 요소를 변경할 때는 변경하고자 하는 배열 인덱스로 접근해서 새로운 요소를 할당합니다.

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi"; // 배열에서 인덱스가 0인 요소인 "Banana"를 "Kiwi"로 변경합니다.

# splice()

splice() 함수는 새로운 요소를 특정 위치에 추가합니다. 추가 시에는 기존 요소를 삭제할 수도 있습니다.

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi"); // ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

• 첫 번째 파라미터 - 새로운 요소를 추가할 인덱스 번호
• 두 번째 파라미터 - 첫 번째 파라미터에 해당하는 인덱스에서 요소를 추가하기 전에 삭제할 요소
• 나머지 파라미터 - 추가할 요소

실무 사용 사례

- 테이블 목록이 있습니다. 일반적으로 테이블 목록 같은 데이터는 배열 형태로 관리됩니다. 테이블에서 특정 행을 선택하고 '행 추가' 버튼을 클릭했을 때, 현재 선택된 행의 인덱스 번호를 기준으로 새로운 행을 추가해야 합니다. 이때 splice() 함수를 사용할 수 있습니다.

# Concat()

concat() 함수는 2개 이상의 배열을 하나의 배열로 결합합니다.

let arr1 = ["Cecilie", "Lone"];
let arr2 = ["Emil", "Tobias", "Linus"];
let arr3 = ["Robin", "Morgan"];
let myChildren = arr1.concat(arr2, arr3);

# slice()

slice() 함수는 2개의 파라미터를 사용하며, 첫 번째 파라미터는 시작 인덱스, 두 번째 파라미터는 종료 인덱스 번호입니다. 두 번째 파라미터는 생략 가능하며, 생략하면 시작 인덱스에서 마지막 배열 요소까지 잘라내서 배열 형태로 반환합니다. 두 번째 파라미터를 사용하는 경우 종료 인덱스에 해당하는 요소는 반환하지 않습니다.

let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(3); // [Apple, Mango]
let citrus2 = fruits.slice(1, 3); // [Orange, Lemon]

참조 | 바닐라 자바스크립트(고승원, 비제이퍼블릭)