객체(object)

객체

구분	데이터 타입	설명
원시 타입	숫자 타입	숫자, 정수와 실수 구분 없이 숫자 하나의 타입만 존재한다.
	문자열 타입	문자열
	불리언 타입	논리적 참(true)과 거짓(false)
	undefined 타입	선언된 변수(let,const, var)에 암묵적으로 할당되는 값
	null 타입	값이 없다는 것을 의도적으로 명시할 때 사용하는 값
	심벌 타입	ES6에서 추가된 7번째 데이터 타입
객체 타입		객체, 함수, 배열

객체는 데이터타입의 일종이다. 복합데이터(원시데이터를 묶어서 사용하는 데이터)를 활용하는 데이터타입이다.

객체타입의 데이터자체는 Heap이라는 메모리저장공간에 저장되어있으며 객체를 선언할때의 이름은 이 Heap의 주소값을 저장하고 있다.

만약 아래 순수데이터객체의 예시를 빌려오자면, apple이란 객체이름자체는  name, color, display등 정보가 담긴 Heap의 주소값을 저장하고 있는 것이다. 

객체는 서로 연관있는 속성(데이터-property)과 행동(함수-method)을 묶어주기 위해 사용된다.
이때 속성은 순수 대이터 객체이고, 행동은 함수(메소드)를 일컫는다.

---

객체 생성, 접근

 

객체를 만드는 방법은 크게 3가지이다.

• Object literal이용하기 -> { key: value }를 작성하는 것
• new Object() -> Object라는 클래스 이용하기
• Object.create(); -> Object라는 클래스안에 있는 create라는 함수 이용하기

key에는 - 원시타입(문자, 숫자, 문자열, 심볼타입)

value에는- 원시타입(숫자,문자열등등..), 객체타입(함수포함)이 들어갈 수 있다.

 

객체생성하기(Object literal이용)

let apple = {
  name: 'apple', 
  'hello-bye': '✋',
  // 여러개의 단어를 이어붙일때 특수문자를 사용하기위해 따옴표안에 작성하기도 하지만,
  // 카멜케이스 or 스네이크케이스를 이용하는게 더 보편적이다.
  0: 1,
  ['hello-bye1']: '✋',
};

 

속성에 접근하기

// 마침표 표기법 dot notation
apple.name;	//key인 name에 해당하는 value가 출력된다.

// 대괄호 표기법 bracket notation -> 대괄호안은 따옴표나 큰따옴표로 감싸서 문자열값으로 만들어줘야함
apple['name'];	//key인 name에 해당하는 value가 출력된다.

 

객체의 속성추가하기

apple.emoji = '🍎';
apple["emogi"] = "🍎";
console.log(apple.emoji);
console.log(apple["emoji"]);
// 이때 apple이라는 객체내에 emogi라는 key가 있다면 기존에 미리 작성된 벨류에 덮어씌워진다.
// 만약 emogi라는 key가 없다면 emogi라는 key와 🍎라는 벨류가 새로 할당된다.

 

객체의 속성 삭제하기(delete연산자 사용)

delete apple.emoji;

---

braket notation활용법 - 객체에 동적으로 접근하기

정적으로 접근한다는 것의 의미 -> 함수를 통하지 않은 객체의 접근, 수정, 삭제

const obj = {
  name: '엘리',
  age: 20,
};

// 코딩하는 시점에, 정적으로 접근이 확정됨
obj.name;
obj.age;

 

동적으로 접근한다는 것의 의미 -> 함수를 통해 프로퍼티에 접근, 수정, 삭제하는 것. 이때는 대괄호 표기법을 사용해야한다.

// 객체생성(by 객체리터럴)
const drink = {
  firstDrink: "cocaCola",
  secondeDrink: "milkis",
  thirdDrink: "welchs",
};

// 동적으로 프로퍼티 추가, 수정
function addDrink(key, value) {
  drink[key] = value;
}
addDrink("firdDrink", "macCole");
console.log(drink);

