Object란?

Primitive type은 변수 하나당 값을 하나만 담을 수 있다.

const name = "solmi";
const age = 26;

print(name, age);

function print(name,age) {
 대충 함수
}

그래서 이렇게 이름과 나이를 출력하려면 이름과 나이를 각각 파라미터로 전달해야 하고, 함수도 그만큼 길어진다.

⇒ 관리도 힘들고 가독성도 좋지 않다! 그래서 사용되는것이 바로 Object!!

---

1. Literals properties

object는 { key : value } 로 구성되어진다!

object literal

const solmi = { name: "solmi", age: 26 };
print(solmi);

{ }를 이용해 object를 정의하는 것을 말한다.
dot notation .으로 속성값에 접근할 수 있다.

Javascript는 dynamic typed language이다.
그래서 다른 프로그래밍 언어에서는 일반적이지 않은 다양한 상황이 일어난다.

한 예로, object를 정의한 후에 다른 값을 뒤늦게 추가하거나 삭제할 수도 있다!

solmi.likeChicken = true; ⇒ solmi object를 출력하면 solmi, 26, true 가 출력된다.
delete solmi.age; ⇒ solmi object를 출력하면 solmi, true 가 출력된다.

💁🏻‍♀️ trailing comm

말 그대로 콤마 , 를 마지막에 붙이는걸 의미한다.
다른 언어는 에러가 뜨겠지만 JavaScript에서는 가능하다.
object의 property 순서를 바꿀 때 유용하지만, 사용하고 안하고는 취향의 차이이다.
가장 중요한건 협업시의 코딩 컨벤션이나 코드의 통일성을 지키는 것이다.

---

object constructor

const solmi = new Object();

new 키워드와 함께 사용하는 함수를 생성자(constructor)라고 부른다.

---

2. Computed properties

solmi.name; // 이렇게 호출하거나
solmi["name"]; // 이렇게 호출 가능!

Object.keys(solmi); // solmi 오브젝트의 key 값만 가져오기
Object.Values(solmi); // solmi 오브젝트의 value 값만 가져오기

