Javascript Object(참조 타입)

Javascript Object

객체 생성 방법

Object 리터럴

const kim = {
  name: "kim",
  age: 10,
  job: "Student",
};

• 가장 간단한 객체 생성 방법.
• 속성과 값을 중괄호 '{ }' 안에 key - value 쌍으로 정의

Object() 생성자

// Object 생성자를 사용해 객체를 생성.
const park = new Object();

객체 속성 접근 및 수정

const person = {};
console.log(person.name); // undefined
person.name = "KimJinYoung";
console.log(person.name); // 'KimJinYoung'
person["age"] = 20;
console.log(person.age, person["age"]); // 20 20

점 표기법 ' . '과 대괄호 표기법 '[ ]' 을 사용해 객체의 속성에 접근 및 수정 가능.

속성 삭제

// delete person.name;
if (person.name) {
  console.log(person.name); // 'KimJinYoung'
  console.log(person["name"]); // 'KimJinYoung'
}
if ("name" in person) {
  console.log(person.name); // 'KimJinYoung'
  console.log(person["name"]); // 'KimJinYoung'
}
if ("name" in person) {
  console.log(person.address); // undefined
  console.log(person["address"]); // undefined
}

• delete 키워드를 사용해 객체의 속성 삭제 가능.
• in 연산자를 사용해 객체에 특정 속성이 존재하는지 확인 가능.

객체 구조 분해 (Object Destructuring)

const person2 = {
  name: "Kim",
  age: 26,
};
console.log(person2.name); // 'Kim'
console.log(person2["name"]); // 'Kim'
console.log(person2.address); // undefined
console.log(person2["address"]); // undefined

person2.name = "김진영";
console.log(person2.name); // '김진영'

const { name, age } = person2;
console.log({ name, age }); // {name: '김진영', age: 26}

const dog = {
  name: "choco",
  age: 2,
};
const { name: dogName, age: dogAge } = dog;
console.log({ dogName, dogAge }); // {dogName: 'choco', dogAge: 2}

• 객체 속성을 쉽게 추출하여 변수로 사용할 수 있음.
• 새로운 변수 이름으로 추출 가능.

객체 메소드

const calculator = {
  add: function (a, b) {
    return a + b;
  },
  sub: function (a, b) {
    return a - b;
  },
};
console.log(calculator.add(13, 20)); // 33
console.log(calculator.sub(13, 2)); // 11
console.log(calculator["add"](13, 20)); // 33
console.log(calculator["sub"](13, 2)); // 11

// operator 함수는 동적으로 객체의 메소드를 호출하는 예제
function operator(op, a, b) {
  return calculator[op](a, b);
}
console.log(operator("add", 10, 1)); // 11
console.log(operator("sub", 10, 1)); // 9

• 객체에 메소드를 정의하여 함수처럼 사용 가능.
• 메소드 호출 시 점 표기법 ' . ' 과 대괄호 표기법 ' [ ] ' 모두 사용 가능.
• 함수의 첫 번째 매개변수로 메소드 이름을 문자열로 전달하고, 나머지 매개변수는 해당 메소드에 전달할 인자입니다.