rustandbone Developer

이듬 강의_모던 자바스크립트(ES6+)

25 Jul 2023

모던 자바스크립트(ES6+)

JavaScript? ECMAScript?

  • 마크 앤드리슨
    • 1992년 모자이크 웹 브라우저 개발
    • 1994년 넷스케이프 내비게이터 웹 브라우저 출시
  • 브렌던 아이크
    • 자바와 유사한 브라우저에서 사용 가능 언어 개발(Scheme의 기능성, Self의 객체 지향성, Java 문법)
    • Mocha => LiveScript => JavaScript
  • 기업에서 만든 이름 : JavaScript
    • “Java”와 “JavaScript” 는 모두 상표이자 미국 및 기타 국가에 등록된 Oracle의 상표
  • 표준화된 이름 : ECMAScript
    • ECMA International에서 발행한 표준
  • ECMA 정보 통신 시스템을 위한 표준 조직
    • ES6는 ECMAScript의 6번째 버전(2015년 - 클래스, 모듈 추가)

let & const

  • variable declaration : 변수 선언
  • initialization : 변수 초기화

  • scope : 프로그램 내부에서 접근 가능한 영역 설정

  • 전역 변수

  • 지역 변수

  • 전역 스코프, 지역 스코프

  • 블록 영역 vs 함수 영역

    • 자바스크립트는 블록 영역이 없었음 - var 사용
    • ES6부터 블록 영역 지원 - let, const 사용
    • 함수 내에 있는 함수 - 내부 함수는 상위 함수 영역에 접근 가능
  • 함수 실행 시점 & 스코프 체이닝
var fn_list = [];

for (var i = 0; i < 10; i++) {
  fn_list.push(function () {
    console.log(i);
  });
}

fn_list.forEach(function (f) {
  f();
});

  • 클로저 & 함수 실행 시점

  • let & 블록 영역 & 함수 실행 시점

var fn_list = [];

for (let i = 0; i < 10; i++) {
  fn_list.push(function () {
    console.log(i);
  });
}

fn_list.forEach(function (f) {
  f();
});

  • 호이스트

    • var, function 선언문은 브라우저가 해석하는 과정에서 영역 최상위로 끌어올리는 현상

  • var vs let vs const

    • var : 중복 선언을 해도 문제 발생 안함 - window 객체 속성으로 접근 가능
    • let : 동일한 이름 중복 선언 시 오류 발생
    • const : 상수에 초기 설정된 값을 다른 유형으로 변경하면 오류 발생, 객체/배열의 경우 값의 아이템을 추가, 변경할 수 있음. 객체, 배열의 경우 사용 권장

IIFE → Block

IIFE 패턴은 일반적으로 변수들을 별도의 영역 안에서만 사용하기 위해 사용되었습니다. ES6+에서는 Block을 기반으로 영역을 만들 수 있으므로, 더 이상 함수 기반 영역을 사용하지 않아도 됩니다.

(function () {
  var food = "허니버터칩";
})();

console.log(food); // Reference Error

{
  let food = "허니버터칩";
}

console.log(food); // Reference Error

Related posts