객체 object

객체는 키(key) 와 값(value)으로 구성된 프로퍼티(property)를 가지고 있으며 각 프로퍼티는 ,(쉼표)로 구분된다.

<출처> https://www.youtube.com/watch?v=KF6t61yuPCY&t=4658s 코딩앙마 중 이미지

object 접근, 추가, 제거

const man  = {
  name: 'Mike',
  age: 33,
}

// 추가
man.gender = 'male';
man['hairColor'] = 'black'; 

// 접근
console.log(man.hairColor);
console.log(man['gender']);

// 제거
delete man.gender;
console.log(man.gender); // gender 의 값이 삭제됨

 

단축 프로퍼티

const name = 'mike';
const age = 33;

const man = {
  name,    // name: name 과 같은말
  age,  // age: age 와 같은말
  gender: 'male',
}

console.log(man.name);

 

프로퍼티 존재 여부 확인

. 이나 대괄호를 이용해 프로퍼티의 존재여부를 확인 할 수 있는데 언제 in 연산자를 사용할까?
어떤 값이 넘어올지 확신할 수 없을때 사용 ex) api 통신을 통해 데이터를 받아 온 경우

const man  = {
  name: 'Mike',
  age: 33,
}

console.log(man.gender); // undefined 출력

// in 연산자를 통해 프로퍼티의 존재를 확인할 수 있음
console.log('birthDay'in man); // false 출력
console.log('name' in man); // true 출력

 

for...in 반복문

for in 반복문을 통해 객체를 순회하면서 값을 얻을 수 있음

*in은 키(key)만 가지고옴 (관계연산자와 비슷) 아래 코드를 예시로 들면 'Mike',와 33 값의 키인 name과 age 를 불러옴

const man  = {
  name: 'Mike',
  age: 33,
}

for(let key in man){
  console.log(key); // "name", "age" 출력
  console.log(man[key]); // "mike" 33 출력
}

//key 를 출력하면 문자열 형태로 출력되기 때문에 man[key] 는 man["name"] 과 man["age"] 와 같아서
//각각 "Mike" 와 "33"을 출력하는거임

 

 

<객체 예제>

// 이름과 나이를 받아서 객체로 변환하는 함수

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

const a = superman('Mike', 33);
console.log(a);
// { "name" : "Mike",
//   "age"  : 33,     
//   "hobby": "football",
//}  출력

//user 가 나이 데이터를 가지고 있는지 가지고 있다면 성인인지 성인이 아닌지 판별
//user 의 나이 데이터가 없거나 성인이 아니면 false, 성인이면 true

function isAdult(user){
  if(!('age' in user) || user.age < 20){
    return false;
  }  
  return true;
}

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

const jane = {
  name: 'jane',
  age: 18,
}

const tom = {
  name: 'tom',
}


console.log(isAdult(Mike));  // true 출력
console.log(isAdult(jane));  // false 출력
console.log(isAdult(tom));  // false 출력

 

method (메소드)

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

const superman = {
  name: "Mike",
  age: 33,
  fly: function(){ // 여기서 fuction은 생략될 수 있음
    console.log('날아갑니다 슈웅~');
  },
}

superman.fly(); //'날아갑니다 슈웅~' 출력

 

this

함수에서 쓰이는 this는  함수를 호출할때 .(점) 앞에있는 함수명을 불러옴

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

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

user.sayHello(); // 'Hello, i'm Mike' 출력


//화살표 함수를 썼을경우 
let boy = {
  name: 'Mike',
  sayHello:()=>{
    console.log(this.name); // 여기서 this 는 전역개체임
  }
}

boy.sayHello(); // 여기선 Mike 가 출력이 안됨

<this의 또 다른 예제>

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

let man = boy; 
man.name = 'tom'; // man 이 boy 이므로 이름을 boy의 이름을 tom 으로 변경

console.log(boy.name); //tom 출력
boy = null; // boy를 없애버림 이제 man 으로만 접근 가능

man.sayHello(); // name 이 없다는 에러가 뜸

// 여기서 위의 메소드에 boy.name 대신 this.name 을 적으면 'tom'이 잘 출력됨