공부방

ES6 본문

프로젝트 회고

ES6

코딩 화이팅 2023. 12. 17. 14:06

ES6란?

ECMAScript 표준의 가장 최신 버전. 현대적인 코드를 사용함으로써 코드가 간결해지고 생산성을 향상시킬 수 있음. ES6의 기능으로는

변수 선언 방식의 차이

  1. var는 재정의와 재선언이 모두 가능.
  2. let은 가변변수로 재정의가 가능하지만 재선언은 불가능.
  3. const는 불변변수로 재선언과 재정의 모두가 불가능.
//변수 선언
var x = 2;
// 재정의
x = 4;
// 재선언
var x = 4;

이런 var의 문제점

  1. 변수 선언이 유연해서 예기치 못한 값을 반환할 수 있음.
  2. 코드가 길어진다면 어디에서 어떻게 사용될지 파악하기 힘듬.
  3. 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
  4. 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환.(호이스팅)
  5. 따라서 var보다는 let, const를 사용하는 것을 권장 

템플릿 리터럴

  • ES6부터 새로 도입된 문자열 표기법으로, 문자열 생성시 따옴표 대신, 백틱(`)을 사용. 따옴표와 달리 백틱 안에서는 줄바꿈이 반영됨. 또한 문자열 사이에 변수나 연산을 넣을 때는 ${} 사이에 표현식을 삽입
var jsp = "자바스크립트";

// 기존 코드
console.log("이건 " + jsp + "입니다.");

// 템플릿 리터럴 방식
console.log(`이건 ${jsp}입니다.`);

// 출력 결과 -> 이건 자바스크립트입니다.

화살표 함수

함수 표현식을 보다 단순하고 간결하게 작성하는 문법

// 기본 함수 형식
let sum = function(a, b) {
  return a + b;
};

// 화살표 함수 형식
let sum = (a, b) => a + b;

 

 

호이스팅이란?

인터프리터가 코드를 실행하기 전에 함수, 변수,클래스 또는 임포트의 선언문을 해당 맨 위로 이동시키는 과정

'프로젝트 회고' 카테고리의 다른 글

WebSocket  (0) 2023.12.19
React  (1) 2023.12.19
TypeScript  (0) 2023.12.18
React의 DOM과 생명주기  (0) 2023.12.18