📌 javascript 개념 #12 split / slice / concat

splice : 배열 추가 / 삭제

splice( )

문자를 삭제한 후 추가 할 수 있다.

예제 코드

let fruits = ["apple", "orange", "grape"];
let retr;

// 배열 추가 / 삭제 : LIFO (= Last In First Out) = front
retr = fruits.splice(1);
console.log(retr); // [ 'orange', 'grape' ]
// 매개변수로 받은 index 이후의 값을 잘라서 return 하는것
console.log(fruits); // [ 'apple' ]

fruits = ["apple", "orange", "melon", "strawberry"];
console.log(fruits.splice(1, 1)); 
// [ 'orange' ] -> 오렌지가 빠짐
console.log(fruits); 
// 사과, 멜론, 딸기만 보임

console.log(fruits.splice(1, 1, "mango", "kiwi")); 
// [ 'melon' ] -> 멜론이 빠짐
console.log(fruits); 
// [ 'apple', 'mango', 'kiwi', 'strawberry' ]
// -> 멜론이 빠진 자리에 데이터가 추가

splice ( start, end, add index )
= 시작인덱스부터 끝나는 인덱스까지 지워줄 범위를 설정한뒤, 추가할 인덱스를 적어준다.

---> 예를 들어,

fruits = ["apple", "orange", "melon", "strawberry"];

console.log(fruits.splice(1, 1, "mango", "kiwi")); 

에서는 인덱스 1부터 인덱스 1까지 (= orange) 지워줄 범위로 설정한 뒤, 그 자리에 망고과 키위를 삽입하는 것이다.

---

slice : 배열 삭제

slice( )

원본 객체에 영향을 미치지 않으며, 배열 요소를 삭제하는데 쓰인다.

예제 코드

// 배열 삭제 (index) : 배열요소 삭제
// => 원본 객체에 영향을 미치지 않음 (slice)
let fruits = ["apple", "orange", "melon"];

console.log(fruits.slice(1));
// [ 'orange', 'melon' ]
console.log(fruits); 
// [ 'apple', 'orange', 'melon' ] 다 있음 (원본데이터)

console.log(fruits.slice(1, 2)); 
// [ 'orange' ]

// slice는 String과 동일하게 index이다.
// 따라서, end point를 두번째 매개변수로 넣어야 한다
console.log(fruits.slice(-2));
// [ 'orange', 'melon' ]

// 자료형과 동일하게 음수로도 넣어줄 수 있다.
// ==> slice의 방식은 String과 동일하다.

--> 기본형태는 아래와 같다.

Array.slice([start], [end])

---

concat : 배열 병합

concat( )

배열을 병합할 수 있다. -> 다중 배열 병합
원본 객체에 영향을 미치지 않는다.

예제 코드

// 배열 병합
// => concat을 통해 손쉽게 추가 가능하다.
let fruits = ["apple", "orange", "melon"];
let fruits_add = ["cherry", "banana"];

console.log(fruits.concat(fruits_add));
// [ 'apple', 'orange', 'melon', 'cherry', 'banana' ]
console.log(fruits); 
// [ 'apple', 'orange', 'melon' ]
// 원본데이터 그대로 나온다.

--> 기본형태는 아래와 같다.

Array.concat(arg1, arg2, ...)