다시 시작하는 자바스크립트 - 객체

 

헷갈리는 것들만 따로 정리할 예정.

deep dive 책을 함께 공부함.

 

 

 

7. 객체

 

- 객체 만드는 방법

 

1. Object literal { key : value } => 객체 리터럴

 

key : 문자, 숫자, 문자열, 심볼

value : 원시값, 객체(함수)

 

let person = {
  age : 18,
  "name" : "유승민",
  ["favorite-food"] : "짜장면",
};

 

1-1) 속성, 데이터에 접근하는 방법 

 

  - 속성, 데이터에 접근하기 위해서는 person.age; 이런식으로 접근해야 함. => 마침표 표기법(dot notation)

 

  - 따옴표가 들어간 key 값의 경우, person["favorite-food"]; 이런식으로 대괄호 안에 따옴표를 넣어서 접근해야 함.

     key 이름을 지을 때 규칙성을 잘 따랐을 경우, 마침표 표기법과 대괄호 표기법을 모두 사용 가능. =>

     대괄호 표기법(bracket notation)

 

1-2) 프로퍼티 추가 방법

 

  person.height = 169; 이런식으로 프로퍼티를 추가할 수 있음.

 

1-3) 프로퍼티 삭제 방법

 

  delete person.height; => delete라는 keyword를 이용하여 169라는 value 값이 삭제됨.

 

2. new Object() => Object라는 class를 이용하여 객체 만들기

 

3. Object.create(); => Object라는 class 안에 있는 create라는 함수를 이용하여 객체 민들기

 

 

- 객체 동적으로 접근하기

 

 

마침표 표기법을 사용하면 객체에 정적으로 접근됨. => 코드를 작성하는 시점에 이미 어떤 property에 접근하는지 확인 가능

동적으로 속성에 접근하고 싶을 때는 대괄호 표기법을 사용. => getValue 처럼 코드를 실행하는 단계에서 알 수 있음

const obj = {
  name : "승민",
  age : 24,
};

- key값 찾기 -

function getValue(obj, key) {
  return obj[key];
  // obj 객체 안에는 key라는 key 이름이 존재하지 않아, obj.key로 접근시 오류가 남.
}

console.log(getValue(obj, "name"));
// obj 오브젝트의 name ket 값의 value 값을 찾을 수 있음.


- key값 추가하기 -

function addKey(obj, key, value) {
  obj[key] = value;
}

console.log(addKey(obj, "job", "doctor"));
// 이렇게 하면 기존에 없던 key 값과 value 값을 생성할 수 있음.


- key값 삭제하기 -

function deleteKey(obj, key) {
  delete obj[key];
}

console.log(deleteKey(obj, "name"));
// 이렇게 하면 기존에 있던 obj 객체 안에 있는 name이라는 key 값의 value 값을 삭제할 수 있음.


※ key값 찾기에는 return이 쓰이고 key값 추가나 key값 삭제에는 return이 따로 안 쓰인 이유 :

'return문'을 사용한다는 건 함수를 종료하고 호출한 곳으로 이동.

1. getValue 함수에서는 return을 사용해야 함.
=> console.log(getValue(obj, "name")); 이 값("승민")을 구해야 하기 때문.

2. addKey 함수에서는 return을 굳이 사용할 필요 없음
=> value 값을 추가하고 함수 안에 머물러도 되기 때문.

 

 

- 객체 축약 버전

 

key 값과 value가 가르키고 있는 변수의 이름이 똑같다면 생략하고 한 번만 쓸 수 있음.

 

[ 객체 ]

const coordinate = { x, y }; => {  x : x, y : y };

[ 함수 ]

function makeObj(name, age) {
  return {
    name : name, => name,
    age : age, => age,
  }
}

 

 

- 객체 안의 함수

 

객체 안에 프로퍼티로 사용되는 함수는 메소드(method : 방법, 행동)라고 함.

객체는 서로 연관된 정보와 함수(메소들)들을 묶어서 관리할 수 있음.

 

const apple = {
  name : "apple",
  display : function () {
    console.log(`${this.name} : 🍎`);
    // 여기서 this는 이 객체의 이름을 뜻함.
  }
}

apple.display();
=> apple : 🍎

 

 

- 생성자 함수

 

const apple = {
  name : "apple",
  display: function(){
    console.log(`${this.name} : 🍎`);
  },
}

const orange = {
  name : "orange",
  display: function(){
    console.log(`${this.name} : 🍊`);
  },
}

 

너무 비슷한 양식이지만 종류가 달라질 때마다 객체를 반복적으로 생성해야 해서 번거로움. (ex: apple, orange)

번거롭지 않고 간편하게 사용하기 위하여 생성자 함수를 사용.(공통적인 구조를 가진 객체 생성)

정해진 템플릿을 이용해서 내가 원하는 정보만 전달해주면 기본적인 골격을 가져가면서 만들어줌.

 

const object = new Function();

 

1. 생성자 함수의 이름은 첫 시작은 대문자로 해야함 (ex: Fruit)

 

2. 매개변수로 key 이름들을 받음.

 

// 생성자 함수

function Fruit(name, emoji) {
  this.name = name;
  this.emoji = emoji;
  this.display = () => {
    console.log(`${this.name}: ${this.emoji}`);
  };

  // return this; // 생략가능 - 생략하면 자동으로 this가 return됨.
}

const apple = new Fruit('apple', '🍎');
const orange = new Fruit('orange','🍊');

console.log(apple);
console.log(orange);
console.log(apple.name);
console.log(apple.emoji);
apple.display();