[TIL] 오늘의 개발일지

 

 

어제 프로젝트 발표를 잘 마무리하고

오전에 자바스크립트 심화 강의를 듣다가 오후엔 프로젝트 코드 리뷰를 했다.

일주일간 프로젝트를 만들면서 프로젝트를 완성시키기에 급급했다보니 

다른 팀원분들이 짠 코드를 제대로 이해하지 못했었는데, 플젝 끝나고 따로 코드리뷰 시간을 가지니 

플젝 준비하면서 궁금했던 기능들을 배울 수 있어서 너무 재밌었다!!

가장 재밌었던건 게시판 등록 시 사용자가 공백만 입력하거나, 엔터를 쳤을때 엔터를 그대로 반영시켜주고 공백만 치면 데이터를 넘기지 않는 기능과 모달기능!!

모달기능은 z-index와 클래스(hidden) 을 사용하는 방식이었다.

 

모던 자바스크립트 읽다가 이해가 안되는 부분이 있었는데 아래 내용은 내일 튜터님한테 여쭤봐야징 >_<

this가 없는 화살표 함수

화살표 함수는 일반 함수와는 달리 ‘고유한’ this를 가지지 않습니다. 화살표 함수에서 this를 참조하면, 화살표 함수가 아닌 ‘평범한’ 외부 함수에서 this 값을 가져온다.

아래 예시에서 함수 arrow()의 this는 외부 함수 user.sayHi()의 this가 된다.

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

user.sayHi(); // 보라

별개의 this가 만들어지는 건 원하지 않고, 외부 컨텍스트에 있는 this를 이용하고 싶은 경우 화살표 함수가 유용하다.

 

new User(...)를 써서 함수를 실행하면 아래와 같은 알고리즘이 동작한다.

1. 빈 객체를 만들어 this에 할당
2. 함수 본문을 실행합니다. this에 새로운 프로퍼티를 추가해 this를 수정
3. this를 반환

예시를 이용해 new User(...)가 실행되면 무슨 일이 일어나는지 살펴 보기

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}

이제 let user = new User("보라")는 아래 코드를 입력한 것과 동일하게 동작

let user = {
  name: "보라",
  isAdmin: false
};