객체 리터럴 2가지 표현 방식의 차이점

JavaScript에서 객체 리터럴을 사용할 때, 속성(property) 이름을 표기하는 방식에 대해 두 가지 방법이 있습니다:

 

1. 식별자(identifier) 이름처럼 속성 이름을 사용하는 경우 (따옴표 없이)

let sports = { 
    Baseball: ['Seoul', 'Daegu'],
    Basketball: [ 'Suwon', 'Busan', 'Ulsan'],
    Football : 'Seoul'
}
for (let sport in sports) {
	console.log(sport)
}
// Baseball
// Basketball
// Football

let obj = {
    name: "John",
    age: 30,
    $salary: 5000,
    _department: "IT",
    score99: "A"  // 숫자로 시작할 수는 없지만, 이름 안에 숫자는 가능
};

console.log(obj.name); // "John"
console.log(obj.$salary); // 5000

 

• 식별자 규칙에 맞는 이름만 사용할 수 있습니다. 즉, 속성 이름은 문자, 숫자, 밑줄(_), 달러 기호($)로 시작할 수 있으며, 공백이나 특수문자는 허용되지 않습니다.
• 속성 이름은 기본적으로 문자열로 처리되지만, 따옴표를 생략해도 JavaScript는 내부적으로 문자열로 인식합니다.

 

2. 문자열로 속성 이름을 사용하는 경우 (따옴표를 사용)

let sports = { 
    'Baseball': ['Seoul', 'Daegu'],
    'Basketball': [ 'Suwon', 'Busan', 'Ulsan'],
    'Football' : 'Seoul'
}
for (let sport in sports) {
	console.log(sport)
}
// Baseball
// Basketball
// Football

let obj = {
    "first name": "John",
    "age!": 30,
    "salary$: 5000,
    "99score": "A"  // 숫자로 시작하는 이름 가능
};

console.log(obj["first name"]); // "John"
console.log(obj["age!"]); // 30
console.log(obj["99score"]) // "A"

 

• 속성 이름이 문자열이므로, 식별자 규칙에 따를 필요가 없습니다. 즉, 공백이나 특수문자도 허용됩니다.
• 따옴표가 있어도 내부적으로 속성 이름은 문자열로 처리되므로 기능적인 차이는 없지만, 더 유연하게 속성 이름을 작성할 수 있습니다.

3. 권장 사항

따옴표 사용 여부에 따른 동작 차이는 없습니다. 단, 따옴표를 사용하면 더 복잡한 속성 이름(특수문자, 공백, 숫자로 시작하는 이름 등)을 쓸 수 있다는 유연성이 있습니다. 그러나 따옴표를 생략하는 방식이 일반적으로 더 간결하고 직관적입니다. 따라서 식별자 규칙을 따르는 속성 이름을 사용할 때는 따옴표를 생략하는 것이 좋습니다.