모던 자바스크립트 Day 12 & 13

이현정·2022년 4월 13일
1

🔖 읽은 범위: 10장 객체 (p.124~p.136)

☘️ 책갈피:

객체란:

  • 객체란, 프로퍼티(키-값)로 구성된 집합이다.
  • 프로퍼티의 값이 함수인 경우, 일반 값을 가진 프로퍼티와 구분하기 위해 "매서드(method)" 라고 부른다.
  • 프로퍼티에 대한 자세한 사항은 아래에서 따로 다룬다.

객체 생성:

  • 생성 방법에는 여러가지가 있지만, 객체 리터럴({})로 생성하는 것이 가장 일반적이다.
  • 객체 생성시 중괄호({}) 끝에 ; 를 붙인다. 즉, 똑같이 {} 를 써도 함수나 제어문과 달리 객체는 코드 블럭이 아니므로 ;를 생략하지 않는다.
  • 객체 지향 언어🌟:
    • 언어의 구성이 이처럼 대부분 객체들로 이루어진 언어를 "객체 지향 언어" 라고 한다.
    • 객체 생성법에 따라 "클래스 기반 객체지향 언어🌟"와 "프로토타입 기반 객체지향 언어🌟"로 나뉜다.
    • 자바스크립트는 대표적인 프로토타입 객체지향 언어이다.

      ❗️ 잠깐 "프로토타입 기반 객체지향 언어" vs. "클래스 기반 객체지향 언어"
      클래스 기반 객체 지향언어: 클래스(class) 를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자(constructor)를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성한다. 인스턴스란 클래스에 의해 생성되어 메모리에 저장된 실체를 말한다. (많은 교수님들이 이러한 클래스를 '붕어빵 만드는 기계'에, 그리고 인스턴스를 '만들어진 붕어빵'에 비교하시곤 한다고 한다.) 대표적인 클래스 기반 객체지향 언어로는 자바, C++가 있다.
      프로토타입 기반 객체 지향언어: 클래스 기반 객체지향 언어와 달리 객체 생성 방법에 여러가지가 존재한다. 일반적으로는 객체 리터럴 {} 로 생성한다. 대표적인 프로토타입 기반 객체 지향언어로 자바 스크립트가 있다.

프로퍼티:

  • 프로퍼티는 "키-값"으로 구성된 집합이다.
  • 객체의 프로퍼티들 사이는 쉼표(,)로 구분하며, 마지막 프로퍼티 뒤의 쉼표는 생략하기도 한다.

    잠깐! 프로퍼티 키의 규칙들:
    1) 프로퍼티 키는 가능하면 네이밍 규칙을 따르도록 하며 부득이하게 네이밍 규칙을 어기는 경우 따옴표('' 혹은 "")로 묶어야 한다.
    2) 문자열이나 심벌값 외의 값을 사용하면 암묵적 타입 변환을 통해 "문자열"이 된다.
    3) 예약어를 프로퍼티 키로 사용해도 에러 발생 x
    4) 이미 존재하는 프로퍼티 키를 사용해도 에러 발생 x. 나중에 생성된 키 값으로 덮어씌여진다.
    (3,4번 규칙에 의해 알 수 있지만 정말 쟈스는 자유분방한 상사 느낌... 에러가 쉽게 나지 않기 때문에 나중에 디버깅할 때 개고생할 듯. 타스 존재의 이유...)

프로퍼티 접근:

  • 프로퍼티에 접근하는 방법에는 2가지가 있다:
    1) 마침표 표기법 (.)
    2) 대괄호 표기법 ([ ])🌟

  • 대괄호 표기법 접근 연산자([]) 내부에 지정하는 프로퍼티 키는 반드시 "따옴표로 감싼" 문자열이어야 한다.

    var person = {
    	name : "lee"
    }
    
    console.log(person[name]); // ReferenceError
    console.log(person['name']); // Lee
  • 또한, 프로퍼티 키가 식별자 네이밍 규칙을 준후사지 않는 이름이라면 반드시 대괄호 표기법을 사용해야 한다.

    var person = {
    	last-name : "lee"
    }
    
    console.log(person.last-name); // NaN
    console.log(person['last-name']; // Lee

프로퍼티 생성:

  • 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성된다.
  • 하지만 존재하지 않는 프로퍼티를 삭제하는 것은 불가하다. (참고로 프로퍼티 삭제 연산자는 delete)

ES6 에서 추가된 객체 리터럴의 확장 기능

  • 프로퍼티 축약 표현
  • 계산된 프로퍼티 이름
  • 메서드 축약 표현
    : 이 때 메서드 축약 표현으로 사용된 매서드는 프로퍼티에 할당한 함수와 다르게 동작한다. 자세한 내용은 26장 2절에서 다룰 것.

? 의문점:

x

‼️ 느낀점:

이번 파트가 진짜 알짜배기였다. 자스를 다루면서 객체 지향 언어라고 계속 말하고, 객체를 항상 다루면서 자료 찾아볼 때마다 헷갈린 개념들을 정리할 수 있던 시간이었다. 매 장 읽을 때마다 정말 사서 읽기 잘했다는 생각이... 읽을 때마다 필요했던 부분들을 속시원히 채워주는 느낌.

💖 요약:

  • 객체란 프로퍼티로 이루어진 집합이다.
  • 프로퍼티는 키-값으로 구성된다.
  • 두 가지 타입의 객체지향 언어들에 대해 다뤄보았다.
  • 프로퍼티에 접근하는 두 가지 방법에 대해 알아보았다: 대괄호 표기는 배열뿐 아니라 객체에도 해당하는 거였다! 특히 네이밍 규칙을 준수하지 않는 키값을 불러올때!
  • ES6 에서 추가된 객체 리터럴 확장 기능들 3가지를 알아보았다

0개의 댓글