[ONEBITE-REACT] 020. JS 심화 - 배열 메서드 1. 요소 조작

의미

메서드(Method)란 객체에 속한 함수를 말한다.

배열(Array) 또한 객체(Object)이고 이러한 객체들은 데이터와 메서드로 이루어진다. 데이터는 말 그대로 값이고 메서드는 배열을 조작하는 함수의 역할을 하는 것이다.

 

이번 강의에서는 크게 6가지의 요소 조작 메서드에 대해서 배운다.

6가지의 요소 조작 메서드

push

개념

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

기본형

let 객체변수명 = [값1, 값2, ...]
객체변수명.push(추가할 값1, 추가할 값2, ...)

예제

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

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

newLength

배열의 push 메서드는 newLength라는 변수의 값으로 초기화 할 경우, push로 추가된 값까지 포함하여 배열의 길이(값의 개수)를 반환한다.

let arr1 = [1, 2, 3];
const newLength = arr1.push(4, 5, 6);

console.log(arr1); // [1, 2, 3, 4, 5, 6]
console.log(newLength); // 6

pop

개념

배열의 맨 뒤에 있는 요소를 제거하고 반환한다.

기본형

const 반환값을 담을 변수명 = 배열명.pop()

예제

let arr1 = [1, 2, 3];
const poppedItem = arr1.pop();

console.log(poppedItem); // 3
console.log(arr1); // [1, 2]

위 처럼 pop 메서드를 사용한 arr1의 배열의 값은 맨 뒤의 값이 제거되었다. 그리고 그 제거된 값은 poppedItem이라는 변수의 값으로 초기화되었다.

shift

개념

배열의 맨 앞에 있는 요소를 제거하고 반환한다.

기본형

pop 메서드와 같은 방법으로 변수에 담는다.

const 반환값을 담을 변수명 = 배열명.shift()

예제

let arr1 = [1, 2, 3];
const shiftItem = arr1.shift();

console.log(shiftItem); // 1
console.log(arr1); // [2, 3]

unshift

개념

배열의 맨 앞에 새로운 요소를 추가하는 메서드 (push의 반대)

기본형

let 객체변수명 = [값1, 값2, ...]
객체변수명.unshift(추가할 값1, 추가할 값2, ...)

예제

let arr1 = [2, 3, 4];
const newLength = arr1.unshift(0, 1);

console.log(newLength); // 5
console.log(arr1); // [0, 1, 2, 3, 4]

push 메서드와 마찬가지로 newLength라는 변수의 값으로, 앞에 추가한 값까지 더해진 배열의 길이를 반환할 수 있다.

배열 메서드에 따른 연산 속도

메서드	속도
push	빠름
pop	빠름
shift	느림
unshift	느림

push, pop 메서드는 배열의 뒤에 값을 추가하거나 뒤의 값을 제거하는 메서드이다. 따라서 [1, 2, 3]이라는 원래의 배열을 수정한다고 할 때 값을 0번~2번 인덱스 다음인 3번 인덱스를 만들고 추가하는 값을 매칭해주면 간단하다. 제거도 마찬가지다. 마지막 인덱스와 값을 제거해주면 된다.

 

그러나 shift와 unshift는 배열의 앞에 값을 추가하거나 앞의 값을 삭제하는 메서드이다. 따라서 0번 인덱스를 삭제하거나 0번 인덱스를 다른 값으로 바꾸게 되면 그 뒤의 모든 인덱스와 값의 매칭이 다시 이루어지게 된다. 그렇기 때문에 연산속도가 상대적으로 느리다.

 

따라서 가급적 push, pop 메서드로 해결하는 것이 좋다.

slice

개념

마치 가위처럼 배열의 특정 범위를 잘라내서 새로운 배열로 반환하는 메서드.

기본형

let 새로 만들 배열명 = 배열명.slice(자르기 시작할 인덱스, 자를 범위의 끝 인덱스+1)

마지막 인덱스에서 +1을 하는 이유는 엑셀의 텍스트 추출 함수인 mid의 개념과는 다르게 마지막 인덱스의 값으로 넣은 인덱스값의 앞까지 자르게 된다. 따라서 본인의 의도에 따라 인덱스를 설정해주면 되는데 보통 +1 하는 것으로 기억하면 쉽다.

만약 특정 시작 위치에서 배열의 끝까지 잘라내는 경우 두번째 인수는 생략 가능하다.

slice(시작할 인덱스)

주의 : 특정 범위를 slice하지만 원본 배열의 값이 변하지는 않는다.

예제

let arr1 = [1, 2, 3, 4, 5];
const sliced = arr1.slice(2, 5); 
// 값 5의 원래 인덱스는 4지만 4로 쓸 경우 값 4에서 잘리기 때문에 +1을 해준 것.

const sliced2 = arr1.slice(2);
// 끝까지 범위를 잡는 경우 두번째 인수인 5는 생략 가능

console.log(sliced); // [3, 4, 5]
console.log(sliced2); // [3, 4, 5]
console.log(arr1); // [1, 2, 3, 4, 5] 원본 데이터가 변하지 않았다.

뒤에서부터 몇 개의 인덱스를 자르라고 할 수도 있다. 음수로 인수를 넣으면 된다. 보통 '뒤에서부터 몇 개'의 개념이기 때문에 인수는 음수 하나만 넣는다.

let arr1 = [1, 2, 3, 4, 5];
const slicedItem = arr1.slice(-3);

console.log(slicedItem); // [3, 4, 5]
console.log(arr1); // [1, 2, 3, 4, 5]
// 역시 원본 값은 변하지 않는다.

concat

개념

두 개의 서로 다른 배열을 이어 붙여 새로운 배열로 반환한다.

기본형

변수에 담아서 사용한다.

let 새로 담을 변수명 = 1번배열명.concat(2번변수명);

예제

let arr1 = [1, 2, 3];
let arr2 = [4, 5];

let newArray = arr1.concat(arr2);

console.log(newArray); // [1, 2, 3, 4, 5]

정리

메서드명	기능	기본형	부가메서드	연산속도	원본수정
push	배열의 맨 뒤에 값 추가 후 반환	배열명.push(추가할값1, ...)	newLength	빠름	O
pop	배열의 맨 뒤의 값 제거 후 반환	배열명.pop()	-	빠름	O
shift	배열의 맨 앞의 값 제거 후 반환	const 담을 변수명 = 배열명.shift()	-	느림	O
unshift	배열의 맨 앞에 값 추가	배열명.unshift(추가할 값1, ...)	newLength	느림	O
slice	배열의 특정 범위 제거	배열명.slice(시작할 인덱스, 끝날 인덱스+1 (맨끝이면 생략 가능))	-	빠름	X
concat	두 개의 배열을 하나로 합쳐 반환	1번배열.concat(2번배열)	-	-	X