Topic

모던 자바스크립트

What I Learned

모던 자바스크립트 이해하기

1. 모던 자바스크립트란?
   • Ecma International: 자바스크립트 국제 표준화 기구
     • 자바스크립트를 사용할 때 준수해야하는 규칙이나 세부 사항들을 ECMA-262라는 이름의 문서로 관리하는데, 이 문서의 내용이 에크마스크립트이다
   • 에크마스크립트(ECMAScript): 자바스크립트 표준 명세서(JavaScript Specification)
     • 1997년에 ES1으로 처음 등장했다
     • 2015년에 ES6이 나오면서 공식적인 버전 명칭으로 ES2015처럼 연호를 붙이기로 했다
     • ES2015는 ES5까지의 자바스크립트가 가진 문제점들을 보완하고, 코드를 좀 더 안전하고 간결하게 작성할 수 있는 유용한 문법들이 굉장히 많이 등장했다
     • 현시점의 브라우저들이 사용하고 있는 에크마스크립트의 버전을 지원하는지 신경쓰면서 개발해야 한다
       • 한눈에 확인하는 호환성 테이블
       • 문법 검색으로 확인하는 호환성 테이블
     • 공식 문서: ECMA-International 공식 ECMA-262문서
   • 모던 자바스크립트(Modern JavaScript): 현시점에 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트
   • ECMAScript는 JavaScript 뿐만아니라 모든 스크립트 언어(scripting languages)가 지켜야 하는 표준이다
   • JavaScript는 ECMAScript를 기반으로 하지만 ECMAScript에 정의된 내용뿐만 아니라, 다른 부가적인 기능도 있다
     • 예를 들어, DOM을 다루는 문법들은 ECMAScript에 표준화된 문법이 아니라 WebIDL에서 표준화된 기술이다

자바스크립트의 동작 원리

1. 데이터 타입의 특징과 종류
   • 자바스크립트 데이터 타입의 특징
     • 유연하다
       • 암묵적 형 변환이 일어나므로 서로 다른 데이터 타입끼리 연산이 가능하다
       • 변수를 할당할 때 데이터 타입을 정해주지 않으므로 언제든지 다양한 타입의 값으로 재할당이 가능하다
   • 자바스크립트 데이터 타입의 종류
     • 기본형(Primitive Type)
       • Number
       • String
       • Boolean
       • Null
       • Undefined
       • Symbol(ES2015): 변경이 불가능하고 다른 것과 중복되지 않는 고유한 값
         • const variable = Symbol('description');
         • Symbol로 할당된 variable은 다른 어떤 값과 비교해도 false를 리턴한다
       • BigInt(ES2020): Number가 안정적으로 나타낼 수 있는 최대치인 253-1보다 큰 정수를 표현할 수 있는 데이터 타입
         • BigInt 함수를 사용하거나 정수 마지막에 n을 붙여서 BigInt 변수를 만들 수 있다
         • BigInt 타입끼리만 연산할 수 있고, 서로 다른 타입끼리의 연산은 명시적으로 타입 변환을 해야 한다
     • 참조형(Reference Type)
       • Object
2. typeof 연산자
   • typeof null; // object
     • 자바스크립트가 처음 구현될 때의 특별한 문법 설계 때문에 object를 리턴한다
     • ECMAScript에서 수정이 제안되었지만, 이미 개발된 많은 프로젝트에 버그가 생기는 우려로 인해 반영되지 않고 있다
   • typeof function () {}; // function
     • 자바스크립트에서 함수는 객체로 취급되지만 function을 리턴한다
3. AND와 OR의 연산 방식
   • AND(&&)와 OR(||) 논리 연산자는 양쪽 값들 중 어느 한쪽을 선택하는 방식으로 동작한다
     • AND 연산자는 왼쪽 값이 falsy 값이면 왼쪽 값을 리턴하고 truthy 값이면 오른쪽 값을 리턴한다
     • OR 연산자는 왼쪽 값이 truthy 값이면 왼쪽 값을 리턴하고 falsy 값이면 오른쪽 값을 리턴한다
   • AND 연산자의 우선순위가 OR 연산자보다 높다
