"토이프로젝트I"을 시작하면서 로직 구현에 있어서 객체 표기법에 대한 개념이 완벽히 되지 않은 것 같아 복습을 선택했다.

🔗 Object

JavaScript의 객체(Object)는 여러 개의 속성(property)을 갖는 데이터 타입으로 { }중괄호로 감싼 키(key) : 값(value) 의 쌍을 여러개의 속성으로 갖을 수 있다.

const object = {
  key : "value",
  name : "object",
  type : "data"
}

객체 object는 key, name, type의 키를 갖고 있고, 각 키의 값으로는 value, object, data를 갖고 있다. 또한 각각의 쌍을 속성(property)이라 하고, 각 속성은 ,로 분리하여 객체 object는 3개의 속성을 갖고 있다고 할 수 있다.

🔗 객체 Object에 접근하는 방법

📌 점 표기법

const object = {
  key : "value",
  name : "object",
}
console.log(object.key) // value
console.log(object.name) // object
object.type = "data" // property 추가하기
console.log(object.type) // data

객체.key와 같이 점을 찍어 객체의 키 값에 접근 할 수 있고 같은 방법으로 새로운 속성을 추가하고 싶다면 객체.추가 할 키 = "추가할 값"으로 속성을 추가 할 수 있다.

📌 대괄호 표기법

const object = {
  key : "value",
  name : "object",
}
console.log(object["key"]) // value
console.log(object["name"]) // name
object["type"] = "data" // property 추가하기
console.log(object["type"]) // data

대괄호 표기법도 점 표기법과 같이 점 대신 대괄호[ ]를 사용하여 키를 감싸주면 해당 키의 값이 출력되고 새로운 속성을 추가하는 방법 역시 키를 대괄호[ ]로 감싸주어 값을 할당해주면 된다.

그렇다면 표기법이 다르다는 것 외에 객체의 키 값에 접근 할 수 있고 속성을 추가하는 방법 역시 같은 맥락인데 왜 두가지 표기법이 존재하는 것일까? 에 대한 의문이 들었지만 존재하는데엔 다 이유가 있겠쥐 ~ ~

🔗 점 표기법과 대괄호 표기법의 차이

["name"] 과 name 은 어떻게 다를까 ❓

점 표기법과 대괄호 표기법이 객체의 속성에 접근 할 수 있는 차이인데 점 표기법은 유효한 식별자에만 접근이 가능하지만 대괄호 표기법은 문자열 키를 사용하여 객체의 속성에 접근할 수 있어 동적으로 속성 이름을 결정할 수 있고 모든 문자열을 키로 사용할 수 있다.
📖 예시를 보며 이해해보자 !

const obj = {
  name : 'sumin',
  age : '10'
}
console.log(obj.name) // sumin
console.log(obj["name"]) // sumin

위의 로직에서 객체obj의 obj.name 과 obj["name"]은 같은 값을 갖고 있다.

const obj = {
  name : 'sumin',
  age : '10'
}
const key = "name" // 각 식별자의 키에 접근할 객체 선언
obj.name2 = 'mimi'
console.log(obj[key]) // sumin
console.log(obj.name2) // mini

const obj2 = {
  name : 'mango'
}
console.log(obj2[key]) // mango
console.log(obj2.name2) // undefined

위와 같이 객체 key는 대괄호 표기법을 사용하여 각 객체의 키 속성에 접근이 가능하고 점 표기법은 해당 객체(유효한 식별자)에만 접근이 가능하다.

📌 즉, 대괄호 표기법을 사용했을 때 객체에 접근이 허용되는 범위가 점 표기법과는 다르게 넓어질 수 있다는 차이점이 있지만 두 표기법 모두 객체의 속성에 접근하고 조작하는 데 유용하니 로직을 구현할 때 적절한 방법을 선택하면 될 것 같다.