[Javascript] 객체 접근법 파헤쳐보기, 점 표기법 vs 대괄호 표기법

객체 접근법 파헤쳐보기, 점 표기법 vs 대괄호 표기법

자바스크립트에서 객체에 접근하는 방법은 크게 두 가지로 나뉩니다.

각각 어떤 차이와 장단점이 있는지, 또 실전에서의 활용법은 어떻게 나뉘는지 정리해 보겠습니다.

객체

혹시 객체를 잘 모르는 분이 계실까 봐 간단히 짚고 넘어가고자 합니다.

 

자바스크립트에서 객체란 여러 개의 키(key)와 값(value) 쌍으로 이루어진 데이터 집합체를 의미합니다.

객체는 보통 아래와 같은 구조로 이루어집니다.

const obj = {
    no   : 1
    key1 : 'value1',
    key2 : 'value2',
}

각각의 키-값 쌍은 속성(property)라고도 하며 값에는 문자열, 숫자뿐 아니라 배열과 다른 객체도 할당될 수 있습니다.

심지어는 이모지도 키와 값에 포함될 수 있습니다. 진짜로요.

const mickeyMouse = {
    name : 'mickey', //name property
    age  : 25,       //age property ... 
    character : ['funny', 'energetic'],
    partner : {
        name : 'mini',
        age  : 23,
        character : ['kind', 'thoughtful']
    },
    '🙂' : '🐭'
}

객체 접근 방법

객체 접근 방법은 점 표기법과 대괄호 표기법으로 나뉘는데, 기본적인 형식은 아래와 같습니다.

 

점 표기법 = 객체이름.키 이름

대괄호 표기법 = 객체이름['키 이름']

const notations = {
    dot : '.',
    bracket : '[]'
}

const dot     = notations.dot        // ✅ .
const bracket = notations['bracket'] // ✅ []

점 표기법(Dot notation)

점을 통한 객체 접근은 가장 기본적이고 보편적으로 사용할 수 있습니다.

 

아래와 같이 과일바구니 객체를 만들어서 예를 들어보겠습니다.

과일바구니 안에 사과 객체와 바나나 객체가 속성으로서 존재하고 각각의 과일 객체는 색상과 맛을 속성으로 가지고 있습니다.

const fruits = {
    apple : {
        color : 'red',
        taste : ['sweet', 'crunchy']
    },
    banana : {
        color : 'yellow',
        taste : ['sweet', 'squishy']
    }
}

점표기법을 이용해 사과 객체를 꺼내보겠습니다.

첫 줄에서 사과를 꺼냈고 두, 세 번째 줄에서는 사과의 색상과 맛에 접근했습니다.

const apple = fruits.apple;
const colorOfApple = apple.color; // ✅ red
const tasteOfApple = apple.taste; // ✅ ['sweet', 'crunchy']

 

객체에 새 프로퍼티를 추가하는 것도 점 표기법을 통해 매우 쉽게 할 수 있습니다.

 

사과🍎와 바나나🍌만 있으면 허전하니 오렌지🍊를 추가해 보겠습니다.

오렌지🍊객체를 생성하고 아래와 같이 과일바구니에 접근해서 오렌지🍊객체를 할당하기만 하면 됩니다.

const orange = {
    color : 'scarlet',
    taste : ['acidulous', 'moist']
}

fruits.orange = orange;

/**
fruits = {
    apple : {
        color : 'red',
        taste : ['sweet', 'crunchy']
    },
    banana : {
        color : 'yellow',
        taste : ['sweet', 'squishy']
    },
    orange : {
        color : 'scarlet',
        taste : ['acidulous', 'moist']
    }
}
**/

대괄호 표기법(Bracket notation)

대괄호 표기법으로 객체에 접근할 때에는 점 대신 괄호를 붙인 뒤 괄호 안에 키로 사용할 문자열을 입력하면 됩니다.
다시 과일바구니 객체를 만들고 이번엔 바나나🍌를 꺼내보겠습니다.

const fruits = {
    apple : {
        color : 'red',
        taste : ['sweet', 'crunchy']
    },
    banana : {
        color : 'yellow',
        taste : ['sweet', 'squishy']
    }
}

const banana = fruits['banana'];
const colorOfBanana = banana['color'];  // ✅ yellow
const tasteOfBanana = banana['taste'];  // ✅ ['sweet', 'squishy']

이번에도 똑같이 오렌지🍊를 추가해 보겠습니다. 마찬가지로 대괄호를 이용해 추가해 주면 됩니다.

const orange = {
    color : 'scarlet',
    taste : ['acidulous', 'moist']
}

fruits['orange'] = orange;

/**
fruits = {
    apple : {
        color : 'red',
        taste : ['sweet', 'crunchy']
    },
    banana : {
        color : 'yellow',
        taste : ['sweet', 'squishy']
    },
    orange : {
        color : 'scarlet',
        taste : ['acidulous', 'moist']
    }
}
**/

여기까지는 점 표기법과 대괄호 표기법의 기본적인 사용 방법이었습니다.

차이가... 있나요?

혹시 내부적으로 조금 다르게 동작할까요?🤔

내부적으로는 거의 동일하게 동작합니다. 두 방식 모두 결국 프로퍼티 키를 문자열로 변환하여 접근합니다.

