[JS | 개념정리 ] object

참조 영상🎬 / 참조 사이트🔗

1. Objects(객체)

object = {key:value}의 집합체

• 자바스크립트 데이터 타입 중 하나
• 연관된 데이터나 기능의 모음
• 다양한 키 모음, 더 복잡한 엔터티를 저장하는 데 사용

---

2. 오브젝트를 사용하는 이유

primitive type은 변수 하나 당 값을 하나만 할당 할 수 있다
따라서 인자가 많아지면 관리가 어렵다

const name = "user";
const age = 4;
function print(name, age) {
  console.log(name);
  console.log(age);
}

---

3. Literals and propertiess

오브젝트 생성 방법

//object literal syntax
const obj1 = {};
//object constructor syntax -> new를 이용해서 생성
const obj2 = new Object();

자바스크립트는 dynamic typing language로 동적으로 타입이 runtime 때 결정

const user = { name: "jim", age: 999 };
// property 추가
user.hasJob = true;
// property 삭제
delete user.hasJob;

그래서 이렇게 나중에 하나의 property를 추가할 수 있음
이때 property는 우리가 접근할 수 있는 변수를 말함

property: name,  property가 가진 값: jim

단 이렇게 사용할 경우 유지, 보수가 어렵고 생각치 못한 에러가 발생할 수 있음(가능한 피하자!)

---

4. Computed properties(계산된 프로퍼티)

데이터에 접근할 때

const user = { name: "jim", age: 999 }; 
console.log(user.name); //1. 일반적인 경우
console.log(user['name']); // 2. Computed properties
// 단 프로퍼티는 string 타입이어야 함

user['hasJob'] = true;
console.log(user.hasJob); // true

log값은 같지만 차이가 있음

1. 코딩하는 그 순간 그 키에 해당하는 값을 받아오고 싶을 때
2. 정확하게 어떤 키가 필요한지 모를때 즉, 런타임에서 결정될 때 ➡️ 실시간으로 원하는 키의 값을 받아오고 싶다!

// 사용자에게 키를 input깂으로 받는 경우
function printValue(obj,key){
  console.log(obj[key]); // 어떤 키를 받을지 아직 모름
}
printValue(user,'name') // jim
printValue(user,'age') // 999

➡️ 동적으로 키에 관련된 value를 받아와야할 때 유용하게 쓸 수 있음!

---

5. Property value shorthand

const person1 = {name: 'bob', age: 1};
const person2 = {name: 'steve', age: 2};
const person3 = {name: 'dave', age: 3};
const person4 = makePerson('jimmy',7);

function makePerson(name, age){
  return{
    // key와 value가 동일하다면 생략 가능하다
    name, // name = name
    age // age = age
  };
}

console.log(person4); // { name: 'jimmy', age: '7' }

---

6. Constructor Function(생성자 함수)

: 객체를 생성하는 역할을 하는 함수

// 함수명은 대문자로 시작
function Person(name, age) {
  //this = {};
   this.name = name,
   this.age = age;
  //return this;
}
const person5 = new Person('james',50);

---

7. in operator

: 해당 오브젝트 안에 키가 있는지 확인하는 것

// const user = { name: "jim", age: 999 }; 
console.log("name" in user); //t
console.log("address" in user); //f
console.log(user.address); //undefined

---

8. for..in vs for..of

// for (key in obj)
// for문을 돌 때 마다 user가 가지고 있는 키들이 key라는 지역변수에 할당 됨
for (key in jaman) {
  console.log(key); // name, age, hasJob
}

// for (value of iterable)
// 오브젝트가 아니라 배열, 리스트같이 순차적으로 iterable한 데이터에 씀
// for문을 돌 때 마다 arr1dl 가지고 있는 값이 value라는 지역변수에 할당 됨
const arr1 = [1, 5, 6, 2];
for (value of arr1) {
  console.log(value);
}

---

9. cloning

// Object.assign(dest, [obj1, obj2, obj3...])
const people = { name: "jam", age: "20" };
// people의 메모리에는 레퍼런스가 들어있음 (jam, 20이 어디있는지)
// user2에도 동일한 레퍼런스가 할당됨
const user2 = people; 
user2.name = 'coder';
console.log(people, user2); // coder 20, coder 20

레퍼런스가 아닌 오브젝트를 진짜 복제할 수 있는 방법은?

// old way
const user3 = {};
for (key in people) {
  user3[key] = people[key];
}
console.log(user3); // coder 20

// Object.assign(타겟, 복사하고자 하는 것); 
Object.assign(user4, people); 
console.log(user4); // coder 20
// another way
const user5 = Object.assign({}, user);  

another example

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

//assign은 동일한 프로퍼티가 있다면 뒤에 것이 값을 게속 덮음
console.log(mixed.color); //blue
console.log(mixed.size); //big\