[JS] 점 표기식과 대괄호 표기식의 차이점

 

1. 점 표기식 (Dot Notation)

1.1 개념

점 표기식은 **.(점)**을 사용하여 객체의 속성에 접근하거나 값을 설정하는 방식입니다. 속성 이름이 간단한 식별자일 때 주로 사용됩니다.

1.2 사용법

const obj = { name: "John", age: 30 };

// 속성 값 읽기
console.log(obj.name); // "John"

// 속성 값 수정
obj.age = 31;
console.log(obj.age); // 31

1.3 특징

• 가독성: 코드가 간결하고 읽기 쉬움.
• 제한사항: 속성 이름에 공백, 특수 문자, 숫자로 시작하는 경우 사용 불가.

---

2. 대괄호 표기식 (Bracket Notation)

2.1 개념

대괄호 표기식은 **[](대괄호)**를 사용하여 객체의 속성에 접근하거나 값을 설정하는 방식입니다. 속성 이름이 문자열 형태로 제공되거나 동적으로 결정될 때 사용됩니다.

2.2 사용법

const obj = { "first name": "Alice", age: 25 };

// 속성 값 읽기
console.log(obj["first name"]); // "Alice"

// 속성 값 수정
obj["age"] += 1;
console.log(obj["age"]); // 26

// 동적 속성 접근
const key = "age";
console.log(obj[key]); // 26

2.3 특징

• 유연성: 속성 이름이 공백, 특수 문자, 숫자로 시작하거나 동적으로 결정되는 경우에도 사용 가능.
• 문자열 필수: 속성 이름은 반드시 문자열로 지정해야 함.

---

3. 점 표기식과 대괄호 표기식의 차이점

3.1 속성 이름의 제약

구분점 표기식대괄호 표기식

공백 포함	❌ 사용 불가	✅ 사용 가능
특수 문자 포함	❌ 사용 불가	✅ 사용 가능
숫자로 시작	❌ 사용 불가	✅ 사용 가능
동적 속성 접근	❌ 사용 불가	✅ 사용 가능

3.2 코드 예제

const obj = { "first name": "Bob", "123key": "value", normalKey: "normal" };

// 점 표기식: 제한
console.log(obj.normalKey); // "normal"
// console.log(obj."first name"); // SyntaxError

// 대괄호 표기식: 유연성
console.log(obj["first name"]); // "Bob"
console.log(obj["123key"]); // "value"

// 동적 속성 접근
const dynamicKey = "normalKey";
console.log(obj[dynamicKey]); // "normal"

---

4. 언제 점 표기식과 대괄호 표기식을 사용할까?

4.1 점 표기식을 사용할 때

• 속성 이름이 간단한 식별자(공백, 특수 문자 없이 알파벳, 숫자 조합)일 때.
• 코드 가독성을 높이고 싶을 때.

예:

const user = { name: "Charlie", age: 40 };
console.log(user.name); // "Charlie"

4.2 대괄호 표기식을 사용할 때

• 속성 이름이 공백, 특수 문자, 숫자로 시작하는 경우.
• 속성 이름이 동적으로 결정되는 경우.

예:

const settings = { "default-color": "blue", "1stOption": true };
console.log(settings["default-color"]); // "blue"
console.log(settings["1stOption"]); // true

---

5. 결론

• 점 표기식은 가독성이 좋고 일반적인 경우에 적합합니다.
• 대괄호 표기식은 유연성이 뛰어나며 동적 속성 접근이나 특수한 속성 이름을 다룰 때 유용합니다.
• 상황에 따라 적합한 방식을 선택해 사용하면 코드의 가독성과 유지보수성을 높일 수 있습니다.

---