개요

  • 모던 자바스크립트 문법을 정리해두는 문서이다.
  • 주로 비동기 처리관련 문법등을 정리해둔다.

Promise(프로미스)

  • Promise객체는 자바스크립트에서 비동기처리를 실행하기 위해 사용된다.
  • 자바스크립트에서 어떤 함수를 실행한 결과값이 Promise(프로미스)객체인 경우가 있다.
  • 이럴 때 Promise객체의 실행 결과를 얻어내는 방법에 대해 알아본다.

Promise객체의 실행결과 얻어내기

다음과 같이 Promise객체 뒤에 .then()으로 코드 체이닝하는 방법을 통해 결과에 접근할 수 있다.

{Promise}.then(function(data) {
  console.log(data); // response 값 출력
}).catch(function(err) {
  console.error(err); // Error 출력
});

참고링크

  • https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

async, await

  • Promise와 함께 비동기 처리시에 자주 보이는 키워드이다.
  • async, await를 쓰면 Promise만을 사용해서 비동기 처리코드를 작성하는 것보다 더 효율적으로 (읽기 쉽게)코드를 작성할 수 있다고 한다.
  • 함수 선언 앞에 async키워드를 붙이면 비동기 처리를 하는 함수가 된다.
  • async키워드가 붙은 함수는 Promise객체를 리턴한다.
  • 비동기처리를 하는 함수가 되므로 함수내의 코드는 각 코드의 실행이 끝나는 것을 기다리지 않고 차례로 실행된다.
  • 이 때, 실행결과를 기다리고 싶은 구문에는 await키워드를 붙인다. 이렇게 하면 resolved promise가 리턴될 때까지 실행을 대기한다.
  • await키워드는 async함수 내부에서만 사용할 수 있다.

참고링크

  • https://qiita.com/ln-north/items/b4a0e6d1a76f086e631e
  • https://www.w3schools.com/js/js_async.asp

호이스팅(hoisting)

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다.
  • https://developer.mozilla.org/ko/docs/Glossary/Hoisting
  • 영어 단어 hosting은 끌어올린다는 의미이다. 선언부를 코드의 최상단으로 끌어올리는 것이다. 예를들어, 코드를 다음과 같이 짜도
console.log (greeter);
var greeter = "say hello"

자바스크립트는 다음과 같이 해석한다. 선언부가 코드의 가장 상단으로 끌어올려졌다.

var greeter;
console.log(greeter); // greeter is undefined
greeter = "say hello"
  • https://www.freecodecamp.org/korean/news/var-let-constyi-caijeomeun

변수 선언시 var, let, const 차이점

  • 원래존재했던 것은 var이다.
  • var는 전역과 함수내 지역변수 모두에 사용할 수 있다. 또한 재선언도 가능하다. var는 이런 특성을 갖고 있기 때문에 코드를 작성하기에 따라서 버그가 발생할 가능성이 있어서 let과 const가 등장하게 되었다고 한다.
  • let으로 선언된 변수는 해당 블록 내에서만 사용가능하다.
  • let은 업데이트 될 수 있지만 재선언은 불가능하다.
  • const도 해당 블록 내에서만 사용가능하다.
  • const는 업데이트도 재선언도 불가능하다. (객체의 속성은 업데이트 할수 있다.)

세미콜론

  • 자바스크립트에서는 세미콜론(;)으로 구문을 끝내는 것이 기본이다.
  • 하지만 자바스크립트 구문분석기에는 ASI(Automatic Semicolon Insertion)이라는 기능이 있어서 구문분석시에 세미콜론을 붙여줘야 하는 부분에 자동으로 붙여준다고 한다.
  • 그래서 종종 세미콜론을 붙이지 않은 코드도 보인다. 개행을 제대로 해주면 붙이지 않아도 잘 동작한다고 한다.
  • 코드시작이 세미콜론인 코드도 있는데, ASI가 혼동하지 않도록 (이전 코드블락과 명시적으로 구분되는 것임을 나타내기 위해) 일부러 붙여준 것으로 생각된다.

‘use-strict’;

  • https://www.w3schools.com/js/js_strict.asp
  • 'use-strict'; 를 선언하면 strict mode(엄격한 문법)로 코드를 작성하겠다는 의미이다.
  • 이 모드에서는 예를들어, 선언하지 않은 변수는 사용할 수 없다.
  • 의도치 않은 동작같은 버그를 줄이기 위해서 사용하는 것으로 보인다.