ES6

ES6 ECMAScript 6는 2015년에 도입된 자바스트립트의 표준안으로 이전보다 간결하고 효율적인 코드 작성을 가능하게 하는 새로운 기능과 문법이 추가됨

let & const

ES5까지는 var을 이용해서 변수를 선언했다. 이는 다음과 같은 문제를 일으켰다
1. 변수 호이스팅 : 변수 선언하기 전에 참조할 수 있음
- 호이스팅 : var 선언문 처럼 코드의 맨 앞으로 옮겨진 것처럼 동작하는 특성
2. 변수 중복 선언 허용
3. 전역 단위로 호이스팅 : 블록 단위로 동작하지 않음
-> 전역 변수로 인한 문제가 발생해서 ES6부터는 let과 const 키워드를 도입

const

• 상수 선언 : 값 변경 불가(재할당 x, 속성 변경은 가능)
• 선언과 할당을 한 줄에 작성해야함
• 블록 단위 scope

let

• 블록 단위의 변수 선언
• 유효 범위가 블록 단위
• 호이스팅 지원 x -> 선언 필수

  let msg = 'GLOBAL';
  function outer() {
    let msg = 'OUTER';
    console.log(msg); //outer
    if (true) {
      let msg = 'BLOCK';
      console.log(msg); //block
    }
    console.log(msg); //outer
  }
  console.log(msg); //global
  outer();
  // let msg = 'hi'; //error
  console.log(msg); //global

기본 파라미터 & 가변 파라미터

가변 파라미터 Rest Parameter

• 전달하는 파라미터의 개수를 정하지 않고 적용
• ... 연산자 사용
• 매칭되지 않은 인수를 배열로 전달

구조분해 할당 Destructing Assignment

• 한번에 여러 변수에 할당

배열 구조분해 할당

let arr = [10, 20, 30, 40]; 

1. 기본적인 구조분해 할당

   let [a1, a2, a3] = arr;

2. 일부 요소 건너 뛰기

   let [, a4, a5, a6] = arr; //3개만 할당

3. 기본값 설정

   const zoo = ['panda', 'koala'];
   const [an1, an2, an3 = 'monkey'] = zoo;

4. 중첩된 배열 구조 분해

   const nestedArray = [1, [2, 3], 4];
   const [num1, [numArr1, numArr2], num2] = nestedArray;

5. 변수 값 서로 봐꾸기
   [a, b] = [b, a];

객체 구조분해 할당

let user = { name: 'alice', age: 20, gender: 'M' };

1. 객체 구조분해 할당

• key 값을 기준으로 할당

  const { age, name } = user; 

2. 변수 이름 변경 (별칭 지정)

• 원래 키값 뒤에 :을 붙이고 별칭 지정

  const { name: userName, age: userAge } = user;

3. 기본값 설정

   const { salary = 5000, age: userAge1 = 30 } = user;

4. 중첩된 객체 구조 분해

   const person = {
     name: 'bob',
     info: {
       address: 'seoul',
       hobbise: ['reading', 'coding'],
     },
   };
   
   // Q 구조분해 할당을 통해 이름과 첫번째 취미를 출력하시오
   // const { name: name2, info:{address,hobbise} } = person;
   const {
     name: name2, // 별칭
     info: {
       address,
       hobbise: [firstHobby, secondHobby],
     },
   } = person;
   console.log(`name : ${name2}, 첫번째 취미 : ${firstHobby}`);

화살표 함수

const 함수명 = (파라미터) => {}

자바스크립트의 this

호출 중인 매서드르 보유한 객체가 this로 연결

• 일반 함수는 호출될 때 this가 전역 객체를 참조함
  해결
  1. 화살표 함수 : this가 바로 위 블록만 가리킴
  2. bind()
     • 함수의 this 값을 특정 객체에 영구적으로 바인딩한 새로운 함수 변환
     • 첫번째 인자로 전달된 객체가 this로 설정됨

ES6 객체 리터럴

• 변수명이 객체의 속성명과 같을 경우 변수명으로 할당 가능
• function 코드 없이 변수명(){}으로 선언 가능

템플릿 리터럴(Template Literal)

• ``로 묶인 문자열에 ${}를 이용해서 바로 할당

모듈

js 코드를 포함하고 있는 파일

• export는 모듈을 외부에 공개하고 import를 이용해서 다른 모듈에서 사용할 수 있게 하여 모듈을 연결할 수 있음

• package.json에 type:module을 추가해야함

• default export

  • 모듈에서 단 하나의 값을 기본값으로 내보낼때 사용
  • 가져올때 이름을 자유롭게 지정 가능

    export default function add(x, y) {
        return x + y;
    }

Promise 객체

• 비동기 처리
• 콜백 함수
  • 비동기 작업을 순차적으로 처리할때 중첩 문제 발생

promise 체인

비동기의 동기화

async/await

• .then 의 연속보다 직관적으로 보임

전개 연산자 spread operator

• ...연산자
• 객체 배열 내 값을 분해된 값으로 전달
• 기존의 값 복사 or 기본의 값 복사하면서 새로운 항목 추가할때 사용

Proxy

• 래핑할 수 있도록 하는 객체
• 변경된 것을 분석해서 업데이트
• json viewer pro
• Vue3의 반응성