ES6의 특징 (1)

ES6 : 6번째 ECMAScript, 2015

 

ECMAScript (ES) : 자바스크립트를 표준화 하기 위해 만들어진, ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어

 

---

변수 선언 방법의 변화

 

const

객체와 함께 사용할 때를 제외하고는 변경 불가능한 변수. 특정 이벤트를 실행하는 버튼이나 특정 요소를 정의할 때 사용

// ES5
var MyBtn = document.getElementById('myBtn');
 
// ES6
const MyBtn = document.getElementById('myBtn');

위 코드에서 const는 변경되지 않으며 재할당 할 수 없음. 새로운 값을 제공하려고 하면 오류 반환됨.

 

let

변경 가능한 변수. 새로운 값을 가질 수도 있고 재할당도 가능. 

let name = 'hello';
 
name = 'world';
 
console.log(name);
// 출력 => world

es5 이하 문법에서 var로 선언된 변수가 '호이스팅 (hoisting)' 되는 현상 발생. 이를 방지하기 위해 변경 가능한 변수에 대해서는 let으로 정의해야함.

 

 

---

Template Literals (템플릿 리터럴)

 

문자열을 연결하기 위해 더하기( + ) 연산자를 사용할 필요 없이, 백틱 ( ` ) 을 사용하여 문자열 내에서 변수 사용 가능. 

 

// ES5
var a = "이준생";
var b = "이직 ";
var c = 1;
var str = "내 이름은 " + a + "이고 " + b + c + "번 했어요.";
console.log(str);   // 내 이름은 이준생이고 이직 1번 했어요.


// ES6
let a = "이준생";
let b = "이직 ";
let c = 1;
let str = `내 이름은 ${a}이고 ${b + c}에 있어요.`;
console.log(str);   // 내 이름은 이준생이고 이직 1번 했어요.

+ 연산자로 문자열을 연결해주는 것보다 가독성이 뛰어남.

 

---

Arrow functions (화살표 함수)

 

js에서 함수를 정의하는 function 키워드 없이 함수를 만들수 있고, return 키워드 없이 식을 계산한 값이 자동으로 반환됨.

() 안에 함수의 인자가 들어가고, => 오른쪽에 결과를 반환.

 

// ES5
function myFunc(name) {
  return "안녕 " + name;
}
 
console.log(myFunc("이준생")); // 출력 => 안녕 이준생

 

// ES6 화살표 함수
// 함수 myFunc는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환.
const myFunc = (name) => {
  return `안녕 ${name}`;
};
console.log(myFunc("이준생"));
 
// 'return' 키워드를 사용하지 않아도 됨
const myFunc = (name) => `안녕 ${name}`;
console.log(myFunc("이준생")); // 출력 => 안녕 이준생

화살표 함수가 코드가 더 간결하고 가독성이 좋음!

 

 

Default parameters (기본 매개변수)

 

// ES5
var foo = (a, b, c) => {
  console.log(a, b, c);
};
 
foo("a");
//a undefined undefined

기존 es5의 경우, 파라미터 a의 값은 들어왔지만 b와 c는 값을 할당 받지 못해 undefined가 출력됨.

기본 값을 설정하기 위해 파라미터가 undefined 인지 체크하고 값을 할당해줘야 했음.

 

// ES6
const foo = (a, b = "b", c = "c") => {
  console.log(a, b, c);
};
 
foo("a");
//a b c

es6에서는 default parameter 설정 가능.

함수 실행 시, b와 c에 값을 별도고 지정하지 않을 경우 default로 설정된 “b”, “c”가 출력됨.

 

---

반복문 (for in vs for of)

for in

: 객체의 속성 또는 배열의 요소에 대해 반복하는 기능 수행. 즉, 객체의 속성들을 순화하기 위한 구문

 

for of

: 반복 가능한 객체 (Array, Map, Set 등) 를 반복하는 기능 수행. 즉, 객체의 요소들 (Data) 을 순회하기 위한 구문

  forEach()문과 달리 break, continue, return 구문 모두 사용 가능.

 

let list = [4, 5, 6];
 
for (let i in list) {
console.log(i); // 결과 : "0", "1", "2"
}
 
for (let i of list) {
console.log(i); // 결과 : "4", "5", "6"
}

 

for in 을 사용하지 말아야 할 이유

1. idx (인덱스)에 할당되는 값이 string (문자열) 이다.
2. 배열 요소만 순회하는 것이 아니라, prototype으로 상위에 추가된 객체들까지도 순회한다.

 

 

⇒ getIndex 함수를 순회하지 않음!

또, for in 에서는 index를 받았지만 for of에서는 배열의 각 값을 하나로 보고 출력.