JavaScript 배열

자바스크립트는 다른 언어와 마찬가지로 배열을 사용할 수 있다.

하지만 약간의 다른 점도 존재한다.

자바스크립트의 배열에선 각 요소가 어떤 자료형이든 상관이 없다.

즉, 숫자, 문자, 불리안 등등 혼합 자료형을 가질 수 있다.

 

 

 

배열이란?

배열(array)이란, 이름과 인덱스로 참조되는 정렬된 값의 집합이다.

쉽게 말하면, 여러 값을 저장할 수 있는 자료형 중의 하나이다.

 

배열은 인덱스와 요소로 이루어져 있는데,

요소란, 배열을 구성하는 각각의 값이며,

인덱스란, 해당 요소를 가리키는 위치를 나타내는 값이다.

 

배열의 생성

배열을 생성하는 방법은 여러 가지가 있다.

우선 대괄호( [] )를 이용해서 생성하는 방법이다.

let arr = [1, 2, 3];
let arr2 = ['a', 'b', 'c'];
let arr3 = [true, false];
let arr4 = [1, 'a', true];
console.log(arr); // [1, 2, 3]
console.log(arr2); // ['a', 'b', 'c']
console.log(arr3); // [true, false]
console.log(arr4); // [1, 'a', true]

대괄호( [] ) 내에 원하는 요소를 넣어서 생성하는 것이다.

 

다음은 new Array()를 이용해서 생성하는 방법이다.

let arr = new Array(1, 2, 3);
let arr2 = new Array('a', 'b', 'c');
let arr3 = new Array(true, false);
let arr4 = new Array(1, 'a', true);
console.log(arr); // [1, 2, 3]
console.log(arr2); // ['a', 'b', 'c']
console.log(arr3); // [true, false]
console.log(arr4); // [1, 'a', true]

new라는 연산자를 통해 Array객체를 생성해 준 것이다.

 

이 외에도 생성할 수 있는 방법은 많다.

 

배열의 요소 접근

인덱스를 이용하여 배열의 각 요소에 접근할 수 있다.

let arr = [1, 2, 3];
console.log(arr[1]); // 2

arr[인덱스]를 통해 해당 인덱스의 요소를 가리킨 것이다.

 

배열의 요소 수정

특정 요소를 수정하고 싶으면 해당 요소에 접근한 후, 새 값을 넣으면 된다.

let arr = [1, 2, 3];
arr[1] = 4;
console.log(arr); // [1, 4, 3]

 

배열의 길이

배열의 길이는 length를 이용해서 찾을 수 있다.

let arr = [1, 2, 3];
console.log(arr.length); // 3

arr.length를 통해 arr 배열의 길이를 구한 것이다.

 

 

배열의 요소 추가

배열에 새로운 요소를 추가하려면 push()를 이용할 수 있다.

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

arr.push(추가할 요소)를 실행하면 arr 배열의 맨 마지막에 새로운 요소가 추가된다.

 

배열의 (마지막) 요소 제거

배열의 마지막 요소를 제거하려면 push()와 반대로 pop()을 이용할 수 있다.

let arr = [1, 2, 3];
arr.pop(3);
console.log(arr); // [1, 2]

arr.pop()을 실행하면 arr 배열의 맨 마지막 요소를 삭제한다.

 

배열의 반복

배열의 요소를 반복 수행해야 하는 경우가 존재한다.

다음과 같이 for을 이용하여 쉽게 반복할 수 있다.

let arr = [1, 2, 3, 4, 5, 6];
for(let i = 0; i < arr.length; i++){
    console.log(arr[i]);
}

인덱스가 0인 요소부터 시작해서 마지막 인덱스의 요소까지 콘솔창에 띄어준다.

 

for뿐만 아니라

forEach() 역시 가능하다.

let arr = [1, 2, 3, 4, 5, 6];
arr.forEach(element => {
    console.log(element);
});

forEach를 통해 각각의 요소에 접근하여 콘솔창에 띄어준다.

 

이번에는 배열의 기본적인 개념에 대해 알아봤다.

다음에는 배열을 이용할 때 많이 쓰는 메서드를 알아볼 예정이다.

 

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)