자바스크립트 객체 심화편: this, in, for...in, 메서드까지 한 번에 정리!

자바스크립트 객체를 더 깊이 이해하려면 this, in연산자, for...in 반복문, 그리고 메서드(method) 개념을 꼭 알아야 해요.

 

이 글에서는 각각의 개념을 쉽게 설명하고, 언제 어떻게 쓰는지 실용적인 예시와 함께 안내해 드릴게요!!

 

 

---

this란 무엇인가요?

this는 현재 실행 중인 코드의 문맥(Context)을 참조하는 키워드예요!

객체 내부에서 this를 사용하면 그 객체 자신을 가리킵니다

 

let user = {
  name: "Phantom",
  greet() {
    console.log(`안녕하세요? 저는 ${this.name}입니다.`);
  }
};

user.greet();

//안녕하세요? 저는 Phantom입니다.

 

여기서 this.name은 user.name과 같아요.

 

즉, this는 이 메서드를 호출한 주체인 user를 가리키게 됩니다.

 

(주의) this는 화살표 함수( => )에서는 다르게 동작해요. 그럴 땐 상위 스코프의 this를 그대로 가져옵니다.

 

 

---

 

in 연산자

in 연산자는 객체에 해당 키가 존재하는지 확인할 때 사용해요.

let car = { barand: "Hyundai", year: 2022 };

console.log("barand" in car); // true
console.log("color" in car); // false

 

심지어 값이 undefined여도 키가 존재하면 ture를 반환해요.

 

let obj = { x: undefined };

console.log("x" in obj); // true

 

 

---

 

for...in 반복문

객체의 모든 키를 순회하고 싶을 때 사용하는 반복문이에요.

 

let person = {
  name: "Tom",
  age: 25,
  job: "Designer"
};

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

 

 

 

참고로 배열에는 for...in 보단 for...of나 일반 for문을 쓰는 게 더 안전해요. for...in은 객체에 적합한 반복문입니다!

 

 

---

 

메서드란?

객체의 속성 중 값이 함수인 것을 메서드(method)라고 불러요.

 

let dog = {
  name: "Bori",
  bark() {
    console.log("멍멍!");
  }
};

dog.bark(); // "멍멍!"

 

메서드를 사용하면 객체에 행동(기능)을 부여할 수 있어요.

 

그리고 이 안에서 this를 활용하면 객체 내부 속성에도 접근할 수 있죠

 

예)

let cat = {
  name: "Nabi",
  speak() {
    console.log(`${this.name}가 야옹하고 울어요.`);
  }
};

cat.speak(); // "Nabi가 야옹하고 울어요."

 

 

자바스크립트 객체를 제대로 쓰기 위해서는 this, in, for...in, 그리고 메서드 개념을 꼭 알아야 해요!

오늘은 정말 간단하게 정리하고 지나가긴 했지만 앞으로 자주 사용하다 보면 더 이해 가겠죠??

 

다음은 객체 참조에 대해서 조금 더 깊게 알아보려고 해요!!