4. null 병합 연산자(Nullish coalescing operator)
   • null 병합 연산자(??)
     • null 병합 연산자는 왼쪽 값이 null이나 undefined이 아니라면 왼쪽 값을 리턴하고 null이나 undefined라면 오른쪽 값을 리턴한다
     • ES2020에서 새롭게 추가됐다

함수 다루기

1. 함수를 만드는 방법

   • 함수 선언식(Function declaration)

     function func_name(parameters) {
       [statements]
     }

   • 함수 표현식(function expression): 함수 선언을 값처럼 사용하는 방식

     const variable = function (parameters) {
       [statements]
     }

   • 기명 함수 표현식(Named function expression)

     const variable = {
       key: function func_name(parameters) {
       [statements]
       },
     }

     • 객체 형태가 아닌 하나의 함수만 할당해도 된다
     • 함수 이름(func_name)을 생략할 수 있다
     • 재귀 함수일 경우 함수 이름을 작성해주는 것이 안전하다
   • 함수 표현식이 함수 선언식과 다른 점
     • 호이스팅 되지 않는다
     • 함수 선언식은 함수 스코프를 갖지만 함수 표현식은 할당된 변수에 따라 스코프가 결정된다
   • 즉시 실행 함수 표현식(Immediately Invoked Function Expression)

     (function (parameters) {
       [statements]
     })(arguments);

     • 함수가 선언된 순간 실행된다
     • 함수 이름을 지어주더라도 외부에서 재사용할 수 없다

2. 값으로서의 함수

   • 일급 함수(First Class Function): 다른 변수와 동일하게 다룰 수 있는 함수
     • 변수나 다른 데이터 구조 안에 할당될 수 있다
     • 다른 함수의 파라미터로 전달될 수 있다 (Callback function)
     • 다른 함수의 리턴값이 될 수 있다 (higher-order function)
       • 소괄호를 연속적으로 써서 호출할 수도 있다

3. Parameter

   • Parameter vs Argument
     • 매개변수(parameter)는 함수와 메서드 입력 변수(variable)이다
     • 인자(argument)는 함수와 메서드의 입력 값(value)이다
   • Argument를 전달받지 못한 parameter는 undefined 값을 갖는다
   • Optional parameter(ES2015)를 활용해 default value를 설정할 수 있다
   • 기본값(Default value)는 argument를 전달받지 못할 때 뿐만 아니라 undefined 값을 argument로 전달받았을 때도 동작한다
   • 뒤쪽의 파라미터의 기본값을 설정할 때 앞쪽에 정의된 파라미터를 활용할 수 있다

4. Arguments

   • 함수의 프로퍼티 arguments
     • 전달받은 argument들을 요소로 갖는 유사 배열 객체다
     • length, indexing, for...of문을 사용할 수 있다
     • 파라미터명, 함수 내 변수명과 함수명을 arguments로 짓지 않는 것이 좋다

5. Rest Parameter(ES2015)

   • ...args 정의된 parameter에 argument를 모두 할당한 후 남는 argument들을 요소로 갖는 배열이다

     function name(parameters, ...args){
       for (const arg of args) {
         console.log(arg);
       }
     };

   • 많은 스타일가이드에서 가급적이면 arguments 프로퍼티보다 Rest parameter를 우선적으로 활용하기를 권장한다

6. Arrow Function(ES2015)

   (parameters) => {
     [statements]
   }

   • 이름이 없는 익명 함수이기 때문에 변수에 할당하거나 다른 함수의 argument를 선언할 때 주로 활용한다

   const getTwice = number => {
     return number * 2;
   }

   const myBtn = document.querySelector('#myBtn');
   
   myBtn.addEventListener('click', () => {
     console.log('button is clicked!');
   });

   • parameter가 하나라면 parameter를 감싼 소괄호를 생략할 수 있다
   • parameter가 하나가 아니라면 소괄호를 반드시 작성해야 한다
   • statement가 return문 하나로만 이루어져 있다면 return과 중괄호를 생략하고 다음과 같이 작성할 수 있다

   // short version
   const getTwice = number => number * 2;

   • return과 중괄호를 생략할 때 return 값이 객체인 경우 중괄호때문에 에러가 발생하므로 중괄호를 소괄호로 감싸줘야 한다
   • arguments 프로퍼티가 없다
   • this가 가리키는 값이 일반 함수와 다르다

