✔️객체(Object) : 여러가지 값을 한번에 저장

자바스크립트의 거의 모든 문법에 녹아 있는 개념⭐
중괄호 안에는 여러가지 다양한 값들을 쉼표로 구분해서 저장. 각 값들을 좀 더 명확하게 하기 위해 콜론(:)과 함께 이름을 붙여줘야 한다.

🔹객체의 Key

🔹객체의 Value

🔹객체의 Property

❗Property Name은 문자열 타입(String)을 가지고 있다. (따옴표를 써줘야 하지만 자바스크립트가 암묵적으로 문자열로 형변환을 해서 따옴표 생략)

🔹객체의 Property Name과 Value

❗❗Property Name 주의사항❗❗
1. 첫 번째 글자는 반드시 문자,밑줄(_),달러 기호($) 중 하나로 시작
2. 띄어쓰기 금지
3. 하이픈(-) 금지
이외의 경우에는 무조건 따옴표("",'') 붙여줘야 함

반면에 Property value는 모든 자료형 값을 사용할 수 있다.
문자열,숫자,불린,null도 property 값이 될 수 있고 심지어 객체안에 객체를 넣을 수도 있다.

📢typeof 연산자를 통해 이 객체를 출력해보자.
(typeof : 피연산자의 자료형을 문자열로 리턴해주는 연산자)

console.log(typeof{
  brandName: '코드잇',
  bornYear:2017,
  isVeryNice: true,
  worstCourse: null,
  bestCourse: {
    title: '자바스크립트 프로그래밍기초',
    language: 'JavaScript'
  }
});

//실행해보면 이 값의 자료형이 Object, 객체라는 걸 확인할 수 있다.

---

✔️객체에서 데이터 접근하기

객체의 프로퍼티에 접근하는 방법은 2가지가 있다.

📢1. 점 표기법(objectName.propertyName)

let codeit = {
  brandName: '코드잇',
  bornYear:2017,
  isVeryNice: true,
  worstCourse: null,
  bestCourse: {
    title: '자바스크립트 프로그래밍기초',
    language: 'JavaScript'
  }
};
console.log(codeit.bornYear);
//2017 출력

그러나 점 표기법을 사용하면 따옴표를 생략할 수 없는 프로퍼티 네임으로는 접근이 불가함.
예를들어서 bornYear도 born year로 표기하면 따옴표로 감싸줘야하는데 이 상태에서 점 표기법으로 접근하려고 하면 서로 다른 문장으로 해석하기 때문에 접근할 수 없음. 이럴때엔 대괄호 표기법을 사용한다.(codeit.born year -> 해석불가❌)

📢2.대괄호 표기법(objectName['propertyName'])

객체 이름 다음에 대괄호 열고 그 안에 프로퍼티 네임을 문자열로 작성해 주는 방식.
띄어쓰기나 숫자로 시작하는 프로퍼티에 접근이 가능, 프로퍼티 네임을 문자열로 만들 수 있는 어떤 방법이든 사용할 수 있다

let codeit = {
  brandName: '코드잇',
  'born Year':2017,
  isVeryNice: true,
  worstCourse: null,
  bestCourse: {
    title: '자바스크립트 프로그래밍기초',
    language: 'JavaScript'
  }
};
console.log(codeit['born' +' Year'])-->띄어쓰기 있어도 가능
//2017

📢변수를 추가해서 출력해보기

let codeit = {
  brandName: '코드잇',
  'born Year':2017,
  isVeryNice: true,
  worstCourse: null,
  bestCourse: {
    title: '자바스크립트 프로그래밍기초',
    language: 'JavaScript'
  }
};

let propertyName = 'brandName';  //이렇게 변수에 담긴 값도 활용가능.
console.log(codeit[propertyName])
//'코드잇' 출력

Q. 객체안의 객체는 어떻게 접근해야 할까?
A. 프로퍼티네임을 계속 연결해서 접근한다.

