Frontend/JavaScript

[JavaScript] 배열 Array

Rayched 2023. 10. 29. 23:01
목차
0. 개요
1. 배열 Array
 ① 배열의 정의
 ② 배열 요소 접근
2. 배열 요소 추가 및 삭제
 ① 배열 요소 추가
 ② 배열 요소 삭제
3. Reference

0. 개요

빨간색, 파란색, 초록색

위의 세 가지 색상을 'Color'라는 변수에 저장하려고 한다.

기본적으로 변수에는 한 개의 값만 저장할 수 있기 때문에, 객체를 활용해서 세 가지 색상 요소를 'Color' 변수에 저장해야한다.

let Color = {
    "Color1": "Red",
    "Color2": "Blue",
    "Color3": "Green"
};

Color 객체 Diagram

변수 'Color'에 "빨간색", "파란색", "초록색" 세 가지 색상이 객체의 형태로 할당된 것을 확인했으니

이제 다른 색상을 하나 더 추가해 보자.

let Color = {
    "Color1": "Red",
    "Color2": "Blue",
    "Color3": "Green"
};

//Color 객체에 "노란색"을 추가
Color["Color4"] = "Yellow";
console.log(Color);

이번에는 "보라색"을 추가해 보자.단, 이번에 추가하는 색은 제일 앞으로 와야 한다.

당장 떠오르는 방법은 없으니 "보라색" 요소의 'Key' 값을 "Color0"으로 설정해 보자.

Color["Color0"] = "Violet";
console.log(Color);

 

"보라색" 요소를 객체 요소 맨 앞 줄에 추가하고 싶었지만, 결과를 확인해 보면맨 마지막 줄로 추가됐다.

이는 객체의 요소가 일정한 순서를 가지고 있지 않기 때문이다.

 

그리고 객체 요소, Property의 순서가 따로 없으니 순서와 관련된 메서드 또한 존재하지 않는다.

(객체 Property의 Key가 문자열이면, 생성한 순서대로 정렬되기 때문에

 맨 마지막에 추가한 요소인 "Violet"의 Key도 문자열이므로 맨 마지막 줄로 정렬되는 것이다.)

 

즉, 요소를 순서대로 저장하려고 할 때 객체는 활용하기 애매하다는 것이다.

 

하지만 우리가 개발을 하다 보면 요소를 순서대로 저장해야 하는 경우도 있다.

이런 경우, 요소를 순서대로 저장해야 할 때 활용할 수 있는 자료형으로 '배열 Array'이 존재한다.

 

배열을 활용하면 요소를 순서대로 저장할 수 있으며

나중에 요소를 추가할 때 배열 내장 함수를 통해서 배열의 맨 앞이나 맨 뒤에 추가하는 것이 가능하다.

let Color = ["Red", "Blue", "Green"];

//노란색 추가
Color.push("Yellow");

//보라색 추가 (첫번째 칸으로 와야한다.)
Color.unshift("Violet");

console.log(Color);

console 출력 / Color 배열 Diagram

제일 마지막에 추가한 "보라색"이 첫 번째로 배치되고, "빨간색", "파란색", "초록색", "노란색"이 순서대로 정렬된 것을

위의 console 출력 결과와 Color 배열의 다이어그램을 통해서 확인할 수 있다.

이제 배열이 정확히 무엇인지 알아보도록 하자.

1. 배열 Array

① 배열의 정의

배열 (Array)은 순서가 있는 요소들의 집합으로 요소를 순서대로 저장해야 할 때 사용하는 자료 구조이다.

JavaScript에서 배열을 생성하는 방법으로는 '배열 생성자'를 통한 방식과 '배열 리터럴' 방식이 있다.

//배열 생성자
let arr = new Array();

//배열 리터럴
let arr2 = [];

빈 배열이 생성된 것을 console 창에서 확인

 

물론 배열 생성자, 배열 리터럴 두 방식 모두 초기에 배열을 생성할 때

요소를 할당한 상태로 배열을 생성할 수도 있다.

//배열 생성자
let arr1 = new Array(1, 2, 3);

//배열 리터럴
let arr2 = ["A", "B", "C"];

arr1, arr2 배열 console 출력 / arr1, arr2 배열 Diagram

 

더보기

배열 생성자 방식으로 배열을 생성할 때, '( )'(소괄호) 안에 임의의 숫자를 입력하면

해당 숫자만큼의 공간을 가진 배열을 생성할 수 있다.

//배열 생성자

let arr = new Array(3);
console.log(arr);
빈 공간이 3개가 있는 배열이 생성됐다.

② 배열 요소 접근법

각 배열 요소에 숫자가 0부터 2까지 매겨져 있다.

각 배열 요소에는 0부터 시작하는 숫자가 매겨지는 것을

지금까지 보여줬던 배열 예제의 Diagram을 통해서 확인할 수 있다.

 

이때 이 숫자를 index라고 하며, 해당 숫자들은 배열 요소의 순서를 의미하고

각 배열 요소에 새겨진 번호, index를 통해서 각각의 배열 요소로 접근하는 것이 가능하다.

 