7. this

   • this 함수를 호출한 객체를 가리키는 키워드
   • 코드를 작성할 때 값이 미리 결정되는 게 아니라 함수가 호출될 때 어떤 객체가 그 함수를 호출했는지에 따라 상대적으로 값이 변하게 된다

   console.log(this);
   
   function printThis() {
     console.log(this);
   }
   
   const myObj = {
     content: 'myObj',
     printThis: printThis,
   };
   
   const otherObj = {
     content: 'otherObj',
     printThis: printThis,
   };
   
   myObj.printThis();
   otherObj.printThis();

   Window {window: Window, ...}
   {content: "myObj", printThis: f}
   {content: "otherObj", printThis: f}

   • Arrow function 내부의 this는 상대적으로 값이 변하는 게 아니라 Arrow function이 선언되기 직전인 그 때의 유효한 this 값과 동일한 값을 가리킨다
   • 그러므로 객체에 메소드를 만들 때는 Arrow Function보다는 일반 함수가 좀 더 권장된다
   • 객체 내의 메소드에서 해당 객체의 프로퍼티를 사용할 때에도 this를 활용할 수 있다

   const user = {
     firstName: 'Tess',
     lastName: 'Jang',
     getFullName: function () {
       return `$(this.firstName) $(this.lastName)`;
     },
   };

자바스크립트의 문법과 표현

1. 문장과 표현식

   • 문장(statements): 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리
   • 표현식(expressions): 결과적으로 하나의 값이 되는 모든 코드
   • 표현식이면서 문장, 문장이면서 표현식

   // 할당식은 문장인 표현식이다
   title = 'JavaScript'; // JavaScript
   
   // 함수 호출은 함수를 실행하는 동작도 하지만,
   // 실행한 함수의 리턴 값을 가지는 표현식이다.
   sayHi(); // sayHi 함수의 리턴 값
   
   // console.log 메소드는 콘솔에 argument를 출력하는 동작도 하지만,
   // undefined 값을 가지는 표현식이다.
   console.log('hi'); // undefined

   • 표현식인 문장 vs 표현식이 아닌 문장
     • 이 둘을 구분하는 가장 간단한 방법은 구분하고자 하는 문장을 변수에 할당하거나, 어떤 함수의 아규먼트로 전달해보는 것이다
     • 조건문이나 반복문은 값으로 평가되지 않고 오로지 문장으로만 평가된다
   • 일반적으로 표현식인 문장은 세미콜론으로 마무리 짓는다

2. 조건을 다루는 표현식

   • 조건 연산자(Conditional operator)

   조건 ? truthy 할 때 표현식 : falsy 할 때 표현식

   • 삼항 연산자(Ternary operator)라고도 부른다
   • if 동작문이 리턴문밖에 없다면 조건연산자로 짧게 작성할 수 있다