// 동적으로 프로퍼티 삭제
function deleteDrink(key) {
  delete drink[key];
}
deleteDrink("firdDrink");
console.log(drink);

---

short - key네임과 value네임이 같은경우

key네임과 value네임이 같은 경우 축약이 가능하다.

const x = 0;
const y = 0;

const coordinate = { x, y }; //<-{ x: x, y: y };를 축약한 것
console.log(coordinate);  // { x: 0, y: 0 }가 출력됨

 

축약예시1

function makeObj(name, age) {
  return {
    name: name,
    age: age,
  };
}

// 다음과 같이 축약할 수 있다.
function makeObj(name, age) {
  return {
    name,
    age,
  };
}

---

this - 객체내의 속성 접근하기

객체안에서 객체내의 속성(property)에 접근하기위해서는 'this'를 사용한다. 

언뜻보면, 어색하게 느껴지지만 알고보면 굉장히 직관적이다. this자리에 원래 무엇이 들어가지? 객체의 이름이 들어간다.

즉, 어차피 객체내에서 사용할거니까 this를 객체이름대신 사용한 것이다. 이름만 this로 대체한거고, 작성법은 기존에 배웠던

객체에 접근하는 방식과 똑같다.

'this'를 사용하는 방법은 다음과 같다. -> `${this.키이름}`

 

this 사용 예시1

const mac = {
  name: 'commend',
  display: function () {
    console.log(`${this.name}: ⌘`);
  }
};

mac.display(); // commend: ⌘가 출력됨

---

생성자 함수(constructor function)

const mac = {
  name: 'commend',
  display: function () {
    console.log(`${this.name}: ⌘`);
  }
};

mac.display(); // commend: ⌘가 출력됨

생성자함수는 객체라는 붕어빵을 찍어내는 객체붕어빵기계의 역할을 한다. 다음의 예시를 보자.

const window = {
  osName: 'window11',
  display: function () {
    console.log(`${this.osName}: 🖥`);
  },
};

const mac = {
  osName: 'macOsX',
  display: function () {
    console.log(`${this.osName}: 💻`);
  },
};

이렇게 객체의 양식은 같고 내용물만 다른 경우, 일일이 찍어주는 수고를 생성자 함수를 이용해 덜어낼 수 있다.

템플릿을 만들고, 템플릿과 new연산자를 통해 객체를 찍어낼 수 있다.

 

1. 붕어빵 틀을 만드는 단계 

function Os(osName, emoji) {
  this.osName = osName;
  this.emoji = emoji;
  this.display = () => {
    console.log(`${this.osName}: ${this.emoji}`);
 	 };
  return this; 
  // 'return this'는 생략가능-> 작성하지 않아도, 자바스크립트엔진이 return this를 자동으로 뱉어줌
  }

• 1. Os와 같이 생성자함수의 네임 맨 첫글자는 대문자로 한다.
• 2. this.osName을 실행하는 순간 Os라는 객체내에 osName이라는 key가 생기고 받아온 versionName인자를 value에 할당한다.
• 3. 작성하고싶은 key와 value를 모두 작성한 후 'return this'를 적는다. 이때 'return this'는 굳이 작성하지 않아도 자바스크립트엔진이 자동으로 적어주기때문에 생략할 수 있다.
• 4. 개발자는 적어둔 생성자 함수를 이용해 객체를 찍어내면 된다.

 

2. 붕어빵틀을 이용해 붕어빵을 굽는단계

const window = new Os('Window11', '🖥');
const mac = new Os('macOsX', '💻');

 

3. console.log로 붕어빵 잘 구워졌는지  확인하기

console.log(window);
// Os { osName: 'Window11', emoji: '🖥', display: [Function (anonymous)] }
console.log(mac);
// Os { osName: 'macOsX', emoji: '💻', display: [Function (anonymous)] }
console.log(window.osName);	// Window11
console.log(mac.emoji);	// 💻
mac.display();	// macOsX: 💻