자바스크립트 slice, splice ,split의 활용과 차이점

오늘은 자바스크립트에서 자르고 나누는 함수지만 헷갈리는 세가지 함수, slice, splice, split 에대해 알아보도록 하겠습니다.

[ 목차 ]

1. slice()

slice는 원하는 부분을 복사하여 새로운 배열로 리턴합니다. 원본을 변경시키지 않습니다.

//slice(시작점, 끝점) ...0부터 시작

let my_array=['test1', 'test2','test3','test4'];
second_array=my_array.slice(2,3)

// output:['test3','test4']

 

2. splice()

splice는 원본이 수정됩니다.

//splice(시작점, 잘라낼 갯수, 추가할 요소,,,n개)


// 요소 제거
let my_array=['test1', 'test2','test3','test4'];
my_array.splice(1,3);
console.log(my_array);

// output: ['test1']


// 요소 제거 후 신규요소 추가
let my_array=['test1', 'test2','test3','test4'];
my_array.splice(1,3,'test5','test6');
console.log(my_array);

// output: ['test1','test5','test6']


// 신규 요소 추가
let my_array=['test1', 'test2','test3','test4'];
my_array.splice(1,0,'test5','test6');
console.log(my_array);

// output: ['test1', 'test5', 'test6', 'test2', 'test3', 'test4']

 

3. split()

split은 문자열을 다루는 메서드로, 구분 문자를 기준으로 잘린 배열을 반환합니다. 원본 문자열이 바뀌거나 하진 않습니다.

// split("구분 문자");


// 공백으로 나누기
const my_string = "Goodmorning everyone. Nice to meet you";
my_array=my_string.split(" ")
console.log(my_array);

// output: [ 'Goodmorning', 'everyone.', 'Nice', 'to', 'meet', 'you' ]


// 모든문자로 나누기
const my_string = "Goodmorning everyone. Nice to meet you";
my_array=my_string.split("")
console.log(my_array);

// output: 
// [
//   'G', 'o', 'o', 'd', 'm', 'o', 'r',
//   'n', 'i', 'n', 'g', ' ', 'e', 'v',
//   'e', 'r', 'y', 'o', 'n', 'e', '.',
//   ' ', 'N', 'i', 'c', 'e', ' ', 't',
//   'o', ' ', 'm', 'e', 'e', 't', ' ',
//   'y', 'o', 'u'
// ]

// 문자열 뒤집기
const my_string = "Goodmorning everyone. Nice to meet you";
my_array=my_string.split("").reverse().join("");  // 나누고, 뒤집고, 다시합친다.
console.log(my_array);

// output: "uoy teem ot eciN .enoyreve gninromdooG"