3. Spread 구문(ES2015)

   • 전개 구문(Spread syntax): 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-밸류 쌍으로 객체를 확장시킬 수 있다

   const numbers = [1, 2, 3];
   
   console.log(numbers);
   console.log(...numbers);

   (3) [1, 2, 3]
   1 2 3

   • 배열을 깊은 복사할 때 사용된다

   const webPublishing = ['HTML', 'CSS'];
   const interactiveWeb = [...webPublishing, 'JavaScript'];
   
   console.log(webPublishing);
   console.log(interactiveWeb);

   (2) ["HTML", "CSS"]
   (3) ["HTML", "CSS", "JavaScript"]

   • 두 배열을 합칠 수 있다

   const arr1 = [1, 2, 3];
   const arr2 = [4, 5, 6];
   
   const arr3 = [...arr1, ...arr2];
   console.log(arr3);

   (6) [1, 2, 3, 4, 5, 6]

   • 배열을 인자로 전달할 때 활용할 수 있다

   const introduce = (name, birth, job) => {
     console.log(`저는 $(name)이고 $(birth)년 생이고, 직업은 $(job)입니다.`);
   };
   
   const myArr = ['제리', 1995, '웹 개발자']
   introduce(...myArr);

   저는 제리이고 1995년 생이고, 직업은 웹 개발자입니다.

   • 하나의 값이 아니라 여러 값을 펼친 목록으로 평가된다
   • 객체 Spread(ES2018)로 객체를 복사하면 실제값을 복사하지만 객체 프로퍼티가 있을 경우 객체 프로퍼티는 같은 주소값을 가리키게된다

   const obj = {
     name: 'obj_name',
     obj2: {},
   };
   
   const objClone = {
     ...obj,
   }
   objClone.name = 'objClone_name';
   objClone.obj2.key_name = 'value_name';
   console.log(obj); // {name: "obj_name", obj2: {key_name: 'value_nmae'}}
   console.log(objClone); // {name: "objClone_name", obj2: {key_name: 'value_nmae'}}

4. 모던한 프로퍼티 표기법(ES2015)

   • 프로퍼티 네임이 프로퍼티 밸류에 해당하는 변수나 함수 이름과 같다면 프로퍼티 밸류를 생략할 수 있다
   • 객체에 메소드를 쓸 경우 콜론(:)과 function 키워드를 생략할 수 있다
   • 계산된 속성명(computed property name): 프로퍼티 네임에 변수나 함수의 리턴값을 사용할 수 있다

5. 옵셔널 체이닝(ES2020)

   • 옵셔널 체이닝(Optional Chaining) 연산자(?.)
     • 객체의 프로퍼티를 다룰 때, 존재하는 프로퍼티 값인지 검증이 필요한 경우 간결하게 쓸 수 있는 표현식
     • 옵셔널 체이닝 연산자 왼쪽의 프로퍼티 값이 undefined 또는 null이 아니라면 왼쪽 프로퍼티의 오른쪽 프로퍼티 값을 리턴하고 그렇지 않은 경우에는 undefined를 반환한다

     function printCatName(user) {
       console.log(user.cat?.name);
       // ((user.cat === null || user.cat ===undefined) ? undefined : user.cat.name);
     }

     • null 병합 연산자와 함께 응용할 수 있다

     function printCatName(user) {
       console.log(user.cat?.name ?? '함께 지내는 고양이가 없습니다.');
     }

6. 구조 분해(Destructuring)(ES2015)

   • 배열 구조 분해

     • const [parameters, ...rest] = array;
     • 배열의 길이보다 parameter의 갯수가 많을 경우 할당되지 못한 parameter들은 undefined 값을 갖는다
     • Rest parameter, Optional parameter를 활용할 수 있다
     • 변수의 값을 교환할 때도 활용할 수 있다
       • [a, b] = [b, a];

   • 객체 구조 분해

     • const { keys, ...rest } = object;
     • 할당 연산자 왼쪽에 선언된 변수의 이름과 같은 프로퍼티 네임이 객체에 있다면 왼쪽의 변수에 해당 프로퍼티 값이 할당되고 없다면 undefined가 할당된다
     • Rest parameter, Optional parameter를 활용할 수 있다
     • 콜론(:)으로 프로퍼티 값을 할당받을 변수 이름을 다르게 지정할 수 있다

       • const { key:variable } = object;
         // const variable = object.key;

       • 프로퍼티 네임에 하이픈, 띄어쓰기 등이 있어서 변수로는 사용할 수 없는 이름일 때에는 반드시 할당받을 변수 이름을 다르게 지정해야 한다
     • 대괄호([propertyName])를 통해서 computed property name을 활용할 수 있다

   • 중첩 객체 구조 분해(Nested Object Destructuring) 객체 안의 객체가 있을 때 더 깊게 구조 분해를 하는 것

     const btn = document.querySelector('#btn');
     
     btn.addEventListener('click', ({ target: { classList } }) => {
       classList.toggle('checked');
     });
     // classList = event.target.classList;

