안녕하세요 여러분! 에이블디 입니다!
이번 시간에는 지난 시간에 이어 내장 객체 중 하나인 Array(배열) 객체에 대해 알아보도록 하겠습니다!
배열은 자바스크립트에서 자주 사용하는 자료형이기 때문에 자바스크립트 안에 미리 프로토타입 객체로 만들어져 있는데요, 이 안에는 배열에 활용하는 많은 속성과 함수가 미리 정의되어 있습니다.
Array 객체의 인스턴스로 배열을 만들면 Array 객체 안의 함수를 사용할 수 있기 때문에 프로그램 만들기가 한결 편해집니다!
그럼 지금부터 Array 객체에 대해 알아보도록 할게요!
배열에 대해서는 자바스크립트의 #2번 글에서 잠시 다루었었죠?
이때 배열을 왜 써야 하는지도 우리는 배웠습니다!
기억이 나지 않으시는 분은 아래의 글에서 다시 한번 공부하고 와주세요!
이전 글에서는 리터럴 표기법을 사용해 배열을 만들어 보았는데요, 이번 시간에는 객체의 인스턴스를 만드는 방법으로 배열을 만들어 보겠습니다!
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 객체의 함수를 알아보도록 하겠습니다!
다음 시간에 만나요!
'JavaScript' 카테고리의 다른 글
#29 자바스크립트(JavaScript) - push, unshift (0) | 2022.06.22 |
---|---|
#28 자바스크립트(JavaScript) - concat, join (0) | 2022.06.21 |
#26 자바스크립트(JavaScript) - 생성자(Constructor) (2) | 2022.05.27 |
#25 자바스크립트(JavaScript) - 리터럴(Literal) (2) | 2022.05.26 |
#24 자바스크립트(JavaScript) - 프로토타입과 인스턴스 (0) | 2022.05.25 |