array 에 데이터를 추가 하는 방법


안녕하세요.
고코더 입니다. 



자바스크립트에서 배열은 매우 중요합니다. 특히 데이터를 배열에 추가하여 다시 사용하는건 프론트엔드 개발의 기본입니다. 그래서 오늘은 배열에 값을 넣는 대표적인 2가지 방법인 push()와 unshift()를 배워보겠습니다.



 1. push() : 배열 뒤에 값을 입력한다.


push()는 배열 뒤에 값을 입력하는 대표적인 배열에 값을 추가하는 방법입니다.
배열을 선언하고 해당 배열에 push로 데이터를 넣는 방식입니다. 뒤로 순차적으로 데이터가
쌓이기에 백엔드에서 전달해주는 데이터 그대로를 담을 수 있습니다. 
1
2
3
4
5
6
    jvar arryData = [];    //배열을 선언
    arry = {
        "name"    :    'gocoder',
        "url" :    'gocoder.net'
    };      
    arryData.push(arry);    //배열을 push 뒤에 넣는다
cs

푸시한 데이터는 순차적으로 배열에 입력 됩니다.


 2. unshift() : 배열 맨 앞에 데이터를 담기


실무에서 자주 쓰는 함수입니다. 순차적으로 담긴 데이터 맨 앞 배열에 해당 데이터를 입력합니다.  
예제를 보시면 먼저 담긴 홈페이지 주소보다 이름 주소가 먼저 나타납니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
    var arryData = [];    //배열을 선언
 
    arry = {
        "name"    :    'gocoder',
        "url" :    'gocoder.net'
    };      
    arryData.push(arry);    //배열을 push 뒤에 넣는다
 
    arry = {
        "name"    :    '이름',
        "url" :    '주소'
    };      
    arryData.unshift(arry);    //배열을 unshift 맨 앞에 넣는다
cs
배열에 맨 앞으로 데이터를 보냅니다.



 3. 종합 예제


두개의 함수를 이용해 예제를 실행해봅니다.
이해하기 어렵지 않으니 눈으로 한번 학습하시길 바랍니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<script type="text/javascript">
var arryData = [];    //배열을 선언
 
    node = {
        "name"    :    'gocoder',
        "url" :    'gocoder.net'
    };      
    arryData.push(node);    //배열을 push 뒤에 넣는다
 
 
    node = {
        "name"    :    '이름',
        "url" :    '주소'
    };      
    arryData.unshift(node);    //배열을 unshift 맨 앞에 넣는다
 
 
    node = {
        "name"    :    'gc',
        "url" :    'gocoder.net'
    };      
    arryData.push(node);    //배열을 push 뒤에 넣는다
 
    for (var i = 0; i < arryData.length; i++) {
        document.write(arryData[i].name);
        document.write(' , ');
        document.write(arryData[i].url);
        document.write('<br>');
    }
</script>
</head>
 
</html>
cs

결과 값은 이렇게 노출 됩니다. 



마무리


push() 할 데이터 점점 많네~



댓글을 달아 주세요