JavaScript

#27 자바스크립트(JavaScript) - Array 객체

에이블디 2022. 6. 20. 15:22

안녕하세요 여러분! 에이블디 입니다!

 

이번 시간에는 지난 시간에 이어 내장 객체 중 하나인 Array(배열) 객체에 대해 알아보도록 하겠습니다!

배열은 자바스크립트에서 자주 사용하는 자료형이기 때문에 자바스크립트 안에 미리 프로토타입 객체로 만들어져 있는데요, 이 안에는 배열에 활용하는 많은 속성과 함수가 미리 정의되어 있습니다.

 

Array 객체의 인스턴스로 배열을 만들면 Array 객체 안의 함수를 사용할 수 있기 때문에 프로그램 만들기가 한결 편해집니다!

그럼 지금부터 Array 객체에 대해 알아보도록 할게요!

 

배열에 대해서는 자바스크립트의 #2번 글에서 잠시 다루었었죠?

이때 배열을 왜 써야 하는지도 우리는 배웠습니다!

기억이 나지 않으시는 분은 아래의 글에서 다시 한번 공부하고 와주세요!

https://abled.tistory.com/47

 

#2 자바스크립트(JavaScript) - 자료형(Data type) : 복합형(배열, 객체)

안녕하세요 여러분! 에이블디입니다! 오늘은 지난 시간에 이어 복합 자료형에 대해 알아보겠습니다! 복합형에는 배열과 객체가 있는데요! 하나하나씩 알아보도록 하겠습니다! 배열은 하나의 변

abled.tistory.com

 

이전 글에서는 리터럴 표기법을 사용해 배열을 만들어 보았는데요, 이번 시간에는 객체의 인스턴스를 만드는 방법으로 배열을 만들어 보겠습니다!

 

var arrayObject = new Array();

위의 코드는 Array 객체의 인스턴스를 만든 후 arrayObject 변수에 저장한 코드입니다.

빈 괄호를 사용하면 배열 요소의 개수가 고정되지 않기 때문에 arrayObject 배열에 얼마든지 많은 데이터를 저장할 수 있습니다.

 

초깃값이 있는 배열이라면 리터럴을 사용한 방법으로 배열을 만들 수도 있고, Array 객체를 사용하여 배열을 만들 수도 있습니다.

코드로 표현하면 다음과 같습니다.

var season = ["spring", "summer", "fall", "winter"]; // 리터럴을 사용한 배열

var season = new Array("spring", "summer", "fall", "winter"); // Array 객체를 사용한 배열

 

이번엔 배열에 있는 값을 한번 출력해 봐야겠죠?

지난 포스팅에서도 해보았지만 다시 한번 해보도록 하겠습니다!

 

배열에 있는 데이터들을 출력하기 위해선 첫 데이터부터 마지막 데이터까지 반복문으로 반복하여 추출해야 하는데요, 이 배열에 몇 개의 데이터가 있는지 확인하고, 데이터가 들어있는 수를 기준으로 반복문을 사용하여 데이터를 하나하나 추출해 보도록 하겠습니다.

 

배열에 데이터의 개수를 확인하는 방법은 length라는 속성을 사용하면 되는데요!

다음과 같이 사용하면 됩니다.

var season = ["spring", "summer", "fall", "winter"];
season.length;

 

콘솔로 동작을 시켜보면 4개의 데이터가 들어있다고 출력하는 것을 확인할 수 있습니다.

 

지난 포스팅에서 배열의 주소 값은 0부터 시작된다는 것 기억하시죠?

season 배열에 4개의 데이터가 있기 때문에 season[0]부터 season[3]까지의 값을 가져오려면 반복문을 사용해 0부터 3까지 반복하여 주소 값을 추출하면 되겠죠?

이때 반복문을 0부터 시작하여 length값의 -1까지 반복시켜주면 모든 데이터를 추출할 수 있습니다.

코드를 작성하여 각 계절을 출력시켜볼까요?

var season = ["spring", "summer", "fall", "winter"];

for (var i = 0; i < season.length; i++){
	console.log(season[i]);
}

 

봄, 여름, 가을, 겨울이 각각 출력되는 것을 확인할 수 있습니다!

위의 코드와 같이 배열에서 반복문을 사용해 배열의 데이터에 순서대로 접근하려면 인덱스 값을 0부터 length 값의 -1까지 지정한 다는 것을 알아두세요!

 

다음 시간부터는 Array 객체의 함수를 알아보도록 하겠습니다!

다음 시간에 만나요!