오늘은 자바스크립트 기초를 다시 한번 공부해보는 세번째 시간을 가져 보겠습니다.

그럼 시작하겠습니다.

출처:
유튜브: 코딩앙마

---

Object

코드

const superman = {
	name: 'aje',
    age: 3,
}

접근 하는 법

superman.name // age
superman['age'] // 3

추가

superman.gender = 'male';
superman['haierColoer'] = 'yellow';

삭제

delete superman.hairColor;

---

단축 프로퍼티

const name = 'aje';
cosnt age = 3;

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

프로퍼티 존재 여부확인 하기

const superman = {
	name: 'age',
    age: 3,
}

// 1. 존재 하지 않는 프로퍼티 호출
superman.birthDay; //undefined

// 2. 'value' in 객체
'birthDay' in superman; //false
'age' in superman; //true

어떤 값을 넘어올지 확신하지 않을때 사용하면 된다.
함수의 인자로 받거나 api 통신을 통해 데이터 통신을 받아올때 쓴다.

예제

function isAdult(user) {
  //!('age' in user)을 써서 age가 없을 때도 false가 나오게 해주었다
  if(!('age' in user) || user.age < 20){
    return false;
  } 
  return true;
}

const Mike = {
  name: 'Mike',
  age: 30
}

const Jane = {
  name: 'Jane',
}

console.log(isAdult(Jane)) //false

---

for ... in 반복문

for(lett key in superman){
	console.log(key)
	console.log(superman[key])
}

예제

const Mike = {
  name: 'Mike',
  age: 30
}

for(x in Mike) { //x는 Mike가 갖고 있는 key값들이다
  console.log(x) // name, age
  console.log(Mike[x]) //Mike, 30
}

---

method : 객체 프로퍼티로 할당 된 함수

const superman = {
	name : 'age',
    age : 30,
    fly : function(){
    	console.log('날다');
    }
}

//fly함수가 superman 객체의 method인 것이다.
superman.fly();

위의 코드는 아래처럼 줄여 쓸 수도 있다.

const superman = {
	name : 'age',
    age : 30,
    fly(){
    	console.log('날다');
    }
}

//fly함수가 superman 객체의 method인 것이다.
superman.fly();

let boy = {
  name: 'Mike',
  sayHello,
}

let girl = {
  name: 'jane',
  sayHello,
}

sayHello : function(){
  console.log(`hello ${this.name}`);
}

boy.sayHello(); //hello Mike
girl.sayHello(); // hello jane

화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음.
화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져옴

let boy = {
  name: 'Mike',
  sayHello: () => {
    console.log(this) //전역객체
  }
}

boy.sayHello();
//this != boy

전역객체

• 브라우저 환경: window
• Node js : global

---

객체의 메소드

let boy = {
  name: 'Mike',
  sayHello: function() {
    console.log(this.name) // boy.name으로 하면 에러 난다.
  }
}

let man = boy;
boy = null; 

man.sayHello();

메소드에서는 객체명을 직접 써주는것 보다 this를 써주는 것이 좋다.

화살표 함수

let boy = {
  name: 'Mike',
  sayHello: () =>{
    console.log(this)
  }
}

boy.sayHello(); 
//객체의 메소드를 작성 할때는 화살표 함수로 작성하지 않는 것이 좋다.
//this가 전역객체를 가르키기 때문에 이다.