7.object

1. Object란 ?

• 자바스크립트의 데이터 타입 중 하나이다.

• 자바스크립트 안에 거의 모든 객체들은 객체를 인스턴스하고 있다.

• 객체는 키와 value 값으로 구성되어있는 있다.

• 관련된 데이터 그리고(또는) 기능들의 모음이다.

1.1 Object를 만드는 방법

const obj1 = {}; //'object literal' syntax
const obj2 = new Object(); //'object contructor' syntax

• 반드시 Object 생성자 함수를 이용해 빈 객체를 생성해야 하는것은 아니다. 객체를 생성하는 방법은 객체 리터럴을 사용하는 것이 더 간편하다 Object 생성자 함수 방식은 특별한 이유가 없다면 그다지 유용해 보이지는 않는다.

• 사실 객체 리터럴 방식으로 생성된 객체는 결국 빌트인함수인 Object 생성자 함수로 객체를 생성하는 것을 단순화시킨 축약표현이다. 따라서 개발자가 일부러 Object 생성자 함수를 사용해 객체를 생성해야 할 일은 거의 없다.

1.2 Object의 Magic

: javascript는 dynamically typed language이기 때문에 properties(key 와 value) 를 나중에 추가, 삭제할수도 있다.

function print(person) {
  console.log(person.name);
  console.log(person.age);
}

const ellie = { name: "ellie", age: 4 };
print(ellie);

ellie.hasjob = true;
delete ellie.hasjob;

2. 객체 프로퍼티 접근

2.1 객체 프로퍼티에 접근하는 방법

• 1. 정확하게 key에 해당하는 값을 받아오고 싶을때
     • obj.key
• 1. 우리가 정확하게 어떤 key가 필요한지 모를때 사용하는 방법
     • obj[‘key’];

const ellie = { name: "ellie", age: 4 };

function printValue(obj, key) {
  console.log(obj.key); //undefined , undefined
  console.log(obj[key]); // ellie , 4
}

printValue(ellie, "name");
printValue(ellie, "age");

Key는 항상 String 값으로 넣어주어야한다.

그렇다면 printValue의 파라미터를 string이 아닌값으로 넣으면 되지 않을까??

const ellie = { name: "ellie", age: 4 };

function printValue(obj, key) {
  console.log(obj.key);
  console.log(obj[key]);
}

printValue(ellie, name); //name이 선언되지 않음
printValue(ellie, age); //age가 선언되지 않음

3. 생성자 함수와 일반함수 그리고 객체

객체 리터럴 방식과 Ojbect 생성자 함수 방식으로 같은 의미를 담은 객체를 여러개 생성하는것은 불편하다. (Object 생성자 함수 방식은 잘 사용하지 않으므로 예시에서 제외시키겠다.)

• bad example

const person1 = { name: "job", age: 2 };
const person2 = { name: "steve", age: 5 };
const person3 = { name: "young", age: 7 };

• good example

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

const person4 = makePerson("hi", 4);

• property value shorthand : 키와 value값이 동일하다면 하나만 적어주어도 똑같음

function makePerson(name, age) {
  return {
    name,
    age,
  };
}

const person4 = makePerson("hi", 4);

옛날에는 이렇게 일반함수를 사용해서 만들었지만, Javascript에 Class가 나오고부터 이렇게 순수하게 object를 생성하는 함수들은 생성자 함수를 사용해서 만드는것이 일반적이다.

• best example:생략된부분이 무엇인지 아는것도 중요하다

function Person(name, age) {
  // (생략된 부분) this={} 인 빈 객체를 만듬
  this.name = name;
  this.age = age;
  // (생략된 부분) return this;
}

const person4 = new Person("hi", 4);

• 일반함수를 new로 선언할경우 생성자 함수가 되는데, 이를 방지하기 위해 생성자 함수의 이름의 첫글자를 대문자로 표기함으로써 생성자 함수와 일반 함수를 구분하기로 햇다.

4. 객체안에 키가 있는지 없는지를 확인하는 방법

const ellie = { name: "ellie", age: 4 };

console.log("name" in ellie); //true

5. for-in and for-of

const ellie = { name: "ellie", age: 4 };

for (const prop in ellie) {
  console.log(typeof prop); // string
  console.log(ellie[prop]);
  console.log(ellie.prop); // undefined가 된다. 그 이유는 앞에서 설명햿듯이 dot(.)을 쓰는경우는 정확하게 key에 해당하는 값을 받아오고 싶을때 사용하는데, 객체의 프로퍼티에는 순서가 없기 때문에 우리가 확실하게 원하는것을 얻기가 어렵기 때문이다.
}

• for-in문은 객체의 문자열 키(key)를 순회하기 위한 문법이다. 하지만 배열에는 사용하지 않는것이 좋다.

  • 1.객체의 경우 프로퍼트의 순서가 보장되지 않은다. 그 이유는 원래 객체의 프로퍼티에는 순서가 없기 때문이다. 배열은 순서를보장하는 데이터 구조이지만 객체와 마찬가지로 순서를 보장하지 않는다.

  • 2.배열요소들만은 순회하지 않는다.

• 이런 for-in문의 단점을 극복하고자 for-of문이 등장하게 되었다. for-of문은 배열의 요소를 순회하기 위한 문법이다.

const array = [1, 2, 3, 4, 5];

for (const value in array) {
  console.log(value); //0,1,2,3,4
}

for (const value2 of array) {
  console.log(value2); //1,2,3,4,5
}

• for-in을 배열에 사용할경우 index를 반환하는 반면 , for-of를 사용할경우 value값을 반환한다.

6. cloning

const user = { name: "ellie", age: "20" };

const user2 = user;
user2.name = "coder";

console.log(user.name); //coder

• cloning 은 객체의 mutable 한 속성의 문제점을 해결하기 위해 등장했다.

6.1 Object.assign() , 어떤 파라미터가 들어가고 어떤게 리턴되든지 직접 찾아보자 , assing()메서드에 들어가보자

"use strict";

const user = { name: "ellie", age: "20" };
const user4 = {};
Object.assign(user4, user);
// const user4 = Object.assign({},user)

user4.name = "yosup";

console.log(user4); // yosup
console.log(user); // ellie

const fruit1 = { color: "red" };
const fruit2 = { color: "blue", size: "big" };
const mixed = Object.assign({}, fruit1, fruit2);

console.log(mixed.color); //blue
console.log(mixed.size); // big

// fruit2가 fruit1을 덮어버리기 때문이다.