[JavaScript] 알아두면 쓸모 있는 신비한 배열상식

배열을 사용할 때 알아두면 유용한 배열 상식 8가지를 소개한다.

상식 1

배열의 타입은 object이다.

배열은 기본적으로 object의 특성을 갖지만, 조금 특별한 점은 정렬된 값을 저장하고 배열 관련 메서드를 사용할 수 있는 것이다.

const arr = [1, 2 ,3 ,4 ,5];

console.log(typeof(arr));
console.log(arr.length);

// Expected Output:
// "object"
// 5

상식 2

배열을 선언할 때 보통 const 키워드를 사용한다.

const의 특징을 확인해보자.

이유는 간단하다. 배열 변수의 재정의를 막기 위해서이다.

재정의는 불가능하지만 메서드를 이용해 배열의 요소에 접근 및 수정은 가능하다.

const arr = [1, 2 ,3 ,4 ,5];

// arr = [6, 7, 8, 9, 10]; // "TypeError: Assignment to constant variable.
arr[0] = 0;
arr.push(6);

console.log(arr);

// Expected Output:
// [0, 2, 3, 4, 5, 6]

상식 3

배열을 선언할 때 주로 대괄호[]를 사용한다.

배열을 선언하는 방법은 두 가지가 있다.

• 대괄호[]

  const arr = [1, 2, 3, 4, 5];
  

• new Array()

  const arr = new Array(1, 2, 3, 4, 5);
  

위의 두 코드는 똑같이 동작한다. 하지만 대괄호[] 사용을 추천하는 이유는 new Array()의 특성때문이다.

아래의 코드를 통해 그 특성을 알아보자.

const arr = [1, 2, 3, 4, 5];
const arr2 = new Array(1, 2, 3, 4, 5);
const arr3 = [3];
const arr4 = new Array(3);

console.log(arr);
console.log(arr2);
console.log(arr3);
console.log(arr4);

// Expected Output:
// [1, 2, 3, 4, 5]
// [1, 2, 3, 4, 5]
// [3]
// [undefined, undefined, undefined]

배열 arr3, arr4를 주목해보자.

대괄호[]안에 숫자 하나를 입력하면 해당 숫자가 저장된 길이 1의 배열이 생성된다.

반면 new Array()를 사용하여 괄호안에 숫자 하나를 입력하면 undefined값으로 채워진 길이 3의 배열이 생성된다.

배열을 선언할 떄 이러한 new Array()의 특성을 간과하는 일이 발생할 수 있으므로 대괄호[] 사용을 추천한다.

상식 4

하나의 배열에 여러가지 데이터 타입의 값들을 저장할 수 있다.

하나의 배열에는 원시 타입(Primitive Type), 객체 타입(Object/Reference Type)의 데이터들을 한꺼번에 저장할 수 있다.

이 또한 object의 특성 덕분에 가능한 일이다.

const arr = [100, 'Jihyun', {lastName: 'Gong'}, true, function() { return 10;}];

console.log(arr);

// Expected Output:
// [100, "Jihyun", [object Object] {
//   lastName: "Gong"
// }, true, function() { return 10;}]

상식 5

배열은 numbered index만 지원한다.

만약 배열에 named index를 사용할 경우 Array는 Object가 되어버린다.

이렇게 되면 기존 배열에 메서드나 속성을 통해 접근할 때 부정확한 값을 불러온다.

const arr = [];

arr["prodName"] = "Apple";
arr["price"] = 1000;
arr["grade"] = "A";

console.log(arr.length);
console.log(arr[1]);

// Expected Output:
// 0
// undefined

상식 6

배열(Array)과 객체(Object)의 큰 차이는 numbered index를 사용하느냐, named index를 사용하느냐에 달렸다.

// Array
const fruits = ["apple", "banana", "watermelon"];
// Object
const car = {
  name: "Audi",
  model: "A3",
  price: 1000
};

console.log(fruits[0]);
console.log(car.name);

// Expected Output:
// "apple"
// "Audi"

상식 7

임의의 변수(속성X)가 배열인지 객체인지 판별할 때 사용하는 메서드: Array.isArray(), instanceof Array

// Array
const fruits = ["apple", "banana", "watermelon"];
// Object
const car = {
  name: "Audi",
  model: "A3",
  price: 1000
};

console.log(Array.isArray(fruits));
console.log(car instanceof Array);

// Expected Output:
// true
// false

상식 8

배열을 비교할 때 == 혹은 === 연산자를 사용하면 안된다.

배열은 object의 특성을 가지고 있기 때문에 객체 타입(Object/Reference type)이다. 객체 타입의 데이터는 참조값(메모리상의 주소값)을 가진다.

따라서 동일한 내용의 값을 가지고 있는 두 배열이라도 참조값(메모리상의 주소값)은 다르다.

const fruits = ["apple", "banana", "watermelon"];
const fruits2 = ["apple", "banana", "watermelon"];

console.log(fruits == fruits2); // This is wrong
console.log(fruits === fruits2); // This is wrong

for(let i = 0; i < fruits.length; i++){ // This is the right way to compare arrays
  if(fruits[i] !== fruits2[i]){
    console.log(false);
    break;
  } else if(i === fruits.length - 1){
      console.log(true);
  }
}

// Expected Output:
// false
// false
// true