자바스크립트 중급 - 2. 생성자 함수와 객체 메서드, 계산된 프로퍼티

2_1. 생성자 함수

• 비슷한 객체를 여러개 만들어야하는 상황에서 쓰이는 것이 바로 생성자 함수

let user = {
name : 'kim',
age : 2
}

• 생성자 함수는 첫 글자는 대문자로 하며 new 연산자를 활용해서 호출한다.
• 생성자 함수가 붕어빵 틀이면 해당 틀에 필요한 재료들, 여기너 name, age의 인자를 넣고 여러개의 붕어빵을, 즉 객체들을 만들어낼 수 있다.

function User(name,age){
  this.name = name;
  this.age = age;
}
let user1 = new User('min',21)
let user2 = new User('jae',24)
let user3 = new User('kim',25)

동작원리

• 생성자 함수의 동작원리는 다음과 같다.
• new 함수 명() 실행하면 함수 내부에 빅 객체를 만들어 this에 할당후 함수 본문을 실행하면서 this에 프로퍼티들을 차례대로 할당 후 마지막으로 this를 반환
• 프로퍼티에 함수를 할당해 메소드로 활용할 수 도 있다.

function User(name,age){
  this = {} // 이 두 코드는 실제 코드엔 없음 
	this.name = name;
  this.age = age;
  this.sayName= function(){
  console.log(this.name)
  }
  return this; // 이 두 코드는 실제 코드엔 없음 
new 함수명();
 let 유저 = new User('kim',25)
 유저.sayName() // 'kim'

2_2. 계산된 프로퍼티

• 변수 a를 프로퍼티에 할당, 이를 계산된 프로퍼티라하며 식 자체를 넣을 수 도 있다.

let a = 'age'
let user = {
name = 'kim',
[a] = 2,
  [1+4] : 5 
}

객체에서 자주 쓰이는 메소드

1. Object.assign()은 객체 복사

let user = {
name : 'kim',
age : 2
}
const cloneUser = user; // x

• 유저 변수에는 객체 자체가 아닌 객체가 들어가 있는 메모리 주소인 객체 대한 참조값이 저장되어 클론 유저를 만들어 유저를 넣어도 그 참조값만 복사가 된다.
• 이렇게 되면 하나의 객체를 두 변수가 접근하여 유저의 이름을 바꾸어도 클론 유저의 이름도 바뀌게 된다.

let user = {
name : 'kim',
age : 2
}
const cloneUser = Object.assign({}, user); // x

• 따라서 동일하게 복제를 해야할 시 Object.assign 메소드를 사용해야한다. 첫 번째 인자엔 초기값, 빈 객체가 들어오고 두번 째 매개변수로 들어온 객체들이 초기값에 병합된다.
• 만약 병합 시 초기값 객체에 키가 겹치면 덮어 쓰이게 되며 두 개 이상의 객체를 합칠 수 도 있다.

2. Object.keys()은 키 배열 반환

3. Object.values()은 값 배열 반환

4. Object.entries()은 키/값 배열 반환

5. Object.fromEntries()은 키/값 배열을 반대로 객체로