7. 에러와 에러 객체

   • 에러 객체(Error Object): 코드가 실행되는 도중에 에러가 발생하면 자동으로 생성된다
     • ReferenceError: 존재하지 않는 변수나 함수를 호출할 때 발생한다
     • TypeError: 잘못된 방식으로 자료형을 다루려고 할 때 발생한다
     • SyntaxError: 문법에 맞지 않는 코드가 있을 때 발생한다
       • 신택스에러는 코드 실행 전에 발생한다
     • 에러 객체 종류 참고
   • 에러 객체를 생성하는 법

     const error = new TypeError('타입 에러가 발생했습니다.');
     console.log(error.name);
     console.log(error.message);

     /*
     TypeError
     타입 에러가 발생했습니다.
     */

     • throw error; 생성한 에러 객체로 에러를 발생시킨다
   • console의 error() 메소드를 사용하면 실제 에러처럼 출력할 수 있다

8. try catch문

   try {
     [statements]
   } catch (err) {
     [statements] // 에러가 발생했을 때 동작할 코드
   } finally {
     [statements] // 항상 실행할 코드
   }

   • try문에서 에러가 발생하면 catch문의 파라미터로 해당 에러 객체가 전달된다
   • finally문
     • try catch문이 모두 실행된 다음 항상 실행된다
     • try catch문에서 return문이 실행되더라도 항상 실행된다
     • finally문에서 에러가 발생해도 위에 있는 catch문으로 넘어가지 않고, finally문 내부에서 try catch문을 다시 써야 에러 객체를 다룰 수 있다
   • 함수 내부에서 try catch문을 활용하면 함수를 실행하다가 에러가 발생해도 외부의 코드 실행이 멈추지 않는다
   • try catch 문은 예외 처리(Exceiption Handling)만 가능하다
     • 예외(Exceiption): 실행 가능한 코드에서 발생한 에러(ReferenceError, TypeError, ...)
     • SyntaxError는 예외가 아니므로 try catch 문에서 처리할 수 없다

자바스크립트의 유용한 내부 기능

