[JavaScript] 배열 메서드 (push, pop, shift, unshift, slice, concat) [4/20study]

 

배열 메서드 - (6가지 요소 조작 메서드)

 

 

 

1. push

배열의 맨 뒤에 새로운 요소를 추가하는 메서드

let arr1 = [1, 2, 3];
arr1.push(4);
console.log(arr1); // [1, 2, 3, 4]

 

만약 이때, 여러개 요소를 추가 하고 싶다면 , 를 사용하면 됨

let arr1 = [1, 2, 3];
arr1.push(4, 5, 6, 7);
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7]

 

하나 더! push 메서드는 요소들을 추가하고 난 다음에 변환된 배열의 길이를 반환함

let arr1 = [1, 2, 3];
let arrLength = arr1.push(4, 5, 6, 7);
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7]
console.log(arrLength); // 7

 

 

2. pop

배열의 맨 뒤에 있는 요소를 제거하고, 반환하는 메서드

let arr2 = [1, 2, 3];
let arrPop = arr2.pop();
console.log(arr2); // [1, 2]
console.log(arrPop); // 3 (제거된 요소)

 

 

3. shift

배열의 맨 앞에 있는 요소를 제거하고, 반환하는 메서드

let arr3 = [1, 2, 3];
let arrShift = arr3.shift();
console.log(arr3); // [2, 3]
console.log(arrShift); // 1 (제거된 요소)

 

 

4. unshift

배열의 맨 앞에 요소를 추가하는 메서드

let arr4 = [1, 2, 3];
let arrUnshift = arr4.unshift(0);
console.log(arr4); // [0, 1, 2, 3]
console.log(arrUnshift); 4 (배열의 길이 반환)

 

 

5. slice

배열의 특정 범위를 잘라내서 새로운 배열로 반환하는 메서드

let arr5 = [1, 2, 3, 4, 5];
let arrSlice = arr5.slice(2, 5);
(첫 번째 인수로 처음 자를 인덱스, 두 번째 인수로 잘라낼 범위의 끝을 지정하고 +1 한 값을 작성)
console.log(arrSlice); // [3, 4, 5] (잘라낸 배열 요소)

But
console.log(arr5); // [1, 2, 3, 4, 5] (원본 배열의 값은 변동 없음)

하나더!
끝까지 자를 거면 두번째 인수 생략가능
let arrSlice = arr5.slice(2, 5); =>> 변경 let arrSlice2 = arr5.slice(2); 같은 결과출력됨
console.log(arrSlice); // [3, 4, 5] (잘라낸 배열 요소)
console.log(arrSlice2); // [3, 4, 5] (잘라낸 배열 요소)

만약 뒤에서 부터 자르고 싶으면 음수 사용
let arrSlice3 = arr5.slice(-1);
console.log(arrSlice3); // [5]
let arrSlice4 = arr5.slice(-3);
console.log(arrSlice4); // [3, 4, 5]

 

 

6. concat

두개의 서로 다른 배열을 이어 붙여서 새로운 배열을 반환하는 메서드

 

let arr6 = [1, 2];
let arr7 = [3, 4];
let arrConcat = arr6.concat(arr7); (arr6 뒤에 arr7을 이어 붙이겠다는 뜻)
console.log(arrConcat); // [1, 2, 3, 4]

 

 

 

마무리🔥

공부해보고 작성해본 포스팅인데 제대로 작성한 것 같기도 하고 모르겠지만 배열 메서드를 사용해서 개발자가 원하는대로 배열의 값을 변화를 시키는게 많이 유용한 것 같고 이 외에도 많은 배열 메서드가 있는데 더 공부하고 포스팅 해보겠당
화이팅🔥