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 |
gocoder_push_unshift.html결과 값은 이렇게 노출 됩니다.
마무리
push() 할 데이터 점점 많네~
'IT_Developers > Javascript' 카테고리의 다른 글
| JavaScript - 3자리 마다 콤마 적용 쉬운방법 / toLocaleString (0) | 2019.10.24 |
|---|---|
| jQuery - ajax sync 옵션 동기, 비동기 동작 방식은? (0) | 2019.10.21 |
| JavaScript - 문자열 맨 뒷자리 잘라내기 / slice를 이용한 쉬운 방법 (0) | 2019.10.21 |
| jQuery - select 선택 값 변경시 trigger(), prop() 차이는? (0) | 2019.10.17 |
| jQuery - prop()으로 select 상태 값 변경 (0) | 2019.10.17 |
댓글