JavaScript DAY06 (2022.11.08)

/* JavaScript DAY06 2022.11.08 */

/* 생성자 함수 --------------------------------------------------------------------- */

// 아래와 같은 것을 객체 리터럴이라고 한다.
let user = {
  name: 'Joonyoung',
  age: 30,
}

// 하지만 비슷한 객체 여러개 사용해야 하는 경우에는 생성자 함수 써서 사용한다.
function /* 첫글자는 대문자로 */ User(name, age){
  this.name = name;
  this.age = age;
}

// new 연산자를 사용해서 순식간에 비슷한 객체를 만들어 낸 것을 볼 수 있다.
let user1 = new User('Cho', 26);
let user2 = new User('Joon', 25);
let user3 = new User('Young', 24);
console.log(user1);
/* 결과: User {
  name: 'Cho',
  age: 26,
  }
} */
console.log(user2);
/* 결과: User {
  name: 'Joon',
  age: 25,
  }
} */
console.log(user3);
/* 결과: User {
  name: 'Young',
  age: 24,
  }
} */

// 생성자 함수의 동작 과정은 new 함수명();을 실행하면, 일단 빈 객체를 만들고, this에 할당한다.
// 함수 논문을 실행하면서 this에 프로퍼티들을 추가하고, this를 반환한다.
// 아래를 보면 알겠지만, 주석 처리한 두가지의 코드가 생략 된 것을 볼 수 있다.
// 어떤 함수든 new를 선언하는 순간 아래의 방식으로 알고리즘이 동작한다. (또한 첫번째 이름은 대문자로 하는 것이 관례)
function Test(name, age){
  // this = {}
  
  this.name = name;
  this.age = age;
  
  // return this;
}

/* Object - Computed property --------------------------------------------------------------------- */
let a = 'age';

const computedProperty = {
  name: 'Joonyoung',
  // 'age' 대신 [a]를 사용하면 배열이 아닌, 변수 a에 할당 된 값이 들어간다. 이런걸 '계산된 프로퍼티'라고 한다.
  [a]: 30,
  // 혹은 아래와 같이 식 자체를 넣어서, 사용 할 수도 있다.
  [1 + 4] : 5,
  ["안녕" + "하세요"] : "hello"
}

/* Object - methods --------------------------------------------------------------------- */

// Object.assign(): 객체 복제
const assignObject = {
  name: "Joonyoung"
}
// 위의 객체를 아래와 같이 한다고 복제가 되는것이 아니다. assignObject 객체의 참조 값만 복사되는 것이다.
const cloneAssign = assignObject;
// 동일하게 복제하려면 assign을 사용해야한다. 앞의 {}(빈 객체)는 초깃값이다. 따라서 빈 객체에 assignObject가 병합(복제)되는 것이다. 
const cloneAssign2 = Object.assign({}, assignObject);


// Object.keys(): 키를 배열로 반환
const keysObject = {
  a: 'a',
  b: 1
}
Object.keys(keysObject)
// 결과: [ 'a', 'b' ]


// Object.values(): 값을 배열로 반환
const valuesObject = {
  a: 'a',
  b: 1
}
Object.values(valuesObject)
// 결과: [ 'a', 1 ]


// Object.entries(): 키와 값을 배열로 반환
const entriesObject = {
  a: 'a',
  b: 1
}
Object.entries(entriesObject)
// 결과: [ [ 'a', 'a' ], [ 'b', 1 ] ]


// Object.fromEntries(): 키와 값의 배열을 객체로 반환
const arr = [
  ["name","Joonyoung"],
  ["age", 26]
];
Object.fromEntries(arr)
// 결과: { name: 'Joonyoung', age: 26 }