JavaScript 배열은 객체이다.

• JavaScript 의 배열은 객체처럼 취급될 수 있다.
• 배열 확인 방법 : Array.isArray() 사용

  • typeof 연산자나, length 속성으로 배열을 판별할 경우 오류가 발생 할 수 있음

    (객체처럼 취급 되거나 string 또한 length가 존재하기 때문)
    

const arr = [1, 2, 3]
arr[3] = "string";
arr["property"] = "property";
arr[{}] = [1, 2, 3];
arr["func"] = function() {console.log("hello world")};

// 1, 2, 3의 값만 출력
for(let i = 0; i < arr.length; i++) {
	console.log(arr[i])
}

// 배열은 객체와 유사한 형태
const obj = {
  0: 1,
  1: 2,
  2: 3,
  3 : "string",
  property : "property",
  "{}" : [1, 2, 3];
	func : function () {console.log("hello world")}
}

// 오류가 발생할 수 있음
if(arr.length) {
 console.log("배열");
}
if(typeof arr === "obeject") {
	console.log("배열");
}
// 배열 확인 시 Array.isArray 사용
if(Array.isArray(arr)) {
	console.log("배열");
}

Array.length

• 배열의 length 수정 시 그 만큼 배열에 빈 공간이 생긴다.

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

• 배열의 length는 배열의 길이 보다는 마지막 index에 가깝다.

const arr = [1, 2, 3];

arr[3] = 4;
console.log(arr.length);

arr[9] = 10;
console.log(arr.length);

• 배열의 length를 이용하여 배열을 초기화 가능

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

배열 요소에 접근하기

• 배열에서 인덱스로 접근하는 방식을 지양하자
  • 배열은 객체처럼 사용될 수 있기 때문
  • 가독성이 떨어짐
• 구조 분해 할당을 통해 배열을 분해하기
  • 코드의 가독성 증가

// 기존 코드
function clickGroupButton(){
const confirmButton = document.getElementByTagName('button')[0];
const cancelButton = document.getElementByTagName('button')[1];
const resetButton = document.getElementByTagName('button')[2];
}

// 구조 분해 할당 처리
const [confirmButton,cancelButton, resetButton] = document.getElementByTagName('button')

유사 배열 객체