📒Javascript 객체 :)

Object

• 객체(참조) 타입의 값, 즉 변경 가능한 값이다.
• 참조값을 가지고 있으며, 참조값은 생성된 객체가 저장된 메모리 공간의 주소다!!
• 원시값과는 다르게 여러 개의 식별자가 하나의 객체를 공유할 수 있다는 부작용이 있다.
• 여러 데이터를 Key:Value 형태로 저장합니다. { }
• method: 객체 프로퍼티로 할당 된 함수

const superman = {
  // this = {}
  name: 'clark',
  age: 32,
  fly: function(){
  	console.log("날아갑니다.");
  }
  // return this
}

• 마지막에 쉼표(,)해야 이동, 삭제 시 유용함.

🔵 계산된 프로퍼티(Computed property)

👾 #1

let a = 'age';

const user = {
  name : 'Zooyaho',
  [a] : 30 // age: 30
}

👾 #2

const user = {
  [1+4] : 5,
  ["안녕" + "하세요"]: "Hello"
}

console.log(user); // {5:5, 안녕하세요: "Hello"}

🔵 접근, 추가, 삭제

👾 #접근

superman.name; // 'clark'
superman['age']; // 32

👾 #추가

superman.gender = 'male';
superman['hairColor'] = 'black';

👾 #삭제

delete superman.hairColor;

🔵 단축 프로퍼티

const name = 'clark';
const age = 32;

/* const superman = {
  name : name,
  age : age,
  gerder: 'male',
} */

const superman = {
  name,
  age,
  gender: 'male',
}

🔵 프로퍼티 존재 여부 확인

const superman = {
  name: clark,
  age: 32,
}

console.log(superman.birthDay); // undefined

📌 in 연산자 사용

• 어떤값이 넘어 오는지 알 수 없을때 in연산자 사용

👾#1

console.log('birthDay' in superman); // false

👾#2

function makeObject(name, age) {
  return {
    name,
    age,
    hobby: 'football'
  };
}

const Mike = makeObject("Mike", 30);
console.log(Mike);
// Object { age:30, hobby: "football", name: "Mike"}

console.log("age" in Mike); // true
console.log("birthDay" in Mike); // false

🔵 for ... in 반복문

const superman = {
  name: 'clark',
  age: 32,
}

for( key in superman){
  console.log(key); // "name"
  console.log(superman[key]) // "clark"
}

🔵 메서드

/* 
fly: function(){
  	console.log("날아갑니다.");
  }
*/

const superman = {
  name: 'clark',
  age: 32,
  fly(){
  	console.log("날아갑니다.");
  }
}

📌 객체의 메서드 내에서 this

• 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음.
• 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져옴.
  👉🏻 객체의 메서드는 일반함수로 작성하는 것이 좋음!!!

👾#1

const boy = {
  name: 'Mike',
  sayHello: function() {
  	console.log(`Hello, I'm ${this.name}`)
  }
}
boy.sayHello(); // Hello, I'm Mike

👉🏻 일반함수 내에서의 this는 해당 객체를 가리킴

👾#2

const girl = {
  name: 'Jane',
  sayHello: () => {
  	console.log(`Hello, I'm ${this.name}`)
  }
}
girl.sayHello(); // Hello, I'm undefined

👉🏻 화살표함수 내에서의 this는 전역객체를 가리킴