https://youtu.be/1Lbr29tzAA8
드림코딩 by 엘리 님의 유튜브 강의를 보며 정리한 내용입니다.

Object

• one of the JavaScript's data types.
• a collection of related data and/or functionality.
• Nearly all objects in JavaScript are instances of Object.
• object = { key : value }
  → key : 우리가 접근할 수 있는 변수인 property
  → value : 그 property가 가지고 있는 값
  

1. literals and properties

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

const name = 'ben';  //변수 name에는 'ben'이라는 string이 들어있고,
const age = 5;       //변수 age에는 number 5가 들어있다.
print(name, age);    //출력하는 함수에는 name과 age각각 parameter로 전달해줘야 한다. 
function print(name, age) { //함수를 정의할 때도 두가지의 parameter를 받아올 수 있도록 만든다.
  console.log(name);
  console.log(age);
}

🤔 이렇게 했을 때의 문제는?
→ 만약 address, full name, last name .. 등 조금 더 인자가 많아지게 되면 추가해야 하는 인자가 굉장히 많아지게 된다. 이렇게 되면 관리하기도 힘들고 logical 하게 그룹으로 묶어서 생각할 수 없어 힘들다.

👏🏻 그래서 이것을 개선하고자 object 를 사용한다!! ✨

1-1. object

function print(person) {  //person이라는 데이터를 받아서 person의 name, person의 age로 처리
  console.log(person.name);
  console.log(person.age);
}

const ben = { name: 'ben', age: 5 };
print(ben);

1-2. object를 만드는 방법

• object literal syntax
• object constructor syntax

① 'object literal' syntax

자바스크립트에서는 class 없이도 {curly braket} 을 이용하여 바로 object를 생성할 수 있다.

const obj1 = {}; 

② 'object constructor' syntax

class를 이용해서 생성할 수 있는데, object를 new라는 키워드로 생성하면, object에서 정의된 constructor이 호출되기 때문에 이런 이름으로 지어졌다.

const obj2 = new Object();

1-3. object의 property 추가,삭제

JavaScript는 Dynamic language. 동적으로 타입이 runtime(프로그램이 동작하고 있을 때)때 결정되는 언어이기 때문에 이게 가능한 것이다. 👌🏻

① property 추가

뒤늦게 하나의 property를 추가할 수 있다.

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

const ben = { name: 'ben', age: 5};
print(ben);

ben.hasJob = true;  // 이렇게 뒤늦게 추가가 가능하다. 
console.log(ben.hasJob); //true

🤚🏻 하지만 이렇게 너무 동적으로 코딩하는 것은 피하는게 좋다 😇

② property 삭제

또한 삭제도 가능하다.

delete ben.hasJob;
console.log(ben.hasJob); //undefined .. 왜냐면 방금 위에서 삭제됐으니까!

2. Computed properties

2-1. 데이터 접근 방식

object 안에 있는 데이터에 접근하는 방식은 두 가지가 있다.

• dot(.)
• computed properties

① dot(.)으로 접근

console.log(ben.name); //ben

② computed properties

배열에서 받아오듯이 접근하는 방법이며, 단 이때 property는 반드시 string 타입으로 써줘야 한다!!! 🚨

//object 안에 있는 변수의 이름을 'string'타입으로 지정해서 받아와야 한다.

console.log(ben['name']); //ben
console.log(ben[name]); //이렇게 string타입으로 적지 않으면 undefined 나온다.

✨ 이 방법으로도 새로운 할당을 해줄 수 있다.

ben['hasJob'] = true; //'string'타입으로 적는거 잊지 말기!!
console.log(ben.hasJob); //true

2-2. dot vs computed properties 🔥

🤔 그렇다면 두 가지 방법 중 어떤 경우에 어떤 것을 쓰는지 차이가 뭘까?

ben.name
→ 코딩하는 그 순간 우리가 그 key에 해당하는 값을 받아오고 싶을 때 사용한다. 그래서 코딩할 때에는 그냥 dot(.)을 써서 하는 게 맞다.
하지만 실시간으로 원하는 key값을 받아오고 싶다면 computed properties를 쓰면 된다.

ben['name']
→ 우리가 정확하게 어떤 key가 필요한지 모를 때! 즉, runtime에서 결정될 때 이 computed properties를 사용한다.

ex

printvalue라는 함수가 있다고 할 때, 이 함수는 object와 key 를 받아서 그 object 에 있는 key에 상응하는 value를 출력하는 함수이다. 그래서 언제 어떤 key를 받을 지 모르는 상황이다. 예를들면 이 원하는 key를 사용자에게 input을 받아서 출력해야되는 함수라면 이 key 는 어떤걸 출력할지 코딩하는 이 시점에는 우린 전혀 모른다. 그래서 여기서 obj.key 라고 하게되면 결과는 undefined가 나오게 된다.

