[자바스크립트] 배열에 값 앞 또는 뒤에 추가하기, Unshift(), Push()

자바스크립트에서 배열에 새로운 값을 추가하고 싶은 경우가 있다면 어떻게 해야할까요? 원하는 값을 앞 또는 뒤 원하는 위치에 아래 두가지 함수를 사용해 간단히 추가할 수 있습니다.

만약 test라는 이름의 변수가 있다면 변수를 아래와 같이 추가할 수 있습니다. 사용방법은 아래와 같습니다.

test.unshift('123');
// 앞에 새로운 배열값 추가

test.push('890');
// 뒤에 새로운 배열값 추가

보시는 것처럼 배열에 새로운 값을 추가할 수 있습니다. 배열을 선언 후 앞 또는 뒤에 추가하는 점만 차이점이고 나머지는 같습니다. 그럼 아래 예제를 봐주세요. 아래는 배열을 추가하는 방법에 대하여 자세한 예제와 함께 알아보겠습니다.

! unshift() 함수를 사용, 새로운 배열값 앞에 추가 예제소스 보기

test = new Array; // test 변수를 배열로 선언
test = ['456', '789'];
// test 변수가 배열값 456, 789을 가짐

test.unshift('123');
// test 변수의 맨 앞에 '123'을 추가하기

실행결과는 아래와 같습니다.

 

test = ['123', '456', '789'];
// 새로운 배열값 123이 앞에 추가되었음

보시는 것처럼 test 배열을 선언한 후 새로운 배열값 '123'을 배열의 맨 앞에 추가하였습니다. 그렇다면 뒤에 추가하려면 어떻게할까요? 다음 예제는 맨 뒤에 추가하는 방법입니다.

!! push() 함수를 사용, 맨 뒤에 배열값 추가하는 예제소스 보기

test2 = new Array; // test2 변수를 배열로 선언
test2 = ['123', '456'];
// test 변수가 배열값 123, 456을 가짐

test2.push('789');
// test2 변수의 맨 뒤에 '789'를 추가함

아래는 실행결과입니다.

test2 = ['123', '456', '789'];
// 새로운 배열값 789가 배열의 뒤에 추가되었음

 

이 예제를 통해 배열의 앞 또는 뒤에 새로운 값을 추가하는 방법에 대하여 알아봤습니다. 배열을 사용하면 데이터를 처리하는데 매우 유용하므로 배열을 처리하는 다양한 함수를 익혀두는 것이 좋습니다.


# 배열을 사용하는 법을 익히자
데이터를 처리하는 과정이 점점 서버측에서 클라이언트에서 처리하는 방식으로 변하고 있습니다. 데이터를 배열이나 제이슨(json) 형태에서 변환 또는 처리하는 방법은 앞으로 더 많아질 것입니다.

출처: http://webisfree.com/blog/?titlequery=%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B0%EC%97%B4%EC%97%90-%EA%B0%92-%EC%95%9E-%EB%98%90%EB%8A%94-%EB%92%A4%EC%97%90-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0--unshift---push-