• obj.key → "key"라는 문자열 키
• obj[key] → key의 값을 문자열로 변환한 키

다시 말하면 obj.key는 코드는 내부적으로 obj['key']와 동일하게 평가되어 실행되는 것입니다.

 

그럼 그냥 표기법만 좀 다르고 똑같은 것 아닌가요?🤔

비록 내부적으로는 동일하게 동작하지만 두 표기법 사이에는 실제 사용 방식에 있어서 여러 가지 차이점이 있습니다.

• 어떤 키는 점 표기법으로 접근이 불가능함
• 키 이름이 동적으로 결정되거나 표시되는 경우 대괄호 표기법을 사용해야 함

실제 사용 예제와 디테일한 차이점을 아래에서 정리하겠습니다.

점 표기법

먼저 점 표기법은 유효한 변수명에 의해서만 접근이 가능합니다.

예를 들면 아래와 같이 변수 선언 규칙에 부합하는 키에만 접근이 가능합니다.

• 알파벳, 숫자, 언더스코어(_), 달러($)로 구성
• 숫자로 시작할 수 없음
• 띄어쓰기나 특수문자 불가
• 객체 내의 유효한 식별자 형태로 직접 작성해야 함

또한 코드가 직관적이지만 변수나 표현식을 통해 키에 접근할 수 없기 때문에 사용에 유연하지 못하다는 특징이 있습니다.

아래와 같이 키가 문자열로 이루어져 있다면 점 표기법으로는 프로퍼티에 접근할 수가 없게 됩니다.

문자열을 변수에 할당하더라도 객체 바깥의 변수를 이용한 객체 내부 접근은 불가능합니다.

const obj = { 
    'first-name': 'Bob',
    lastName    : 'Se-gonggi'
};

const firstName = 'first-name';

console.log(obj.'first-name'); // ❌ SyntaxError 
console.log(obj.firstName);    // ❌ undefined
console.log(obj.lastName);     // ✅ 'Se-gonggi'

때문에 점 표기법은 기본적이지만 정적이고 제한적인 객체 접근 방법입니다.

대괄호 표기법

대괄호 표기법은 점 표기법에 비해 상당히 유연하고 동적입니다.

 

점 표기법에서는 불가능했던, 키에 특수문자나 공백이 포함되어 있는 경우라도 문제없이 접근이 가능합니다.

객체 외부에서 변수를 선언하고 값을 할당하여 객체 내부에 접근하는 것도 이 방법으로는 가능합니다.

const obj = { 
    'first-name': 'Bob',
    'last name' : 'Se-gonggi'
};

const lastName = 'last name';

console.log(obj['first-name']);     // ✅ Bob
console.log(obj[lastName]);         // ✅ Se-gonggi

 

대괄호 안에는 문자열만 들어가면 되는거니까, 연산결과가 문자열이기만 하면 어떤 형식으로 집어넣어도 괜찮지 않을까요?

백틱과 결합해 표현식이나 수식을 이용해 키에 접근할 수도 있습니다.

const first = 'first';
const name  = 'name';

obj[`${first}-${name}`] // ✅ Bob

문자열을 반환하는 함수를 대괄호 안에 넣는 방식도 물론 가능합니다.  (ㄹㅇ 됨.)

obj[returnBob()]       // ✅ Bob

function returnBob() {
    return 'first-name';
}

그런데 가독성이 그리 좋지 않아서 가능하긴 해도 권하지는 않고 싶습니다.

변수에 문자열을 할당한 후 객체에 접근하는 것이 더 깔끔하고 코드 안정성 면에서 우수합니다.

obj['first-name'];       // Not bad but,
obj[returnBob()];        // Nurdy.
obj[`${first}-${name}`]; // God...

let key = 'first-name'
// 또는 let key = `${first}-${name}`;
// 또는 let key = returnBob();
obj[key];                // Good

또한 아래와 같은 방법으로 어떤 DOM 요소의 속성에 매우 깔끔하게 접근하여 값을 가져올 수도 있습니다.

자바스크립트에서는 DOM 요소를 객체로 취급하여 얻어오기 때문에 객체 접근 방법이 그대로 적용됩니다.

<a id="anchor-tag" data-desc="예제 a 태그">

const anchorTag = document.getElementById('anchor-tag');
const description = anchorTag['data-desc']; // ✅ 예제 a 태그

요약 비교

항목	점 표기법 (obj.key)	대괄호 표기법 (obj['key'])
문법적 간결함	✅ 간단함	❌ 문자열 필요함
동적 키 접근	❌ 불가능	✅ 가능
변수 사용	❌ 안 됨	✅ 변수 사용 가능 (obj[varName])
특수문자 키 접근	❌ 안 됨	✅ 가능
권장 사용 상황	정적인 키, 일반적인 경우	키가 변수거나 특수문자/띄어쓰기가 있는 경우

마치며

여기까지 객체의 속성에 접근할 수 있는 두 가지 패턴에 대해 알아봤습니다.

패턴마다 가능한 부분과 불가능한 부분이 있었고, 가능한 부분이라면 더 다양하게 응용하는 방법까지 정리해봤습니다.

또한 대괄호 표기법은 자바스크립트의 키-값 매핑 객체 패턴과도 연계해서 유용하게 사용할 수 있기 때문에 잘 알아두시면 좋을 것 같습니다.

 

감사합니다!