본문으로 건너뛰기

JavaScript 치트시트

4. 객체​

4.1 객체 리터럴​

const person = {
  name: '영기',
  age: 30,
  city: 'Seoul',
};
console.log(person);

4.2 속성 접근​

console.log(person.name); // 점 표기법
console.log(person['age']); // 대괄호 표기법

4.3 메서드​

const person = {
  name: '영기',
  greet: function () {
    console.log(`Hello, I'm ${this.name}`);
  },
};
person.greet();

4.4 this 키워드​

const obj = {
  value: 42,
  showValue: function () {
    console.log(this.value);
  },
};
obj.showValue(); // 42

4.5 객체 메서드​

console.log(Object.keys(person)); // ['name', 'greet']
console.log(Object.values(person)); // ['영기', function]
console.log(Object.entries(person)); // [['name','영기'], ['greet', function]]

4.6 깊은 복사와 얕은 복사​

const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);
const deepCopy = JSON.parse(JSON.stringify(original));

4.7 생성자 함수​

function User(name, age) {
  this.name = name;
  this.age = age;
}
User.prototype.greet = function () {
  console.log(`Hi, I'm ${this.name}`);
};
const user1 = new User('영기', 30);
user1.greet();

4.8 클래스와 인스턴스​

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
}
const p1 = new Person('영기', 30);
p1.greet();