let codeit = {
 brandName: '코드잇',
 'born Year':2017,
 isVeryNice: true,
 worstCourse: null,
 bestCourse: {
   title: '자바스크립트 프로그래밍기초',
   language: 'JavaScript'
 }
};
console.log(codeit.bestCourse['title']);
//"자바스크립트 프로그래밍기초" 출력

만약에 프로퍼티 네임이 점표기법으로 접근이 불가하면 대괄호표기법으로 접근하면 된다.

Q. 만약 존재하지 않는 프로퍼티에 접근하려고 하면 어떻게 될까?

let codeit = {
  brandName: '코드잇',
  'born Year':2017,
  isVeryNice: true,
  worstCourse: null,
  bestCourse: {
    title: '자바스크립트 프로그래밍기초',
    language: 'JavaScript'
  }
};
console.log(codeit.bestCourse['teacher']);-->존재하지 않음
//undefined 출력

---

✔️객체 다루기

📢객체(Object)의 프로퍼티를 수정하거나 삭제하기

let codeit = {
  name: '코드잇',
  bornYear: 2017,
  isVeryNice: true,
  worstCourse: null,
  bestCourse: {
    title: '자바스크립트 프로그래밍기초',
    language: 'JavaScript'
  }
};

  console.log(codeit.name);
  codeit.name = 'Codeit';    //프로퍼티 수정
  console.log(codeit.name);

//"코드잇"
  "Codeit"

📢존재하지않는 프로퍼티에 새로운 값 할당하고 프로퍼티 추가해보기

let codeit = {
  name: '코드잇',
  bornYear: 2017,
  isVeryNice: true,
  worstCourse: null,
  bestCourse: {
    title: '자바스크립트 프로그래밍기초',
    language: 'JavaScript'
  }
};

  console.log(codeit.ceo);
  codeit.ceo = '강영훈';
  console.log(codeit.ceo);

//undefined
//강영훈(개발자도구에서 추가된거 확인 가능)

📢객체의 프로퍼티 삭제하기(delete)

let codeit = {
  name: '코드잇',
  bornYear: 2017,
  isVeryNice: true,
  worstCourse: null,
  bestCourse: {
    title: '자바스크립트 프로그래밍기초',
    language: 'JavaScript'
  }
};

  console.log(codeit.worstCourse);
  delete codeit.worstCourse;   //-->프로퍼티 삭제
  console.log(codeit.worstCourse);

//null
//undefined (개발자도구에서 없어진거 확인 가능)

🔹in연산자(propertyName in Object)

프로퍼티값과 undefined를 불일치 비교를 해서 객체의 프로퍼티 존재 여부를 확인할 수 있다.
undefined는 존재하지 않는 연산자.
프로퍼티네임을 문자열로 작성한 다음 in이라는 키워드 써주고 그 다음 확인할 객체를 작성.
그리고 객체안에 이런 이름을 가진 프로퍼티가 있는지 확인해서 불린값으로 리턴

let codeit = {
  name: '코드잇',
  bornYear:2017,
  isVeryNice: true,
  worstCourse: null,
  bestCourse: {
    title: '자바스크립트 프로그래밍기초',
    language: 'JavaScript'
  }
};

console.log(codeit.name !== undefined); //일치하지 않음. true

console.log('name' in codeit); //프로퍼티 있음.true

✍️in연산자 쓰는 이유? 일단은 짧아서 이해하기 쉽고 프로퍼티를 확인할때 안전하게 하기 위함.

실수로 worstCourse에 undefined 값을 할당했다고 가정해보자. 이렇게되면 사실 worstCourse가 프로퍼티로 존재하고 있지만 undefined와 비교했을때는 false가 출력된다.

let codeit = {
  name: '코드잇',
  bornYear:2017,
  isVeryNice: true,
  worstCourse: undefined,
  bestCourse: {
    title: '자바스크립트 프로그래밍기초',
    language: 'JavaScript'
  }
};

