TIL 23.05.25

문제점

this 객체에 대해 다시 공부하던 와중에, this.name 을 대괄호 표기법으로 this[name]으로 작성하니 에러가 났다. 다음과 같이 "" 큰 따옴표를 붙여 나타내니, 오류 없이 잘 동작하였음.

const person = {
  name: "John",
  age: 31,
  isMarried: true,
  sayHello: () => {
    console.log(`Hello, My name is ${this["name"]}`); // Arrow function 에서 his 값은 일반함수처럼 호출한 대상에따라 바뀌는 것이 아닌, Arrow function 이 선언되기 직전 유효한 this 값과 같이 나타남.
    console.log(`Hello, My name is ${person["name"]}`);
    console.log(`Hello, My name is ${this.name}`);
    console.log(`Hello, My name is ${person.name}`);
  },
};

person.sayHello();

 

그러나 객체를 생성할 때, 다음과 같이 for of 문을 쓰게 되는데, 이것도 대괄호 표기법 이면서 count[num] 그대로 작성하는 것이 이해가 되지 않았음. 둘의 차이점을 명확히 몰라서 헷갈렸다.

for(let num of nums) {
        if(num in count) {
            count[num] += 1
        }else {
            count[num] = 1
        }
}

 

시도해본것

console.log(`Hello, My name is ${this.name}`) // 동작
console.log(`Hello, My name is ${this[name]}`) // 에러
console.log(`Hello, My name is ${this["name"]}`) // 동작

 

 

해결방안

Chat gpt 를 활용해서 차이점을 알게되었다.

`count[num]` 대신 `count["num"]`을 사용하는 것은 다른 결과를 가져올 수 있습니다.
1. `count[num]`은 `num` 변수의 값에 따라 동적으로 `count` 객체의 속성에 접근하는 것을 의미합니다. 즉, `num` 변수의 값이 1이라면 `count[1]`과 같이 해석되어 `count` 객체의 `1` 속성에 접근하게 됩니다.

2.`count["num"]`은 문자열 "num"을 `count` 객체의 속성 이름으로 사용하는 것을 의미합니다. 즉, `count` 객체에 "num"이라는 속성이 있는지 확인하고, 해당 속성의 값을 가져오게 됩니다. 따라서 `count["num"]`은 `count` 객체의 "num" 속성에 접근하는 것이며, `num` 변수와는 아무런 관련이 없습니다.

따라서, 주어진 코드에서 `count[num]`은 `num` 변수의 값을 기준으로 동적으로 `count` 객체의 속성에 접근하는 것이 맞으며, `count["num"]`과는 다른 동작을 수행합니다.

 

알게된것

객체의 속성에 접근하는지, 동적인 변수에 따라 속성에 접근하는지에 따라 문자열 "" 유무가 차이가 난다.

또한 점 표기법은 동적인 속성에 접근할 때 사용할 수 있는지 궁금해서 count.num 이라고 작성해보았는데, 

for(let num of nums) {
        if(num in count) {
            count.num += 1
        }else {
            count.num = 1
        }
}

count.num이 작동하지 않는 이유는 JavaScript에서 동적으로 속성에 접근할 때 대괄호 표기법([])을 사용해야 하는데, count.num은 올바른 대괄호 표기법이 아니다.

 

따라서 정리하면,

 

var obj = {
  "my-name": 'John',
  age: 25,
  hobbies: ['reading', 'coding', 'gaming']
};

 

1. 객체의 속성에 접근할 때

(1) 점 표기법

"" 이 필요하지 않은 일반적인 객체의 속성에 접근할 때 사용할 수 있음. ex) obj.age , obj.hobbies

(2) 대괄호 표기법

"" 이 필요하거나 그 외의 객체의 속성에 접근할 때 사용할 수 있음. ex) obj["my-name"] , obj["age"], obg["hobbies"]

 

2. 동적인 변수에 접근할 때

대괄호 표기법

동적으로 속성에 접근할때, 사용할 수 있음. ex) count[num]