자바스크립트 대괄호 표기법

자바스크립트에서 대괄호 표기법(square bracket notation)은 객체의 속성에 접근하거나 배열의 요소에 접근하는 데 사용됩니다. 대괄호 표기법을 통해 속성에 접근하면 그 속성에 할당된 값을 출력하게 됩니다. 속성은 같지만 속성값을 다르게 하여 구분자로 사용하려는 경우 유용하게 사용됩니다. 특히 DOM을 다룰 때 각각의 DOM의 Class나 Id로 따로 구분해서 변수에 할당하는 방법이 아닌 각각의 DOM에 작성된 속성값을 구분자로 사용할때 스크립트의 양을 줄이는데 좋습니다.

 

객체에서 사용

아래의 예처럼 객체의 키 값인 name이나 age에 접근하면 각각의 key 값에 할당되어 있는 값들이 출력됩니다.

객체는 키와 값으로 구분되어 있기 때문에 키를 속성으로 구분해서 생각하면 됩니다. 속성역할을 하는 키를 대괄호 표기법을 사용해 객체에 작성된 값을 가져오는데 사용합니다.

 

var Object = {
    name: '홍길동',
    age: 30
};

console.log(Object['name']); // "홍길동"
console.log(Object['age']); // 30

 

배열에서 사용

배열에서 대괄호 표기법을 통해 배열의 인덱스에 접근하면 관련 인덱스의 '값'을 출력합니다.

배열이 생성되는 순간 배열에는 인덱스가 동시에 생성됩니다. 생성된 인덱스를 구분자로 사용하여 배열의 값들을 출력합니다. 인덱스는 0부터 시작합니다. 따라서 배열의 마지막은 전체 배열의 숫자에서 1을 빼주게 됩니다.

var Array = ['사과', '바나나', '체리'];

console.log(Array[0]); // "사과"
console.log(Array[1]); // "바나나"
console.log(Array[Array.length - 1]) // '체리'

 

동적인 접근

대괄호 표기법은 변수를 사용하여 동적으로 속성 이름이나 배열 인덱스에 접근할 때 유용합니다.

const Object = { name : '홍길동', age : 30 }
const Array = [ '바나나', '사과' ]

const propName = 'name';
console.log(Object[propName]); // '홍길동' 

let index = 1;
console.log(Array[index]); // '바나나'

 

점표기법이 어려울때

객체의 프로퍼티 이름에 공백이 포함되어 있다면, 점 표기법(dot notation)으로는 접근할 수 없고, 대괄호 표기법을 사용해야 합니다.

var Object = {
    name: "홍길동",
    hobby list: ["독서", "음악 감상", "여행"]
};

console.log(Object["hobby list"]); // ["독서", "음악 감상", "여행"]

 

DOM에서 사용

자바스크립트를 사용하여 HTML 문서의 DOM 요소의 속성 값을 가져오는 데에도 대괄호 표기법을 사용할 수 있습니다.

이 방법은 특히 속성 이름이 변수로 주어질 때 유용합니다.

<img id="myImage" src="example.jpg" alt="예제 이미지">

 

자바스크립트를 사용하여 위의 img 태그의 src 속성 값을 가져오려면 다음과 같이 할 수 있습니다.

var image = document.getElementById('myImage');
var src = image['src'];

console.log(src); // "example.jpg"

 

또는 속성 이름을 변수로 사용하여 동적으로 가져올 수도 있습니다.

var srcName = 'alt';
var image = document.getElementById('myImage');
var propValue = image[srcName];

console.log(propValue); // "예제 이미지"

 

대괄호 표기법은 리액트나 뷰처럼 컴포넌트 방식으로 공통으로 사용하는 소스코드가 많은 경우에 특히 유용하게 사용할 수 있습니다. 하나의 소스코드를 스크립트를 통해 컨트롤 할 경우 구분자로 속성에 작성된 속성값으로 구분하여 사용하는 경우를 많이 찾아 볼 수 있습니다.