JavaScript 10장 - 개념짚기 (4)

JavaScript

생성자 함수

• 장바구니 등의 기능을 만들 때 여러 개의 객체를 반복해서 만들어야 하는 경우가 있는데 이때, 생성자 함수를 사용할 수 있다.
• 함수의 첫 글자는 대문자로 작성하고 new 연산자를 사용해서 호출한다.
• 생성자 함수는 빈 객체인 this를 생성하고, 이 객체 안에 프로퍼티를 추가한 후 생성된 객체를 리턴한다.
  • 실제로

let user1 = {
  name: "John",
  age: 21,
};

function Users(name, age) {
  // this = {}
  this.name = name;
  this.age = age;
  // return this
}

let user2 = new User("Mike", 31);
let user3 = new User("Jane", 25);

• 위 코드에서 user2로 만들어진 객체의 this는 user2를 지칭한다.

function Users(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function () {
    console.log(this.name);
  };
}

user2.sayName(); // Mike

객체 메서드

computed property

• 대괄호로 변수를 묶어주면, 변수에 할당된 값이 문자열이 아닌 객체에 key로 들어간다.
• 이를 computed property(계산된 프로퍼티) 라고 한다.
• 식 자체를 넣는 것도 가능하다.

let a = "age";

const user = {
  name: "Mike",
  [a]: 30, // age : 30
};

const item = {
  [1 + 2]: "shoes",
  ["아이템" + "이름"]: "신발",
};

assign

• 객체를 복제할 떄 사용한다.
• 객체를 할당할 땐, 변수에 대한 주솟값이 저장되며, 저장된 주솟값의 값을 공유하기 때문에 복제가 아닌 참조할 뿐이다.
• 구조는 첫 번째 인자에 들어갈 곳(초깃값)을 만들고, 이후의 인자는 초깃값에 복사된다.
• Object.assign({}, user) = {} + {name: "Mike", age: 30}
• 초기값에 값을 추가할 수도 있다.
• 병합을 할 때, 키가 같다면 덮어쓰게 된다.

const user = {
  name: "Mike",
  age: 30,
};

const cloneUser = user;
cloneUser.name = "Jane";
user; // {name: "Jane", age: 30}

const reCloneUser = Object.assign({}, user);
reCloneUser.name = "Mike";
user; // {name: "Jane", age: 30}

const addGender = Object.assign({ gender: "male" }, user);
addGender; // {gender:"male", name:"Mike", age: 30}

const addUsers = Object.assign(user, reCloneUser, addGender);
addUsers; // {name: "Mike", age: 30, gender: "male" }

keys

• 객체의 key를 배열로 반환한다.

values

• 객체의 value를 배열로 반환한다.

entries

• 객체의 key와 value를 묶어 배열로 반환한다.

const user = {
  name: "Mike",
  age: 30,
  gender: "male",
};

Object.entries(user);
// [["name","Mike"], ["age",30], ["gender","male"]]

fromEntries

• entries와 반대로 키와 값이 묶인 배열을 넣어주면 객체로 만들어준다.

const user = [
  ["name", "Mike"],
  ["age", 30],
  ["gender", "male"],
];
Object.fromEntries(user); // {name:"Mike",age:30,gender:"male"}