자바스크립트 배열 JavaScript Arrays

자바스크립트에서 단일 변수에 여러 값을 저장하는 데 '배열'이 사용됩니다. 이전에 설명했다시피, 배열을 선언할 때는 const 키워드를 사용합니다.

 

1. 배열 생성 방법

 

대괄호 사이에 데이터를 넣은 뒤, 변수에 바로 할당하거나, new 키워드를 사용해 배열을 생성한 뒤, 변수에 할당하는 방법은 다음과 같습니다. 첫 번째 방법이 속도 면에 더 빠르다고 하니, new 키워드 사용보다는 첫 째 방법처럼 배열 생성을 추천합니다.

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

 

2. 배열에 접근하기

 

인덱스를 이용해서 배열에 접근할 수 있습니다.

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

반응형

3. 배열과 관련된 메소드 및 프로퍼티

 

배열에서 자주 사용되는 프로퍼티는 length입니다. sort() 메소드는 배열을 정렬해주는 역할을 합니다.

//배열에서 첫번째 및 마지막 요소에 접근하는 방법.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0];  //바나나 반환  
fruits[fruits.length - 1];  //망고 반환
fruits.sort() //['Apple', 'Banana', 'Mango', 'Orange']

배열을 추가할 때는 push() 메소드를 사용합니다. 인덱스를 사용해서 배열 추가 시, 빈 값이 생기지 않도록 주의해야 합니다.

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Strawberry");
fruits[fruits.length] = "Lemon"; 
// ['Banana', 'Orange', 'Apple', 'Strawberry', 'Lemon'] 결과값

fruits[7] = "Mango";
//  ['Banana', 'Orange', 'Apple', 'Strawberry', 'Lemon', empty × 2, 'Mango']

 

4. 배열 반복시키기

 

배열을 반복하는 가장 안전한 방법은 for 루프를 사용하는 것입니다. forEach() 함수를 사용해도 무방합니다.

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

for (let i = 0; i < fruits_length; i++) {
  console.log(fruits[i]);
}

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

fruits.forEach(myFunction);

function myFunction(value) {
   console.log(value);
}

5. 배열과 객체의 차이

 

자바스크립트에서 배열은 번호가 매겨진 인덱스를 사용하지만, 객체는 이름이 있는 인덱스를 사용합니다. 따라서, 요소 이름을 문자열(텍스트)로 지정하려면 객체를 사용하고, 요소 이름을 인덱스 숫자로 지정하려면 배열을 사용해야 합니다.

1. 배열
const person = ["John", "Doe", 46];
person[0];

2. 객체
const person = {firstName:"John", lastName:"Doe", age:46};
person.firstName;

 

6. 배열 확인법

 

배열 타입인지 확인하는 방법은 다음과 같습니다. isArray 또는 instanceof를 사용합니다.

const fruits = ['바나나','오렌지','딸기']
Array.isArray(fruits);   // returns true
fruits instanceof Array;   // returns true

 

이전에 설명한 바와 같이 생성자 프로퍼티를 통해서도 배열인지 배열 함수인지 확인이 가능합니다.

1. 생성자 프로퍼티 리턴 값
[1,2,3,4].constructor             // Returns function Array() {...}

2. 생성자 프로퍼티로 배열인지 확인
function isArray(myArray) {
  return myArray.constructor.toString().indexOf("Array") > -1;
}

3. 생성자 프로퍼티로 배열 함수인지 확인
function isArray(myArray) {
  return myArray.constructor === Array;
}