이때 배열 요소에 접근하려면 먼저 배열 변수를 입력하고

'[ ]' (대괄호) 안에 접근하려는 배열 요소의 index를 입력하면

해당 index를 가진 배열 요소로 접근할 수 있게된다.

'배열 변수'[index]
//배열 index 예제

let arr = ["A", "B", "D", "D"];

//arr 배열의 첫번째 요소 출력하기
//arr 배열의 첫번째 요소는 "A"로
//해당 요소의 index는 0번이다.
console.log(`arr[0] = ${arr[0]}`); //"A"

//arr 배열 요소 수정하기
//위와 같은 방식을 통해 특정 배열 요소의 값을 수정할 수도 있다.

//"D"가 중복되기 때문에, 둘 중 하나를 "C"로 수정하기
//arr 배열의 2번 index의 값을 "c"로 수정

console.log(arr); //수정 전

arr[2] = "C"
console.log(arr); //수정 후

'배열 변수'.length
//배열 요소 개수 확인

let arr = ["A", "B", "C", "D", "E"];

console.log(arr.length);

배열 arr에 저장된 요소가 총 5개이므로 'arr.length'의 결과도 5가 된다.

2. 배열 요소 추가 및 삭제

앞에서 배열 요소에 접근하는 방법에 대해 다뤄봤으니

이제 배열에 요소를 추가하거나, 삭제하는 법에 대해 알아보도록 하자.

 

배열은 객체형에 속하는 자료형으로, 앞에서 다룬 'length' Property를 통해

배열 요소의 개수를 확인할 수도 있고, 배열 내장 메서드 (배열 내장 함수)를 통해서

배열에 요소를 추가하거나 삭제할 수도 있다.

 

이번 게시글에서 배열 내장 메서드를 전부 다루지는 않고

배열 요소를 추가하는 'push()', 'unshift()' 메서드

배열 요소를 삭제하는 'pop()', 'shift()' 메서드로 총 4개의 메서드만 다룰 것이다.

각 메서드에 대해서 하나씩 순서대로 알아보도록 하자.

① 배열 요소 추가 메서드 'push()' / 'unshift()'

'push()' 메서드는 인자로 전달된 값을 배열 요소 맨 뒤로 추가하는 메서드이고

'unshift()' 메서드는 인자로 전달된 값을 배열 요소 맨 앞으로 추가하는 메서드이다.

Array.push('Value');
//배열 요소 맨 뒤에 인자로 전달한 값인 'Value'를 추가한다.

Array.unshift('Value');
//배열 요소 맨 앞에 인자로 전달한 값인 'Value'를 추가한다.
//배열 요소 추가하기 예제

let arr1 = ["A", "B", "C", "D"];
let arr2 = [2, 3, 4, 5, 6, 7];

//비교용 (추가 전)
console.log(arr1);
console.log(arr2);

//arr1 => "E"를 배열 요소 끝에 추가하기
//arr2 => 숫자 1을 배열 요소 제일 앞에 추가하기
arr1.push("E");
arr2.unshift(1);

//비교용 (추가 후)
console.log(arr1);
console.log(arr2);

Before / After

배열에 요소를 추가하는 내장 메서드인 'push()'와 'unshift()' 메서드는

인자로 한 개의 값만 전달해야한다는 제약이 있지는 않으므로

여러 개의 값을 배열 요소의 맨 앞이나 맨 뒤에 추가할 수도 있다.

//여러 개의 값을 배열 요소로 추가하기

let Color = ["Yellow", "Green"];
console.log(Color);

//Color 배열 맨 앞 줄에 "Red", "Orange" 추가하기
Color.unshift("Red", "Orange");

//Color 배열 맨 뒷 줄에 "Blue", "Indigo", "Violet" 추가하기
Color.push("Blue", "Indigo", "Violet");

console.log(Color); //추가됐는지 확인

② 배열 요소 삭제 메서드'pop()' / 'shift()'

'pop()' 메서드는 배열의 마지막 index를 가진 요소를 삭제하는 메서드이고

'shift()' 메서드는 배열의 첫번째 index를 가진 요소를 삭제하는 메서드이다.

Array.pop();
//배열의 마지막 index 요소를 삭제한다.

Array.shift();
//배열의 첫번째 index, 0번 index 요소를 삭제한다.

 

//배열 요소 삭제 예제

let arr = ["A", 2, 3, 4, "B"];
console.log(arr);

//arr 배열의 0번 index 요소와 마지막 index 요소를 삭제하기
arr.pop();
arr.shift();

console.log(arr);

pop() 메서드로 arr 배열의 마지막 index 요소, 4번 index 요소인 문자열 "B"가 삭제되고

shift() 메서드로 arr 배열의 첫번째 index 요소, 0번 index 요소인 문자열 "A"가 삭제된 것을

위의 예제 실행 결과를 통해서 확인할 수 있다.

3. Reference

참고한 문서

[인프런] 웹 프론트엔드를 위한 자바스크립트 첫 걸음
모던 JavaScript - 배열
저작자표시 동일조건