1. 배열 메소드

   • foreach 각 배열 요소들을 하나씩 전달 받아서 반복 실행하는 메소드

     • 형식

       array.forEach(function (element, [index], [arr]) {statements})

       • element 배열의 각 요소가 할당된다
       • index 요소의 인덱스가 할당된다
       • arr 실행되고 있는 배열이 할당된다

     • 예시

       const members = ['A', 'B', 'C', 'D'];
       
       members.forEach((member) => { 
         console.log(`${member}님이 입장하셨습니다.`);
       });
       /*
       for (let member of members) {
         console.log(`${member}님이 입장하셨습니다.`);
       }
       */

       /*
       A님이 입장하셨습니다.
       B님이 입장하셨습니다.
       C님이 입장하셨습니다.
       D님이 입장하셨습니다.
       */

   • map foreach와 작성 문법은 똑같지만 map 메소드는 호출할 때 작성한 콜백 함수의 리턴값들을 요소로 하는 배열을 리턴한다

   • foreach, map의 특징

     • 반복 중에 해당 배열의 길이가 늘어나도 초기의 배열 길이만큼만 반복된다
     • 반복 중에 해당 배열의 길이가 줄어들면 반복 횟수도 그만큼 줄어든다

   • filter 조건에 맞는 요소들만 추려내서 새로운 배열을 리턴하는 메소드

     const variable = array.fliter((element, [index]) => condition);

     • 콜백함수가 true를 리턴하는 요소들만으로 구성된 배열을 리턴한다

   • find 조건에 맞는 요소의 값을 리턴한다

     const variable = array.find((element, [index]) => condition);

     • 콜백함수가 true를 리턴하는 요소가 여러개일 경우에도 조건을 만족하는 첫 요소의 값만 리턴하고 반복이 종료된다
     • 콜백함수가 true를 리턴하는 요소가 없다면 undefined를 리턴한다

   • some 조건을 만족하는 요소가 1개 이상 있는지 확인하는 메소드

     const variable = array.some((element, [index]) => condition);

     • 조건을 만족하는 요소가 있다면 true를 리턴하고 아니라면 false를 리턴한다
     • 콜백함수가 true를 리턴한다면 true를 리턴하고 반복이 종료된다

   • every 조건을 만족하지 않는 요소가 1개 이상 있는지 확인하는 메소드

     const variable = array.every((element, [index]) => condition);

     • 조건을 만족하지 않는 요소가 있다면 false를 리턴하고 아니라면 true를 리턴한다
     • 콜백함수가 false를 리턴한다면 false를 리턴하고 반복이 종료된다

   • reduce

     array.reduce((acc, el, i, arr) => {
       return nextAccValue;
     }, [initialAccValue]);

     • acc 누산기(Accumulator)
       - 매번 콜백 함수가 반복해서 동작할 때, 직전에 동작한 콜백 함수가 리턴한 값을 전달 받는 파라미터
     • 마지막에 실행되는 콜백 함수의 리턴값을 그대로 리턴한다
     • 첫 번째 accumulator의 값을 reduce 메소드의 두 번째 아규먼트(initialAccValue)로 전달해줄 수 있다
     • reduce 메소드의 두 번째 아규먼트를 생략한다면 첫 번째 콜백 함수는 실행되지 않고, 두 번째 콜백 함수의 accumulator는 array[0]의 값을 갖는다

   • array.sort() 배열 정렬 메소드

     • 아무런 아규먼트도 전달하지 않을 때 기본적으로 유니코드에 정의된 문자열 순서에 따라 정렬된다
     • 숫자를 정렬하고 싶다면 다음과 같이 작성하면 된다

     const numbers = [1, 10, 4, 21, 36000];
     
     // 오름차순 정렬
     numbers.sort((a, b) => a - b);
     
     // 내림차순 정렬
     numbers.sort((a, b) => b - a);

     • sort() 메소드가 오름차순/내림차순 정렬을 하는 원리

   • array.reverse() 배열의 순서를 뒤집는 메소드

   • sort(), reverse() 메소드는 원본 배열의 요소들의 순서를 정렬해주기 때문에 원래의 순서로 되돌릴 수 없다

2. Map, Set(ES2015)

   • Map 이름이 있는 데이터를 저장하고 메소드를 통해서 프로퍼티 값에 접근할 수 있는 데이터 구조

     // Map 생성
     const newMap = new Map();
     
     // set 메소드
     // newMap.set(key, value);
     newMap.set('title', '문자열 key');
     newMap.set(2017, '숫자형 key');
     newMap.set(true, '불린형 key');
     
     // get 메소드
     // newMap.get(key)
     console.log(newMap.get(2017)); // 숫자형 key
     console.log(newMap.get(true)); // 불린형 key
     console.log(newMap.get('title')); // 문자열 key
     console.log(newMap.get('name')); // undefined
     
     // has 메소드
     // newMap.has(key)
     console.log(newMap.has('title')); // true
     console.log(newMap.has('name')); // false
     
     // size 프로퍼티
     console.log(newMap.size); // 3
     
     // delete 메소드
     // newMap.delete(key)
     newMap.delete(true);
     console.log(newMap.get(true)); // undefined
     console.log(newMap.size); // 2
     
     // clear 메소드
     newMap.clear();
     console.log(newMap.get(2017)); // undefined
     console.log(newMap.size); // 0

   • Set 여러 개의 값을 순서대로 저장하고 자체 메소드를 통해서 값을 다루는 데이터 구조

     // Set 생성
     const members = new Set();
     
     // add 메소드
     members.add('A'); // Set(1) {"A"}
     members.add('B'); // Set(2) {"A", "B"}
     members.add('C'); // Set(3) {"A", "B", "C"}
     members.add('D'); // Set(4) {"A", "B", "C", "D"}
     
     // has 메소드
     console.log(members.has('C')); // true
     console.log(members.has('E')); // false
     
     // size 프로퍼티
     console.log(members.size); // 4
     
     // delete 메소드
     members.delete('E'); // false
     console.log(members.size); // 4
     members.delete('D'); // true
     console.log(members.size); // 3
     
     // clear 메소드
     members.clear();
     console.log(members.size); // 0

     • 개별 값에 바로 접근하는 방법이 없다
     • for...of 반복문처럼 전체 요소를 한꺼번에 다룰 때, 반복되는 그 순간에 개별 값에 접근할 수 있다
     • 집합처럼 요소끼리 중복되는 값을 허용하지 않는다
     • 중복된 값을 추가하려고 하면 그 값은 무시된다
     • 처음 Set을 생성할 때 아규먼트로 배열을 전달해 배열 내에서 중복을 제거한 값들의 묶음을 만들 수도 있다

