개요

자바스크립트를 공부하면서 구글링을 통해 많은 정보를 얻었지만 초급자가 알아보기는 쉽지 않은 설명도 많이 접했었습니다.
저도 아직 초급자에 속하기 때문에 제가 이해해왔던 방식대로 이론을 정리해두면 다른 초급자 분들께 조금이나마 더 도움이 될 것 같았습니다.
그 노력의 시작으로 알고리즘 문제 해결에 도움이 되는 다양한 자료형별 메소드를 비교적 자세히 정리해보고자 합니다.
쓸데없이 장황할수도 있겠지만..

체감상 가장 많이 사용되는 메소드는 배열에 대한 메소드라고 생각하는데요 중에서 '요소 추가'에 대한 메소드부터 시작해보겠습니다.

메소드 명령어 사용법

변화를 주고싶은 배열의 변수에 "."을 붙이고 사용하고 싶은 메소드를 연결해줍니다.
변화시킬 배열의 변수를 "arr"라고한다면,

arr.method(parameter1, parameter2, ...)

형식으로 사용하게 될것입니다
괄호("( )") 안에 들어가게될 parameter는 메소드별로 상이하며, 들어갈 parameter가 없을수도 있습니다.

1. 추가

1) push : 배열 맨끝에 추가

사용법 :
arr.push(value1, value2, value3, ...)    // value=추가할 값들, arr= value가 추가될 배열

parameter로 들어간 값들을 arr의 "뒤쪽 끝"에 추가한다.
parameter는 숫자, 문자열, 배열 등 모든 값이 될 수 있다.

예제 1 : 하나의 value 추가
let arr = [1, 2, 3];
arr.push(5) // arr : [1, 2, 3, 5]

예제 2 : 2개 이상의 value 추가
let arr = [1, 2, 3]
arr.push(4, 5, 6) // arr : [1, 2, 3, 4, 5, 6]

스프레드 연산자를 이용한 추가도 가능하다. 스프레드 연산자에 대해 아직 모르시는 분은 pass

예제 3 : 스프레드연산자를 활용한 여러개의 value 추가
let arr = [1, 2, 3]
let arr2 = [4, 5, 6]
arr.push(...arr2) //arr : [1, 2, 3, 4, 5, 6], arr2 : [4, 5, 6](변화없음)

스프레드 연산자를 쓰지 않고 parameter에 배열을 넣으면 배열이 하나의 index에 들어가게된다.

예제 4 : 배열을 추가
let arr = [1, 2, 3]
let arr2 = [4, 5, 6]
arr.push(arr2) // arr: [1, 2, 3, [4, 5, 6]], arr2: [4, 5, 6]
여기서 추가된 [4, 5, 6]은 하나의 요소이기 때문에 arr의 length는 6이 아닌 4가 된다.

push()는 대상이 되는 배열의 원본을 변경시켜주는 method이다.
그런데 그와 별개로 push()는 변경이 완료된 배열의 길이를 Number의 형태로 return한다.

예제 5: push()의 return값
let arr = [1, 2, 3]
let num = arr.push(4, 5, 6) //arr: [1, 2, 3, 4, 5, 6], num = 6

예제 5번에서와 같이 push에 의해 원본배열 arr에 4, 5, 6이 추가된것과 별개로 push()의 실행결과를 변수에 입력해주었더니 새로 만들어진 배열의 길이인 6이 반환되었다.

많은 배열메소드들이 return값으로 배열을 반환하기 때문에 코드를 짜다보면 배열에 대해 여러가지 메소드를 연결하여 길게 쓸때가 있는데, push()가 들어가게되면 숫자가 반환되어 나오기 때문에 그 이후에는 배열 메소드를 연결해서 쓸 수 없는 점을 주의해야한다.

2) unshift : 배열 맨처음에 추가

사용법 :
arr.unshift(value1, value2, value3, ...)    // value=추가할 값들, arr= value가 추가될 배열

parameter로 들어간 값들을 arr의 "맨 앞부분"에 추가한다.
push와 마찬가지로 parameter는 숫자, 문자열, 배열 등 모든 값이 될 수 있다.
사용 예제도 push와 대부분 동일하다.

예제 1 : 하나의 value 추가
let arr = [1, 2, 3];
arr.unshift(4) // arr : [4, 1, 2, 3]

