티스토리 뷰

Frontend-dev/HTML-CSS-JS

자바스크립트의 배열

RunningWater 2018. 2. 10. 14:50

배열이란?



배열도 객체와 같이 여러가지 값들을 저장할 수 있습니다. 객체와 다른점은 순서가 있다는 것입니다. 네! 배열은 바로 순서가 있는 객체입니다. 그리고 많은 값들을 한 곳에 저장할 때도 아주 유용하게 쓰일 수 있습니다. 

배열 선언하기


let arr = ["컴퓨터", "티비", "냉장고"];


배열은 위와 같은 형태로 선언합니다. 대괄호 사이에 값을 적고, 값 끼리는 ,로 구분합니다. 지금은 문자열로만 채웠지만 숫자, 또 다른 배열, 객체 등 모든 값들을 넣을 수 있습니다.


let arr2 = new Array("컴퓨터", "티비", "냉장고");


arr2처럼 선언하는 방법도 있습니다. 둘 다 배열을 만들지만 첫 번째 방법이 더 쉽기 때문에 많이 쓰입니다. 첫 번째 방식처럼 직접 값을 넣는 방법을 리터럴이라고 합니다. 문자열을 변수에 넣을 때도 따옴표를 이용해서 직접 넣었죠? 그런 것들을 다 리터럴이라고 합니다. 

배열 불러오기

배열 안에 있는 정보는 어떻게 이용할 수 있을까요? 배열은 순서가 있는 객체라고 표현했습니다. 여기서 순서는 인덱스(색인)를 뜻합니다. 배열명[인덱스]를 이용하면 배열의 정보를 불러올 수 있습니다.

arr[0]; // 컴퓨터
arr[1]; // 티비
arr[2]; // 냉장고


숫자는 0부터 시작합니다. 컴퓨터는 숫자를 0부터 세기 시작한다는 것을 명심해주세요. 객체에서는 대괄호 안에 키 값을 넣어서 객체에 저장된 정보를 불러왔었습니다. 배열은 그 키값이 인덱스가 된 것입니다. 우리는 3개의 정보가 들어있는 배열을 만들었지만, 4번째 값을 불러오면 어떻게 될까요?


arr[3]; // undefined 반환
arr[4]; // undefined 반환


해당하는 정보가 없으면 자바스크립트는 오류를 내는게 아니라 undefined라는 값을 줍니다. 아주 유연한 언어죠?

배열에 값 넣기

배열에 값을 넣는 방법은 unshift()와 push()가 있습니다. 둘의 차이는 기존 배열에 앞쪽에 새로운 값을 넣느냐 아니면 뒤쪽에 새로운 값을 넣느냐의 차이입니다. 만들어논 배열에 휴대폰과 침대를 넣어보겠습니다. 


arr.unshift("휴대폰"); // ["휴대폰", "컴퓨터", "티비", "냉장고"]
arr.push("침대"); // ["휴대폰", "컴퓨터", "티비", "냉장고", "침대"]


unshift()를 이용하면 배열의 앞 쪽으로 새로운 정보가 들어가며, push()를 이용하면 배열에 뒤쪽으로 새로운 정보가 추가됩니다. 물론 arr[4] = "추가할 값"; 을 이용해서도 넣을 수 있습니다. 기존의 값이 있다면 수정이 될 것이고, 없다면 새로운 값이 지정 인덱스에 들어가게 됩니다.

배열에서 값 빼기

배열에서 값을 빼는 방법은 shift()와 pop()이 있습니다. 물론 이 2개도 앞쪽의 값을 빼거나 뒤쪽의 값을 빼거하 하는 차이가 있습니다. 휴대폰과 침대를 다시 빼보도록 하겠습니다. 


arr.shift(); // ["컴퓨터", "티비", "냉장고", "침대"]
arr.pop(); // ["컴퓨터", "티비", "냉장고"]



공감은 제작자에게 큰 힘이 됩니다.


댓글