- 글에 적은 내용 중 잘못된 부분은 댓글로 적어주시면 감사하겠습니다!
🔜 배열
마트에 가서 오늘 저녁에 먹을 식재료를 사야한다. 과일, 고기, 채소, 과자 등등 이것저것 사야할 것이 많다.
그럼 마트에 가면 가장 먼저 하는 일이 뭘까?
마트에 가자마자 사려고 하는 물건부터 고르는 사람은 없을 것이다. (물건을 한 두개만 사는게 아니라면!)
력
대부분의 사람이라면 마트에 도착하자마자 쇼핑카트나 장바구니를 찾아보지 않을까 싶다.
프로그래밍 언어에서 이 쇼핑카트와 장바구니 역할을 하는게 바로 배열이다!
물론 자바스크립트에서는 객체도 배열처럼 사용할 수 있지만 논외로 한다. 🧐 배열의 생성과 사용
자바나 C언어와는 다르게 자바스크립트에서 배열을 만들고 사용하는 방법은 정말 쉽다. 대신 쉬운만큼 잘못 사용하면 이상한 데이터가 배열에 들어가는 불상사가 생길 수 있으니, 배열에 데이터를 입력하는 걸 조심하자!
1) 배열 리터럴을 통한 생성
제일 쉽게 배열을 만드는 방법이고, MDN에서도 리터럴 생성 방법을 권장한다. 배열을 특정 값과 개수로 초기화하지 않는 이상 이 방법을 가장 많이 사용한다.
// 데이터가 없는 빈 배열 생성
const array = [];
// 배열에 데이터 입력
array.push(1);
array.push(2);
// 배열 내 데이터 출력
console.log(array.pop()); // 2 출력
console.log(array.pop()); // 1 출력pop 메소드를 이용하면 스택처럼 가장 마지막에 입력된 데이터부터 추출된다.
2) 생성자 함수를 통한 생성
배열을 특정 값이나 개수로 초기화 할 때 유용한 생성 방법이다.
// 배열의 크기를 지정하지 않고 생성
const array = new Array();
// 5개의 데이터를 담을 수 있는 배열 생성
const array2 = new Array(5);
// a, b, c을 초기값으로 갖는 배열 생성
const array3 = new Array('a', 'b', 'c');3) 데이터 삽입
자바스크립트에서 배열은 여러 타입의 변수를 담을 수 있다. 문자와 숫자, 심지어 객체나 배열도 요소로 담을 수 있으므로 삽입할 때 유의해야 한다.
// 문자와 숫자를 다 갖고 있는 배열
const array = [1, 'a', 'Hello'];
// 배열 출력
console.log(array); // 1, a, Hello 출력
// push 메소드를 이용한 데이터 삽입
const array2 = [];
array2.push('hi');
array2.push('World!');이 방법 외에도 concat이나 unshift 메소드를 이용해서 데이터를 삽입할 수 있다. 방법은 다양하므로 자세한 내용은 MDN 사이트를 참고하자
4) 데이터 추출
데이터를 배열에 담은 이유는 결국 데이터를 나중에 꺼낼 때 유용하기 때문이다. 배열에서 데이터를 추출하는 방법도 여러가지가 있는데 대표적인 방법만 소개한다.
바로 위에서 만든 array2 배열을 출력할 경우다.
// 반복문을 이용한 출력
for (let i = 0; i < array2.length; i++) {
console.log(array2[i]); // 데이터를 입력한 순서대로 hi, World! 출력
}
// pop을 이용한 데이터 출력
for (let i = 0; i < array2.length; i++) {
console.log(array2.pop()); // 데이터가 마지막에 입력된 순서대로 World!, hi 출력
}위에 설명했다시피 pop 메소드는 스택과 같이 역순으로 출력되고, 데이터가 삭제된다! 데이터 삭제를 원하지 않을 경우 다른 방법을 통해 데이터를 추출해야 한다.
🔚 배열 메소드
자바스크립트에서 기본적으로 제공하는 배열 메소드는 종류가 정말 많다. 원하는 데이터에 따라 골라서 사용하자
대표적으로 사용하는 다른 메소드는 아래와 같다.
| Method | Description | Example |
|---|---|---|
| fill | 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채움 | array.fill(1); -> array : [1, 1, 1, 1] |
| forEach | 주어진 배열 요소 각각에 대해 실행 | array.forEach(element => console.log(element)); -> array 내용 출력 |
| indexOf | 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 존재하지 않으면 -1을 반환 | array.indexOf(1); -> array에 1이 있으면 인덱스 반환, 없으면 -1 반환 |
더 알고 싶으면 MDN의 Array 레퍼런스[1]를 보자!
& 자바스크립트 참고 강의 링크
주석