→ 왜냐하면 이 코드 console.log(obj.key) 가 하고 있는 것은, "object에 key라는 property를 출력해줘" 인데, 현재 object에는 key라는 property는 들어있지 않다. ({ const ben = { key: 000, name: 'ben'} )

→ 그래서 이 때에는 computed properties를 사용하는 것이다.
나중에 동적으로 key에 관련된 value를 받아와야 될 때 유용하게 쓰일 수 있다. 👌🏻

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

printValue(ben, 'name'); //ben    *이제 정상적으로 출력이 된다*
printValue(ben, 'age'); //5       *이제 정상적으로 출력이 된다*

3. Property value shorthand

key와 value의 이름이 동일하다면 앞부분을 생략할 수 있는 기능이 있다.

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

//이제 위에 있는 함수를 property value shorthand로 생략해보면,,

function makePerson(name, age) {
  return {
    name,
    age,
  };
}
// 이렇게 작성해 줄 수 있다.

✨ class가 없던 시절에, 위 함수 방식으로 object를 생성했었다.

const person = makePerson('sting', 25);
console.log(person); // {name: 'sting', age: 25} 

4. Constructor function

방금 위에서 만든 함수makePerson 처럼 계산은 하지 않고 순수하게 오브젝트를 생성하는 함수들을
→ constructor function 이라고 부른다.

• 대문자로 시작하도록 함수를 만든다.
• return이라는 값을 하지 않고 this.name = name; 이런 식으로 써준다.
• 앞 뒤에 this.{} / return this; 가 생략되어 있다.

function Person(name, age) {
  // this.{}			새로운 object를 만들어서
  this.name = name;		//this에다가 name이라는 새로운 property를 넣고
  this.age= age;		//this에다가 age라는 새로운 property를 넣고
  //return this;		결국은 이 this를 return하는 함수인 것이다.
}

• 그리고 호출할 때에도 class에서 object를 만드는 것처럼 해준다.

const person2 = new Person('mark', 23);

//(비교) const person = makePerson('sting', 25);

👏🏻 이렇게 하면 JavaScript 엔진이 알아서 object를 생성해준다!

5. in operator

in operator : property existence check, 해당하는 object 안에 key가 있는지 없는지 확인하는 키워드이다.

console.log('name' in ben); //true
console.log('age' in ben); //true
console.log('random' in ben); //false  ..이렇게 정의하지 않은 key를 넣으면 false 반환

6. for..in vs for..of 🔥

6-1. for (key in obj)

ben이 가지고 있는 key들이 {block}을 돌 때마다 key들이 하나씩 key라는 지역변수에 할당된다.
그래서 모든 key들을 받아와서 처리하고 싶을 때 for in을 쓰면 좋다 .

/*
const ben = {
	name: 'ben',
    age: 5,
    hasJob: true,
}
*/

for (key in ben) {
  console.log(key);
}
//name
//age
//hasJob

6-2. for (value of iterable)

for of 는 object 를 쓰는 것이 아니라 배열과 같은 '배열 리스트' (=순차적으로 iterable한) 것을 쓴다.

const array = [1, 2, 4, 5];
for (value of array) {
  console.log(value);
}
//1
//2
//4
//5

/* (참고) 예전에는 이렇게 for loop를 이용해서 했었는데, 이제는 for of를 사용하는게 훨씬 좋다!
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}
*/

→ 이렇게 하면 array 에 있는 모든 값들이 value에 할당 되면서, {블럭} 안에서 순차적으로 출력하거나 값을 계산할 수 있다.

7. cloning

7-1. 할당

const user = { name: 'ben', age: 17 };   //user 에 object를 만들어 놓고
const user2 = user;			 //user2가 user를 가리키게 했다.

🤔 그럼 이때 메모리의 상태는?
변수 user가 가리키고 있는 곳의 메모리에는 reference가 들어 있고, 이 reference가 실제로 name: 'ben', age: 17 이라는 object를 가리키고 있다. 그래서 user2에 user를 할당했으니, user안에 들어있는 reference값이 user2에도 동일하게 할당 되어 있다.
그러므로 user2에도 동일한 reference가 들어있는 것이고, 결국 똑같은 ben 의 object를 가리키고 있다.

🤚🏻 여기서 만약 user2의 이름을 'honey'로 바꾼다면, user의 name은 무엇으로 되어있을까?

user2.name = 'honey';
console.log(user); // {name: 'honey', age: 17}   ... ben이 honey로 바뀌었다!
//왜냐하면 같은 곳을 가리키고 있던 거였으니까, 같이 바뀐다!

🤔 그럼 진짜로 정말 object를 복.제 할 수 있는 방법은? 👉🏻 assign()

7-2. Object.assgin()

Object는 자바스크립트에 있는 기본적으로 탑재되어있는 오브젝트 중 하나이고, 그리고 자바스크립트에 있는 모든 오브젝트는 이 object를 상속한다. ✨

방법 ①

const user4 = {};  //1. 타겟을 만든다. (텅텅 비어져 있는 것을 정의한다.)
Object.assign(user4, user) //2. (방금 만든 user4를 먼저 전달하고, 바로 복사하고자 하는 object도 전달)

console.log(user4); // { name: 'honey', age: 17 }

방법 ②

//혹은 위에서 했던 1번과 2번을 한번에 해줄 수 있는 방법도 있다.  ... 두 개가 섞인 게 return 되니까
const user4 = Object.assign({}, user); // return값을 받아서 바로 할당시킨다.

console.log(user4); // { name: 'honey', age: 17 }

🤔 만약 clone 하려는 소스를 여러개 전달하면?

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

console.log(mixed.color); //green  *뒤에 나오는 소스일수록 값을 계속 덮어 씌우기 때문이다.*
console.log(mixed.size); //big