JavaScript에서 Object란?

자바스크립트의 객체에 대해 알아보고, 관련된 연산과 연산자들에 대해 공부하겠습니다.

Object

자바스크립트의 8가지 자료형 중, 원시형이 아닌 자료형입니다.

key: value 쌍으로 구성된 property를 가집니다.

key는 문자형, value는 모든 자료형이 허용됩니다.

let obj1 = new Object(); // 객체 생성자
let obj2 = {}; // 객체 리터럴

프로퍼티를 읽고, 추가하고, 수정하고, 삭제할 수 있습니다.

없는 프로퍼티에도 접근할 수 있습니다.

여러 단어를 조합해 프로퍼티 이름을 만든 경우에는 프로퍼티 이름을 따옴표로 묶어줍니다.

프로퍼티 이름이 대괄호로 둘러싸이면, 이를 계산된 프로퍼티라 합니다.

let obj = { name: "nameObj", number: 24, "two words": true };
console.log(obj.name); // nameObj
console.log(obj.a); // undefined
console.log(obj["two words"]); // true
obj.b = "this is b";
delete obj.name;
console.log(obj); // {number: 24, b: 'this is b'}
let key = "two words";
console.log(obj[key]); // true
console.log(obj.key); // undefined
let fruit = "apple";
let obj2 = { [fruit]: 4 };
console.log(obj2.apple); // 4

프로퍼티 이름에는 예약어가 올 수 있습니다.

프로퍼티 이름에 문자열이나 심볼형에 속하지 않은 값은 문자열로 자동 형 변환됩니다.

obj["0"];
obj[0]; // 둘은 같습니다.

단, __proto__는 이미 지정되어 있습니다.

obj.__proto__;

in 연산자로 프로퍼티의 존재 여부를 확인할 수 있습니다.

let obj = { test: undefined };
console.log(obj.test); // undefined
console.log("test" in obj); // true

for...in 반복문으로 객체의 모든 키를 순회할 수 있습니다.

let obj = { a: 1, b: "2", c: false };
for (let key in obj) {
  console.log(key, obj[key]);
}

method, this

객체 프로퍼티에 할당된 함수를 메서드라고 합니다.

객체 내에서 this는 현재 객체(메서드를 호출할 때 사용된 객체)를 나타냅니다.

또, 자바스크립트에서는 모든 함수에 this를 사용할 수 있습니다.

let user = {
  name: "USER",
  age: 22,
  sayHi() {
    console.log(this.name);
  }
};
user.sayHi(); // USER

화살표 함수는 고유한 this를 가지지 않기 때문에, 화살표 함수에서 this를 참조하면 화살표 함수가 아닌 평범한 외부 함수에서 this를 가져옵니다.

let user = {
  name: "USER",
  sayHi() {
    let arrow = () => console.log("arrow:", this.name);
    arrow(); // arrow: USER
    function noArrow() {
      console.log("noArrow:", this.name);
    }
    noArrow(); // noArrow:
  }
};
user.sayHi();

new 연산자, 생성자 함수

생성자 함수는 함수 이름의 첫 글자가 대문자로 시작하고, new 연산자를 반드시 붙여 실행합니다.

function User(name) {
  // this = {}; (빈 객체 암시적으로 생성)
  this.name = name;
  this.isAdmin = false;
  // return this; (this 암시적으로 반환)
}
let user = new User("test");

옵셔널 체이닝 ?.

?.의 앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.

let user = {};
user && user.address && user.address.street; // undefined
user?.address?.street; // undefined

&&를 이용한 것과 ?.를 이용한 것은 같지만, ?.를 이용해 효율적으로 표현할 수 있습니다.

세 가지 형태로 사용할 수 있습니다.

• obj?.prop
• obj?.[prop]
• obj?.method()

참고

객체