자바스크립트 모듈

1. 모듈화(ES2015)
   • 모듈화(Modularization): 공통된 기능이나 특별한 목적에 따라 각각의 파일로 분리하는 과정
   • 모듈(Module): 모듈화 과정에서 분리된 파일
2. 모듈 파일의 조건
   • 파일만의 독립적인 스코프를 가져야 한다(Module Scope)
   • Module Scope를 만드려면 script 태그에 type="module" 속성을 지정해줘야 한다
3. 모듈 문법
   • import { parameters } from 'PATH/JS'; parameters에 다른 파일에서 export된 변수나 함수들을 넣어 import할 수 있다
     • as 키워드로 alias를 설정하여 가져올 수 있다
       import { export1 as alias1, export2 } from 'PATH/JS';
     • Wildcard Character(*)로 모듈 전체를 가져올 수 있다
       import * as name from 'PATH/JS';
       • name이라는 객체 형태로 사용한다
   • export export1 변수나 함수 앞에 export 키워드를 붙여주면 다른 모듈 파일에서 import할 수 있게 된다(named export
     • export { export1 as alias1, export2 as alias2 } 형식으로 한꺼번에, alias를 활용해서 export할 수 있다
     • export default export1 default 키워드로 하나의 대상만을 export할 수 있다(default export)
     • default 값을 import할 때에는 alias를 필수적으로 지정해야 한다
     • import default_alias, { parameters } from 'PATH/JS'; 형식으로 imprt할 수 있다
     • 모듈 전체를 import한 경우 name.default로 default 값에 접근할 수 있다
     • export default { export1, export2, ... }; 모듈 내 여러 개의 값을 객체 형태로 default export할 수 있다
   • HTML 문서에는 자바스크립트 코드의 진입점 역할을하는 파일 하나만 불러와도 된다

Feedback

• 내용이 많아서 가독성이 안좋고 한 가지 주제에 집중하거나 더 많은 내용을 담기가 힘들었다. 긴 강의는 글을 나눠서 정리하는 것이 좋을 것 같다
• prototype, class, closure, Execution Context와 같은 개념들은 따로 공부해야겠다
• 에키마스크립트의 새로운 문법이 등장할 때마다 공부하는 것이 좋겠다
• 브라우저가 어떤 ES버전을 지원하는지 염두해두고 개발해야겠다
• 다음으로 '자바스크립트 웹 개발 기본기' 코드잇 콘텐츠를 수강할 예정이다

Reference

• ECMAScript - Wikipedia
• Symbol - JavaScript | MDN
• BigInt - JavaScript | MDN
• Functions - JavaScript | MDN
• Function expression - JavaScript | MDN
• First-class Function - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
• Spread syntax (...) - JavaScript | MDN
• Array.prototype.forEach() - JavaScript | MDN
• import - JavaScript | MDN
• 모던 자바스크립트 - 자바스크립트 강의 | 코드잇