FE/Javascript

[Node.js] 배우기 전 알아두어야 할 자바스크립트

veee2 2021. 1. 13. 00:20
  1. 호출 스택
  2. 이벤트루프
  3. var, const, let
  4. 템플릿 문자열, 객체 리터럴
  5. 화살표 함수
  6. 비구조화 할당
  7. 클래스
  8. Promise, async/await
  9. 프런트엔드 자바스크립트

[5] 화살표 함수

function, 화살표 함수 구별하여 사용

 

this;

button.addEventListener('click', function(e) {

    console.log(this.textContent);

});

 

button.addEventListener('click', (e) => {

    console.log(e.target.textContent);

});

[6] 비구조화 할당 (구조 분해 할당) 같은 말임

const example = { a: 123, b: {c: 135, d: 146 }

const a = example.a;

const d = example.b.d;

 

이런식으로 바뀜

const { a. b: { d } } = example;

console.log(a); // 123

console.log(d); // 146

 

위가 구조 분해 문법

 

const [x, , , y, z] = [1, 2, 3, 4, 5]

자릿수 맞춰서 넣으면 됨

 

arr = [1, 2, 3, 4, 5]

const [x, y, , , z] = arr;

[7] 클래스

프로토타입 문법을 깔끔하게 작성할 수 있는 Class 문법 도입

Constructor(생성자), Extends(상속) 등을 깔끔하게 처리할 수 있음

 

class Human {

  constructor(type = 'human') {

     this.type = type;

  }

 

  static isHuman(human) {

    return human instanceof Human;

  }

 

  breathe() {

    alert( 'h-a-a-a-m' );

  }

}

[8] 프로미스

  • 프로미스 : 내용이 실행은 되어씾만 결과를 아직 반환하지 않은 객체
  • Then을 붙이면 결과를 반환함
  • 실행이 완료되지 않았으면 완료된 후에 Then 내부 함수가 실행됨
  • Resolve(성공리턴값) -> then으로 연결
  • Reject(실패리턴값) -> catch로 연결
  • Finally 부분은 무조건 실행됨

promise

  .then((message) => {

    console.log(message); // 성공(resolve)한 경우 실행

  })

  .catch((error) => {

    console.error(error); // 실패(reject)한 경우 실행

  })