예제 2 : 2개 이상의 value 추가
let arr = [1, 2, 3]
arr.unshift(4, 5, 6) // arr : [4, 5, 6, 1, 2, 3]

예제 2에서 4, 5, 6을 추가했을때 첫 paremeter부터 순서대로 앞에 추가해 나간다고 생각하면 [6, 5, 4, 1, 2, 3]이 될것으로 예상할 수 있어 헷갈리는 경우가 생길 수 있으나 하나씩 추가하는 것이 아니라 주어진 parameter를 순서 그대로 맨 처음에 추가하게되므로 결과는 [4, 5, 6, 1, 2, 3]으로 나오게 된다.

예제 3 : 스프레드연산자를 활용한 여러개의 value 추가
let arr = [1, 2, 3]
let arr2 = [4, 5, 6]
arr.unshift(...arr2) //arr : [4, 5, 6, 1, 2, 3], arr2 : [4, 5, 6](변화없음)

예제 4 : 배열을 추가
let arr = [1, 2, 3]
let arr2 = [4, 5, 6]
arr.unshift(arr2) // arr: [[4, 5, 6], 1, 2, 3], arr2: [4, 5, 6]

unshift도 push와 마찬가지로 새로운 배열의 길이를 반환한다.

하지만 그보다 더 중요한 것은 unshift의 효율성 문제이다.

기존의 배열 [1, 2, 3]에서 index를 방 번호라고 하면 숫자 1의 방번호는 0번, 숫자 2의 방번호는 1번, 숫자 3의 방번호는 2번이라고 할 수 있다.
push로 요소를 추가했을때에는 앞에 있는 방들의 방번호는 변함없이 새로운 방에만 번호를 붙여 추가해주면 되지만, unshift로 요소를 앞쪽에 추가하면 추가한만큼 원래있던 방들의 번호가 밀리게 되는것이다.

그럼 원래있던 문에 있는 방번호들을 일일이 떼었다가 새 번호를 붙여주는 작업이 필요할것이고 실제로 unshift는 처음 설명했던 push에 비해 시간복잡도가 좋지 않다.

그래도 '배열의 제일 앞에 값을 추가한다'는 목적을 달성해야한다면 굳이 다른방법을 쓸 필요는 없어보인다.
스프레드연산자, concat 등 다른 방법들과 비교했을때 상대적으로 빠른 속도를 보여주는것을 볼 수 있다. 따라서 반복이 많지 않을 경우 unshift를 사용하는데 부담을 느낄 필요는 없을것같다.

3) splice : 배열 중간에 값 추가

사용법 :
arr.splice(index, 0, value1, value2, value3, ...)    
// arr= value가 추가될 배열, index = 값을 추가할 위치의 인덱스, value=추가할 값들 

splice는 원래 첫번째 parameter를 자르기 시작할 인덱스, 두번째 parameter를 잘라낼 요소의 갯수로 하여 배열을 잘라내는데 많이 쓰이지만, 3번째 parameter부터는 잘라낸 위치에 들어갈 값을 지정할 수 있다.
따라서 잘라낼 요소의 갯수인 두번째 parameter를 0으로 하면 원래 배열을 변경하지 않고 중간에 요소만 추가할 수 있다.

예제 1 : 하나의 value 추가
let arr = [1, 2, 3];
arr.splice(1,0,4) // arr : [1, 4, 2, 3]. 1번 idx에 4 추가

예제 2 : 2개 이상의 value 추가
let arr = [1, 2, 3]
arr.splice(1, 0, 4, 5, 6) // arr : [1, 4, 5, 6, 2, 3]. 1번 idx에 4, 5, 6 추가

예제 3 : 첫번째 parameter가 음수인 경우
let arr = [1, 2, 3]
arr.splice(-1, 0, 4) //arr : [1, 2, 4, 3]. 마지막으로부터 첫번째 요소 앞에 값 추가

예제 3처럼 첫번째 parameter를 음수(-n)로 넣어주면 뒤에서부터 n번째 요소 앞에 값이 추가된다.

요약

push: 맨 뒤에 요소 추가
unshift: 맨 앞에 요소 추가
splice: 중간에 요소 추가

원래 concat같이 배열을 parameter로 넣으면 배열을 풀어서 추가해주는 메소드도 있었으나 지금은 스프레드연산자의 등장으로 크게 의미가 없어진것 같다. 위의 3가지 방법만 알고 있다면 배열에 요소를 추가하는 것은 문제가 없을것이다.