console.log(codeit.worstCourse !== undefined);

//'propertyName' in Object
console.log('worstCourse' in codeit)

//false
//true

✍️in연산자는 불린값으로 리턴하니까 if문에서 조건부분에 활용하기도 좋다. if문 추가한 예시를 보자.

let codeit = {
  name: '코드잇',
  bornYear:2017,
  isVeryNice: true,
  worstCourse: undefined,
  bestCourse: {
    title: '자바스크립트 프로그래밍기초',
    language: 'JavaScript'
  }
};

if ('name' in codeit) {
  console.log(`name 값은 ${codeit.name}입니다.`);
} else {
  console.log(`name 프로퍼티는 존재하지 않습니다.`);
}
//name 값은 코드잇입니다.

---

✔️객체와 메소드

✍️메소드(Method)

객체의 프로퍼티는 어떤 자료형이든 저장할 수가 있기 때문에 프로퍼티 값으로 함수를 넣어주면 됨.
이런 함수를 객체의 메소드라고 부른다.

let greetings = { //그리팅스라는 객체에 세가지 함수가 정의된 것.
  sayHello: function () {  //-->함수이름 없는데 함수이름은 프로퍼티 네임이 대신해줌
    console.log('Hello!');
  },
  sayHi: function() {
    console.log('Hi!');
  },
  sayBye: function() {
    console.log('Bye!');
  }
};
  greetings.sayHello();
  //Hello 출력

✍️파라미터 필요한 경우

let greetings = { 
  sayHello: function(name) {           //(1)소괄호 안에 파라미터(name) 작성
    console.log(`Hello ${name}!`);     
  },
  sayHi: function() {
    console.log('Hi!');
  },
  sayBye: function() {
    console.log('Bye!');
  }
};
  greetings.sayHello('Codeit');       //(2)메소드를 호출할 때 파라미터로 값을 전달
 //Hello Codeit! 출력

메소드는 console.log와 모양이 똑같음. 함수라고 부르면서 사용했던 console.log도
콘솔이라는 객체의 log 메소드인것.
메소드를 사용할땐 일반적으로 점표기법을 많이 사용하지만 대괄호 표기법을 사용해도
문제없이 동작은 한다.

let greetings = { 
  sayHello: function(name) {           
    console.log(`Hello ${name}!`);     
  },
  sayHi: function() {
    console.log('Hi!');
  },
  sayBye: function() {
    console.log('Bye!');
  }
};
 greetings['sayHello']('Codeit');  //-->대괄호 표기법 
 //Hello Codeit 출력

😲😲😲

Q.왜 굳이 메소드를 만들어서 사용하는 것일까?

A.메소드는 어떤 객체의 고유한 동작으로서 함수에 의미를 부여할 수 있기 때문..

//사각형과 삼각형의 넓이(getArea) 구하는 함수

너비와 높이 가지지만 넓이를 구하는 방법이 다름.
똑같은 넓이를 구하는 getArea 함수지만 어떤 객체의 메소드인지에 따라서 
그 객체에 맞는 동작을 할 때 메소드를 사용함.
만약 일반적인 함수를 정의해야 했다면 함수 이름이 중복되지 않도록(getArea 두개 못씀)
신경써서 두 함수를 정의하기도 하고
아니면 하나의 함수를 만든다고 하더라도 상황에 따라 다르게끔 함수 내부를 복잡하게 고민해야함.
메소드를 사용하면 다른 함수의 이름 중복을 피할 수도 있고 좀 더 이 객체에 집중해서
함수의 동작부분을 작성할 수 있음.

let rectAngle = {
  width: 30,
  height: 50,
  getArea: function () {
    return rectAngle.width * rectAngle.height; //-->객체에 맞는 메소드를 사용
  }
}


let triAngle = {
  width: 15,
  height: 40,
  getArea: function () {
    return triAngle.width * triAngle.height / 2;//-->객체에 맞는 메소드를 사용
  }
}

---