JavaScript 배열

왜 배열을 사용하는가?

항목 목록(예: 차량 이름 목록)이 있는 경우 차량을 단일 변수에 저장하면 다음과 같을 수 있습니다.

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";

하지만, 만약 여러분이 그 차들을 순환하고 특정한 것을 찾고 싶다면 어떨까요? 차가 3대가 아니라 300대가 있다면 어떨까요?

해결책은 배열입니다.

배열은 단일 이름으로 많은 값을 가질 수 있으며 인덱스 번호를 참조하여 값에 액세스할 수 있습니다.

배열 생성

배열 리터럴을 사용하는 것이 JavaScript 배열을 만드는 가장 쉬운 방법입니다.

구문:

const array_name = [item1, item2, ...];  

const 키워드를 사용하여 배열을 선언하는 것이 일반적입니다.

예제 1

const cars = ["Saab", "Volvo", "BMW"];

공백과 줄 바꿈은 중요하지 않습니다. 선언은 여러 줄에 걸쳐 있을 수 있습니다.

예제 2

const cars = [
  "Saab",
  "Volvo",
  "BMW"
];

배열을 생성한 다음 요소를 제공할 수도 있습니다.

예제 3

const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";

new 키워드 사용

다음 예에서는 배열을 생성하고 배열에 값을 할당합니다.

예제 4

const cars = new Array("Saab", "Volvo", "BMW");

위의 두 예는 정확히 같은 일을 합니다.
new Array()를 사용할 필요가 없습니다.
단순성, 가독성 및 실행 속도를 위해 배열 리터럴 메서드를 사용합니다.

배열 요소 접근

인덱스 번호를 참조하여 배열 요소에 액세스합니다.

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];

Note: 배열 인덱스는 0으로 시작합니다.
[0] 첫 번째 요소입니다. [1] 두 번째 요소입니다.

배열 요소 변경

이 문장은 car의 첫 번째 요소 값을 변경합니다.

cars[0] = "Opel";

예제 5

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";

전체 배열 접근

자바스크립트를 사용하면 배열 이름을 참조하여 전체 배열에 액세스할 수 있습니다.

예제 6

const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

배열은 객체

배열은 특수한 유형의 객체입니다. JavaScript의 연산자 typeof은 배열에 대해 “object”를 반환합니다.

그러나 JavaScript 배열은 배열로 가장 잘 설명됩니다.

배열은 숫자를 사용하여 “요소”에 액세스합니다. 이 예에서 person[0]은 John을 반환합니다.

배열

const person = ["John", "Doe", 46];

객체는 이름을 사용하여 “구성원”에 액세스합니다. 이 예에서 person.firstName는 John을 반환합니다.

객체

const person = {firstName:"John", lastName:"Doe", age:46};

배열 요소가 객체일 수 있음

JavaScript 변수는 객체일 수 있습니다. 배열은 특별한 종류의 객체입니다.

이 때문에 동일한 배열에 여러 유형의 변수가 있을 수 있습니다.

배열에 객체를 포함할 수 있습니다. 배열에 함수를 사용할 수 있습니다. 배열에 배열을 포함할 수 있습니다.

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

배열 속성 및 메서드

자바스크립트 배열의 진정한 강점은 내장된 배열 속성과 메서드이다.

cars.length   // 요소의 갯수를 반환합니다.
cars.sort()   // 배열을 정렬합니다.

length 속성

배열의 length 속성은 배열의 길이(배열 요소 수)를 반환합니다.

예제 7

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;

length 속성은 항상 가장 높은 배열 인덱스보다 하나 더 많습니다.

첫번째 배열 요소에 접근

예제 8

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];

마지막 배열 요소에 접근

예제 9

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];

배열 요소 반복

배열을 반복하는 한 가지 방법은 for 루프를 사용하는 것입니다.

예제 10

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

Array.forEach() 함수를 사용할 수도 있습니다.

예제 11

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

배열 요소 추가

배열에 새 요소를 추가하는 가장 쉬운 방법은 push() 메서드를 사용하는 것입니다.

예제 12

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");  // fruits에 새 요소(Lemon) 추가

length 속성을 사용하여 배열에 새 요소를 추가할 수도 있습니다.

예제 13

const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon";  // fruits에 새 요소(Lemon) 추가

인덱스가 높은 요소를 추가하면 배열에 정의되지 않은 “구멍”이 생성될 수 있습니다.

예제 14

const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";  // fruits에 정의되지 않은 "구멍"을 만듭니다.

배열 연결

많은 프로그래밍 언어는 명명된 인덱스가 있는 배열을 지원합니다.

명명된 인덱스가 있는 배열을 연관 배열(또는 해시)이라고 합니다.

JavaScript는 명명된 인덱스가 있는 배열을 지원하지 않습니다.

JavaScript에서 배열은 항상 번호가 매겨진 인덱스를 사용합니다.

예제 15

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;    // 3
person[0];        // "John"

명명된 인덱스를 사용하는 경우 JavaScript는 배열을 객체로 재정의합니다.
그런 다음 일부 배열 메서드 및 속성에서 잘못된 결과를 생성합니다.

예제 16

const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length;     // 0
person[0];         // undefined

배열과 객체의 차이

JavaScript에서 배열은 번호가 매겨진 인덱스를 사용합니다.

JavaScript에서 객체는 명명된 인덱스를 사용합니다.

배열은 번호가 매겨진 인덱스가 있는 특별한 종류의 객체입니다.

배열을 사용할 시기. 객체를 사용할 때.

JavaScript는 연관 배열을 지원하지 않습니다.
요소 이름을 문자열(텍스트)로 지정하려면 객체를 사용해야 합니다.
요소 이름을 숫자로 지정하려면 배열을 사용해야 합니다.

new Array()

JavaScript에는 내장 배열 생성자 new Array()가 있습니다.

또는 안전하게 []를 사용할 수 있습니다.

아래 두 개의 서로 다른 구문은 모두 points라는 새로운 빈 배열을 만듭니다.

const points = new Array();
const points = [];

이 두 문장은 모두 6개의 숫자를 포함하는 새 배열을 만듭니다.

const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];

new 키워드를 사용하면 예기치 않은 결과가 발생할 수 있습니다.

// 세 가지 요소로 배열을 만듭니다.
const points = new Array(40, 100, 1);

// 두 개의 요소로 배열을 만듭니다.
const points = new Array(40, 100);

// 하나의 요소로 배열을 만드나요?
const points = new Array(40); 

흔한 에러

const points = [40];

이 두개는 같지 않습니다.

const points = new Array(40);

// 하나의 요소로 배열 생성:
const points = [40];

// undefined 요소 40개로 배열 생성:
const points = new Array(40); 

배열을 인식하는 방법

일반적인 질문은 다음과 같습니다. 변수가 배열인지 어떻게 알 수 있을까요?

문제는 자바스크립트 연산자 typeof가 “object”를 반환한다는 것입니다.

const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;

JavaScript 배열이 개체이므로 typeof 연산자가 객체를 반환합니다.

해결책 1

이 문제를 해결하기 위해 ECMAScript 5(JavaScript 2009)는 새로운 메서드 Array.isArray()를 정의했습니다.

Array.isArray(fruits);

해결책 2

지정된 생성자에 의해 객체가 생성된 경우 instanceof 연산자는 true를 반환합니다.

const fruits = ["Banana", "Orange", "Apple"];

fruits instanceof Array;