Javascript ES6 문법정리

유승완·2022년 9월 23일
0

Today I Learned

목록 보기
6/11

1. let, const

let, const가 추가되어 기존 var만 있었을 때 보다 예측 가능한 코드를 작성 할 수 있게 되었다.

2. 템플릿 리터럴

${} 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능하다.

// ES5
var str1 = ', ';
var str2 = 'world!';
var str3 = 'Hello' + str1 + str2;

// ES6
let str1 = ', ';
let str2 = 'world!';
var str3 = `Hello ${str1} ${str2}`;

3. 객체 리터럴

이전보다 훨씬 간결해진 코드로 객체를 선언할 수 있다.
메소드에 더 이상 콜론(:)이나 function을 붙이지 않아도 된다.
함수명이 겹치는 경우에는 한 번만 쓸 수 있다.
객체의 프로퍼티를 동적으로 생성하려면 객체 리터럴 바깥에서 [text+1]과 같이 선언했어야 했는데, ES6부터는 객체 안에서 바로 속성으로 사용할 수 있다.

const myFn = function() {
  console.log('myFn');
};
const text = 'TEXT';
const obj = {
  inside() {
    console.log('객체 안에 바로 함수를 선언');
  },
  myFn,
  [text + 1]: '하나몬'
};
obj.inside(); // 출력값: 객체 안에 바로 함수를 선언
obj.myFn(); // 출력값: myFn
console.log(obj.TEXT1); // 출력값: 하나몬

4. 화살표 함수

함수 표현식을 화살표 함수로 표현할 수도 있다.
화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있게 되어 가독성 및 유지 보수성이 올라갔다.
만약 함수의 본문에 return만 있는 경우 화살표함수는 return과 {}를 생략할 수 있다.
return문에서 소괄호는 사용가능하다.

// ES5
function plusFn(a, b) { 
  return a + b; 
} 
// ES6
// 함수 표현식 - 화살표 함수
const plusFn = (a, b) => {
  return a + b;
}
// 함수 표현식 - 화살표 함수 (생략형)
const plusFn = (a, b) => a + b;

5. 구조 분해 할당

구조분해할당이란 객체나 배열에서 사용하며, 값을 해체한 후 개별 값을 변수에 새로 할당하는 과정을 말한다.

// 배열에서 Spread 사용
const arr = [1, 2, 3];
const [one, two, three] = arr;
one // 1
two // 2
three // 3
// 객체에서 Spread 사용
const obj = {
 firstName: '하나',
 lastName: '몬'
};
const { firstName, lastName } = obj;
firstName // 하나
lastName // 몬

6. Class

자바스크립트는 프로토타입 기반 객체 지향 언어이다.
클래스 기ㅏㄴ의 객체 지향 프로그래밍도 할 수 있게 Class키워드를 도입하였다.
자바스크립트에서 클래스는 내부적으로 프로토타입을 이용해서 만들어졌다.
클래스는 호이스팅이 let, const 키워드처럼 동작한다.

profile
나를 위한 기록

0개의 댓글