자바스크립트 | 속성 접근자 .(dot notation), [](bracket notation)

속성 접근자는 점(.)이나 괄호([]) 표기법으로 객체에 접근할 수 있도록 해준다.

object.property        // dot notation
object['property']    // bracket notation

const obj = {
    firstName: 'gildong',
    lastName: 'hong'
}

객체의 속성은 키(이름): 값으로 되어 있고, 각 속성은 콤마로 구분된다.
객체의 값에 접근할 때는 키를 이용하면 되는데 이 때 사용하는 것이 점(.) 혹은 괄호([])이다.

console.log(obj.firstName);   // gildong
console.log(obj['lastName']); // hong 
//괄호 표기법을 사용할 때는 속성의 이름을 따옴표를 붙여서 문자열 형태로 적어주어야 한다.

 

 

속성 추가

접근자를 이용해서 객체에 속성을 추가할 수도 있다.

obj.age = 11;
console.log(obj); // { firstName: 'gildong', lastName: 'hong', age: 11 }

. 과  [ ]의 차이점

어떤 변수에 있는 값을 객체의 키로 나타내고 싶을 때 .은 사용할 수 없다.

let a = 'age';
console.log(obj.a);	// undefined

obj.a는 obj라는 객체의 'a'라는 키를 가지고 있는 속성값을 리턴하는데, 이 객체에는 그런 키 값이 없기 때문에 undefined라는 결과가 나온다.

console.log(obj[a]);	// 11

대신 괄호 표기법을 따옴표 없이 사용하면 a라는 변수가 있는지 먼저 확인 후 그 변수의 값을 키로 가지고 있는 값을 찾게 된다.

let a = 'Name';
console.log(obj[`first${a}`]);	// gildong
console.log(obj['last' + a]);	// hong

이렇게 여러 표현식을 넣는 것도 괄호 속성 접근자에서는 가능하다.

 

• 표현식을 객체의 키로 입력할때는 .을 사용하면 안된다. []를 사용해야 한다. 점 노테이션을 사용하면 오류남
• 점을 사용할수 없는 경우: 표현식을 사용하거나, 키 이름에 띄어쓰기나 대시 등등 이름규칙에 어긋나는 것들이 있을때. []를 사용할수밖에 없다.

 

참고사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Property_accessors

https://youtu.be/o5qceuQs34M