ES6 특징

김재범·2022년 8월 15일
0

ES6 특징

ES란 ECMAScript의 약자로 자바스크립트의 표준, 규격을 나타내는 용어

ES6는 버전 6를 의미한다(2015년 출시)

1. var / let / const

기존에는 var만 사용할 수 있었는데 let과 const가 ES6부터 지원이 되었다고 한다.

let은 재할당 가능, 재선언 불가능한 변수
const는 재할당 불가, 재선언 불가능한 변수

2. 템플릿 리터털

백틱(`)과 $표시로 기존에 +를 이용해 지저분했던 문자열 + 변수를 가독성 좋게 작성할 수 있다
전체를 백틱으로 감싸고 변수를 ${ }안에 넣어주면 끝

3. 화살표 함수

기존에 function name( ){ return }의 방식을
const name = () => { }의 방식으로 사용할 수 있게 되었다.

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

주의할 점
1. 화살표 함수에서 받는 인자가 2개일 경우에는 ( )안에 넣어서 사용
2. 화살표 함수의 유일한 문장이 'return'일 때 'return'과 중괄호{ }를 생략할 수 있다.

4. 구조분해할당

객체와 배열에 일일이 변수를 할당하기 어려울 때 사용

  • 객체의 구조분해할당
	const child = {
      name : "철수",
      age : 58,
      school : "개발 공장"
    }
    
 const {name, age, school} = child
  • 배열의 구조분해할당
const classmates = ["철수","영희","훈이"]

const [child1, child2, child3] = classmates

5. 스프레드 연산자

배열 연산자를 ...형태로 사용하면 문자데이터 형태로 출력된다.
(1 레벨 깊이에서 효과적으로 동작, 다차원배열을 복사하는데 부적합하다)

6. Default Parameter

parameter의 초기값을 지정해주는 것
기존에는 함수안에 if문을 써서 값이 없을 때를 나타냈어야 했는데, 이를 다른 형식으로 사용할 수 있다.

기존에는 ( ) 값을 주면 undefined가 뜸

parameter 옆에 값을 지정해주면 값을 넣지 않아도 초기값이 형성된다.

그 외

삼항 연산자, short-hand-property, promise, class 등이 있다.

참조:
https://www.youtube.com/watch?v=36HrZHzPeuY
https://velog.io/@quin1392/ES6%EC%9D%98-%ED%8A%B9%EC%A7%95
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

profile
지식을 쌓고 있습니다.

0개의 댓글