4일차 - 2022.03.04

오늘 공부한 내용 요약

( 모던 JavaScript 튜토리얼 학습 )

1. method와 this

• method
  객체 프로퍼티에 할당된 함수
  새로 부여할수도 있고 이미 정의된 함수도 사용가능

• method의 단축구문

sayHi() {    와    sayHi: function() {     2개 동일 

• Method는 객체에 저장된 정보에 도달할 수 있어야 역할을 할수 있다

sayHi() {
    alert(this.name);      ///   점 앞의 this 는  현재 객체를 의미함
  }

이때 this 대신에 선언한 객체를 직접사용해도 되지만 , 객체를 다른 객체에 복사한 상황에서는 에러생길수 있음. this를 사용하는것이 방지

• 자바스크립트에서는 모든 함수에 this로 사용가능

• User.f(); = userf;

• 화살표 함수에서 this를 사용시 외부함수에서 this값을 가져옴

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // 보라

• 별개의 this가 만들어지는것 말고 외부에 있는 this를 이용하고 싶은경우 화살표함수가 유용함.

• 객체 지향 프로그램(OOP)
  객체를 사용하여 개체를 표현하는 방법

2. new 연산자와 생성자 함수

New 연산자와 생성자 함수를 사용하면 유사한 객체를 여러개 만들수 있음

• 생성자 함수
  -일반 함수이지만 일반 함수와 구부짓기위해 이름 첫글자는 대문자 / 반드시 new 붙여서 실행
  -new와 함께 호출하면 내부에서 this가 암시적으로 만들어지고, 마지막엔 this가 반환됩니다.
  -재사용할 수 있는 객체생성코드를 구현하는데 의의가 있다
  -모든 함수는 생성자 함수가 될 수 있다

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("보라");       ->  let user = { name : “보라”; isAdmin : false }; 와 동일하게 작동 

alert(user.name); // 보라
alert(user.isAdmin); // false

new User(“예나”) new User(“해민”) 등을 이용하면 쉽게 객체를 만들수 잇음
리터럴 방식으로 일일이 만드는것보다 간단하고 읽기쉽게 생성가능

• 익명 생성자 함수
  한번만 사용목적으로 만드는 함수이고 저장되지 않음

new function() {….

• 생성자 함수에는 보통 return 문이 없다
  —> 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환
  만약 return 문이 있다면(거의 없음) -> 객체를 return 한다면 this 대신 객체가 반환됩니다.
• 원시형을 return 한다면 return문이 무시됩니다

3. 옵셔널 체이닝 (?.)

• 프로퍼티가 없는 중첩객체를 안전하게 접근할 수 있게된다
  계속 연결해서 체인을 만들면 중첩프로퍼티에 안전하게 접근
  생기기 전에는 &&를 이용해 실제 프로퍼티나 해당객체가 있는지 확인하는 방식을 사용했었음

• ?.은 앞의 평가대상이 null 이나 undefined이면 멈추고 undefined를 반환한다
  즉 평가후 결과가 null, undefined가 아니면 값이 있다, 존재한다
  (값이 없으면) 멈춤 -> 단락평가라고 함

let user = {}; // 주소 정보가 없는 사용자

alert(user.address.street);    -> 이 경우는 오류
alert( user?.address?.street );    ->   undefined 반환  (오류x)

• ?. 은 앞 평가대상에만 동작되고 확장되지 않는다
  읽기나 삭제에는 사용할수 있지만 쓰기에는 사용할수 없다
  존재하지 않아도 괜찮은 대상에만 사용해야 한다
  ?.은 연산자가 아니라 특별 문법 구조체이다

• delete 와도 사용가능 -> delete user?.name;
  user가 존재하면 user.name을 삭제합니다.
  할당연산자(=) 왼쪽에는 사용할수 없다
  ?. 왼쪽대상이 없어도 사용가능한 경우 선택

• 보기 쉽게 정리

1. obj?.prop – obj가 존재하면 
   obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
2. obj?.[prop] – obj가 존재하면 
   obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
3. obj?.method() – obj가 존재하면 
   obj.method()를 호출하고, 그렇지 않으면 undefined를 반환

4. 심볼형

유일성이 보장되는 자료형, 유일한 식별자를 만들고 싶을때 사용
자바스크립트는 객체 프로퍼티 키로 오직 문자형과 심볼형만 가능
각각의 심볼 설명이 동일해도 다른 심볼값을 가지게 됨
심봉에 붙이는 설명은 그저 이름표 역할

let id1 = Symbol("id");
let id2 = Symbol("id");

alert(id1 == id2);        // false

• 자바스크립트는 문자형으로 암시적 형 변환이 비교적 자유롭게 생기는 편
  -> alert 함수가 거의 모든 값을 인자로 받을 수 있는 이유가 이 때문이죠.
  그러나 심볼형 값은 다른 자료형으로 암시적 형 변환(자동 형 변환)되지 않습니다.

let id = Symbol("id");
alert(id);      // 에러 발생   
-> 심볼형을 표현하려면 .toString() 메서드를 활용하거나  /  description 프로퍼티로 설명을 보여줄순 잇음 

• 심볼을 사용하면 외부 코드에서 접근할수 없고 값도 덮어쓸수 없는 숨김 프로퍼티를 만들수 있다

• 리터럴 {…}를 이용해 객체를 만든경우 대괄호로 심볼형 키를 만들어야 한다.

let user = {
  name: "John",
  [id]: 123 //      "id": 123 이렇게 저장시, id가 심볼형이 아닌 문자형으로 저장됨 
};

• for …in에서 심볼은 배제된다

• object.assign은 심볼을 포함한 객체내 모든 프로퍼티를 복사함

• 전역 심볼 레지스트리
  -> 이름이 같은경우 동일한 심볼을 반환해줌
  애플리케이션에서 광범위하게 사용해야 하는 심볼이라면 전역 심볼을 사용
  Symbol.for(key)는 key라는 이름을 가진 전역 심볼을 반환합니다.
  조건에 맞는 심볼이 레지스트리 안에 없으면 새로운 심볼 Symbol(key)을 만들고 레지스트리 안에 저장합니다.

• Symbol.keyFor(sym)를 사용하면 이름을 얻을 수 있습니다. 를 사용하면 이름을 얻을수 있다 (전역 심볼의 경우에만 가능)
  전역 심볼이 아닌 것이 넘어오면 undefined 를 반환

공부사이트

코어 자바스크립트

반성

그동안의 날 중 가장 집중하지 못한 날

위의 내용은 공부중 본인이 이해한 내용으로 몇몇 틀린 내용이 있을 수 있습니다.
회독중 발견시 수정하겠습니다