[solmi.name;](http://solmi.name) 이 훨씬 편할 것 같은데, [ ] 는 언제 쓸까?

[ ] 안에는 변수가 들어갈 수 있다!

let plan1 = {   
  name: "Basic"
};
let propertyName = "name";
console.log(plan1[propertyName]); // Basic

⇒ 변수를 선언해서 name이라는 property에 이렇게 접근할 수도 있다.

object["key"]

const solmi = { name: "solmi", "a-2": 1234, "  ": 5678 };

console.log(solmi.name); // solmi
console.log(solmi["name"]); // solmi
console.log(solmi[name]); // undefined
console.log(solmi.a-2); // NaN
console.log(solmi."a-2"); // error
console.log(solmi["a-2"]); // 1234
console.log(solmi["  "]); // 5678

object 안에 있는 값에 접근할때는 . 을 이용했는데, [" "]을 이용해서 string 형태로도 접근이 가능하다.

예를 들어 "a-2", "123", " " 같은 propertie는 . 으로 전달할 경우 undefined 혹은 error 가 발생할 수 있다.

이 때 object["key"] 를 이용하면 객체의 속성값이 " "으로 감싸진 문자열이기에 정상적으로 출력이 가능하다.

object ["key"]를 이용해서도 뒤늦게 추가, 삭제가 가능하다.

solmi["longHair"] = true;
delete solmi["name"];

---

object[key]

• . : 코딩하는 그 순간, Key에 정확히 해당하는 vlaue를 받아오고 싶을때 사용 ⇒ 평소에는 . 을 사용
• [ ] : 정확하게 어떤 key가 필요한지 모를 때, 즉 vlaue가 런타임에서 결정될 때 사용

function printValue(obj, key) { // key : 사용자에게 input으로 전달받을 정보(아직 어떤 정보인지는 모름)
  console.log(obj.key); // undefuned
  console.log(obj[key]; // solmi
}

printValue(solmi, "name");

예를 들어, 위 함수에서 key 는 사용자에게 전달받을 예정인 정보라면, 당장 지금은 정해진 value가 없게 된다!

이 때, obj.[key] 로 작성하면 나중에 값이 들어오게되면 key의 속성값이 값이 출력된다!

많이 쓰이는 객체 구조! 객체의 객체의 배열의 객체.....🤪?

let objData = {
  name: 50,
  address: { 
    email: "gaebal@gmail.com",
    home: "위워크 선릉2호점"
  },
  books: {
    year: [2019, 2018, 2006],
    info: [{
      name: "JS Guide",
      price: 9000
    }, {
      name: "HTML Guide",
      price: 19000,
      author: "Kim, gae bal"
    }]
  }
};
let bookName = objData.books.info[1].name; // bookName변수는 objData객체 안에 books라는 객체 안에 info 배열의 1번 index위치인 객체 안에 name property!
console.log(bookName); // HTML Guide

---

3.Property shorthand (단축 속성명)

const name = "What's your name?", age = "How old are you?";

const person1 = { name: "What's your name?", age: "How old are you?" };
const person2 = { name, age };

단축 속성명은 key 값과 vlaue의 값이 같으면, key, value의 값을 각각 표기하지 않고 한번만 표기하는것을 말한다.

person2 는 { name, age }만 입력했지만, 사실은 { name: name, age: age } 인것! (콘솔창을 보면 알 수 있다!)

---

4. Constructor function

function Person(name, age) { // object를 생성하는 함수는 변수와 다르게 대문자로 시작하는게 관례
  // 사실은 this = {}; 가 생략된것
  this.name = name;
  this.age = age;
  // 사실은 return this; 이 생략된것
}

const solmi = new Person("solmi", 26);

Class는 새롭게 추가된 기능이 아닌, 기존에 존재하던 프로토타입을 기반으로 OOP에 친숙한 모양으로 문법만 바뀐 syntactic sugar 라고 말했었는데, Constuctor function과 prototypal inheritance가 그 프로토타입에 해당한다.

class가 나오기 전에 많이 사용했던 방식이며, 다른 계산을 하지 않고 순수하게 object만 생성하는 함수가 된다.

class나 Constuctor function등은 겉보기에만 다를뿐, 실제 뒷단에서 돌아가는것은 똑같다.
(prototypal inheritance는 다음에 정리...)

---

5. in operator

console.log("name" in solmi); // true
console.log("job" in solmi); // false
console.log(solmi.job); // undefined

object안에 해당 key가 있는지 간단하게 확인하는 키워드

---

6. Cloning

const user = { name: "solmi", age: "26" };
const user2 = user;

⇒ user2 = user 같은 허접한 방법 말고 object를 그대로 복사하는 방법은 어떤것들이 있을까??

옛날 st

const user3 = {}; // 빈 배열 생성
for (key in user) {
  user3[key] = user[key];
}

빈 user3 안에 복사하고자 하는 user의 값을 for..in으로 계속 처음부터 끝까지 반복해서 넣어주기

요즘 st

const user4 = {}; // 빈 배열 생성
Object.assign(user4, user);

const user4 = Object.assign({}, user); // 이렇게 한줄로도 작성 가능 ( 위 코드와 같은 내용)

Object.assign(target, source) : 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용하고, 대상 객체를 반환한다.

이건 MDN 공식 설명이고, 쉽게 말하면 객체 병합이다.

user을 복사하여 user4에 붙여넣은것 같지만, 사실은 user와 user4가 병합된것이며, 병합된 대상인 user4가 반환된것!
그렇기에 복사로 사용하고 싶으면 반드시 빈 배열을 생성해줘야 한다!

또, 객체 복사가 아니라 객체 병합인 이유는,

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

이 예시를 보면 알 수 있다!

뒤에 나온 객체 (fruit2) 일수록, 앞에 동일한 프로퍼티가 있다면 그 값을 덮어씌워 버린다.