객체?

자꾸 같은말을 하게되네요.

객체 = 다양한 데이터를 담을 수 있는 자료형

1. 객체는 중괄호 {…}를 이용해 만들 수 있다.
2. 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있다.
3. 키엔 문자형, 값엔 모든 자료형 허용.

<script>
let obj = {
	key1: 'vlaue';, // property 1
    key2: 12345 // property 2
}
</script>

---

프로퍼티 값 얻기

<script>
alert(obj.key1); // 'value'
alert(obj.key2); // 12345

//대괄호 표기법
alert(obj[key1]); // 'value'
</script>

프로퍼티 값 추가, 삭제

<script>
//값 추가
obj.key3 = true;

// 값 추가(대괄호 표기법)
obj["key 3"] = true;

//값 삭제
delete obj.key1;

//값 삭제(대괄호 표기법)
delete obj[key1];
</script>

프로퍼티 이름

• 띄어쓰기나 여러 단어를 조합해 만든 키는 따옴표로 묶어야함.

<script>
let obj = {
	"key 4": null;
}
</script>

대괄호 표기법

• 을 사용하면 모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있다.

<script>
let bird = "likes birds"; // 평가 결과 likes birds

// user["likes birds"] = true; 와 같습니다.
user[bird] = true;
</script>

• 또 다른 예시

<script>
let user = {
  name: "John",
  age: 30
};

let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");

// 변수로 접근
alert( user[key] ); // John (프롬프트 창에 "name"을 입력한 경우)
alert( user[key] ); // 30 (프롬프트 창에 "age"을 입력한 경우)
</script>

계산된 프로퍼티

<script>
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");

let bag = {
  [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.
};

alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.
</script>

• [fruit]는 프로퍼티 이름을 변수 fruit에서 가져오겠다는 것을 의미합니다.

---

메서드

• 객체 프로퍼티에 할당된 함수를 메서드(method) 라고 부릅니다. sayHi가 메서드 입니다.

• 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해줍니다.

• 작성법은 함수 표현식으로 작성해 객체에 할당해도 되고,

<script>
let user = {
  name: "John",
  age: 30
};

user.sayHi = function() { /// user에 key = sayHi, value = function인 프로퍼티 생성
  alert("안녕하세요!");
}; 
</script>

• 이미 정의된 함수를 사용해도 됩니다.

<script>
let user = {
};

// 함수 선언
function sayHi() {
  alert("안녕하세요!");
};

// 선언된 함수를 메서드로 등록
user.sayHi = sayHi;

let user = {
	sayHi: function sayHi() {
  alert("안녕하세요!");
  },
};

</script>

• 객체 안에 직접 작성하면 이렇게 되고

<script>
let user = {
  sayHi: function () { // 이 부분!
    console.log("안녕하세요!");
  },
};
</script>

• 단축 구문을 사용하면 이렇게 됩니다(위와 같이 동작합니다.)

<script>
let user = {
  sayHi() { 
    alert("Hello");
  }
};
</script>

this

• 메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있습니다.
  대부분의 메서드가 객체 프로퍼티의 값을 활용합니다.

• 메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있습니다.

• '.'앞의 this는 메서드를 호출할 때 사용된 객체를 나타냅니다.

<script>
let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert(this.name);
  }
};

user.sayHi(); // John
</script>

💡this 값은 런타임에 결정됩니다.

• user.sayHi()가 실행되는 동안에 this는 user를 나타냅니다.
• 함수를 선언할 때 this를 사용할 수 있습니다. 함수가 호출되기 전까지 this엔 값이 할당되지 않습니다.

• 동일한 함수라도 다른 객체에서 호출했다면 'this’가 참조하는 값이 달라집니다.

화살표 함수에는 this가 없습니다.

---

요약

• 객체 프로퍼티에 저장된 함수를 '메서드’라고 부릅니다.

• object.doSomthing()은 객체를 '행동’할 수 있게 해줍니다.

• 함수를 객체 프로퍼티에 저장해 object.method()같이 ‘메서드’ 형태로 호출하면 this는 object를 참조합니다.

• 메서드는 this로 객체를 참조합니다.

• this값은 런타임에 결정됩니다.
  함수를 선언할 때 this를 사용할 수 있습니다. 함수가 호출되기 전까지 this엔 값이 할당되지 않습니다.

이거 스크립트 공부하다가 html이랑 css를 까먹는건 아닌지?;