[JavaScript] ES5와 ES6의 차이

Hyunji·2022년 4월 12일
0

공부

목록 보기
18/35
post-thumbnail

먼저, ES란?
ECMA Script (European Computer Manufacture's Association Script)

  • 정보와 통신 시스템을 위한 국제적 표준화 기구 ECMA International에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어이다
  • ECMA-262 Github
  • JavaScript 와 같은 스크립트 언어의 표준을 말한다
  • JavaScriptECMA Script 를 기반으로 하며 ECMA Script 사양을 준수하는 범용 스크립트 언어이다
  • 뒤에 숫자는 버전을 뜻하는데 ES5 는 2009년, ES6 은 2015년에 출시되었다

ES6에 추가된 기능과, ES5 와의 차이점은?

1. let , const 키워드 추가

  • 기존 var 키워드는 함수 레벨 스코프를 가지며 암묵적 재할당이 가능하였다
  • 단점을 보완하기 위해 블록 레벨 스코프를 가지며 재할당이 가능한 let , const 키워드가 추가되었다
// var는 재선언, 재할당 가능
var a = 1;
var a = 2;
a = 3;

// let은 재할당만 가능
let b = 1;
// let b =2; Identifier 'b' has already been declared
b = 3;

// const는 둘 다 불가능
const c = 1;
// const c = 2; Identifier 'c' has already been declared
// c = 3; Assignment to constant variable

// 스코프의 차이

// var은 블록 레벨 스코프에서는 접근가능 하지만 함수 레벨 스코프에서는 접근 불가능
{
  var a = 1;
}
function funVar() {
  var b = 1;
}

console.log(a); // 1
funVar();
console.log(b); // b is not defined

// let은 블록, 함수 레벨 스코프 둘 다 접근 불가능
{
  let a = 1;
}
function funcLet() {
  let b = 1;
}
console.log(a) // a is not defined
funcLet();
console.log(b) // b is not defined

// const도 블록, 함수 레벨 스코프 둘 다 접근 불가능
{
  const a = 1;
}
function funcConst() {
  const b = 1;
}
console.log(a) // a is not defined
funcConst();
console.log(b) // b is not defined

2. Arrow function 추가

  • Arrow function (화살표 함수) 가 추가되어 함수를 간결하게 나타낼 수 있다
  • Arrow functionlexical this 를 따른다
    • 화살표 함수의 this 는 항상 상위 scope의 this를 말한다. 자신만의 this 를 생성하지 않는 익명 함수다(lexical this)
  • 매개변수가 하나일 때 () 괄호 생략 가능, {} 소괄호 및 return 도 생략 가능하다
  • this, prototype, arguments 세 가지가 없다
  • 익명 함수로만 사용할 수 있다
    • lambda 식과 같은 방식
// ES5
function sum (a,b) {
  return a+b;
}

// ES6
const sum = (a,b) => a+b;

2-(1) this

// ES5
var _this = this
$('.btn').click(function(event){
  _this.sendData()
})

// ES6
$('.btn').click((event) => {
  this.snedData()
})
  • 일반 함수는 호출할 때 어떻게 호출되는지에 따라 this 에 바인딩할 객체가 동적으로 결정된다
  • 화살표 함수는 선언할 때 this 에 바인딩할 객체가 정적으로 결정된다

2-(2) prototype

var Foo = () => {};
var foo = new Foo();  
// TypeError

2-(3) arguments

const myFunction = () => {
  console.log(arguments);			
}
//Uncaught ReferenceError

const myFunction = (...args) => {
  console.log(args);
}

myFunction(1,2,3,4)
// [1,2,3,4]

Arrow function 을 사용하면 안 되는 경우

  1. 객체의 메소드에서 사용 시
const person = {
  name: 'Lee',
  sayHello: () => console.log(`Hi $(this.name)`)
};

person.sayHello();
// Hi undefined
  • Arrow function 은 상위 scope의 this를 계승하기 때문에 이 경우에는 전역 객체를 가리키게 된다
  1. addEventListner 의 콜백 함수
const btn = document.getElementById('btn');

btn.addEventListner('click'¸ () => {
  console.log(this);
});

// window

3. Template Literal

// ES5
console.log('Hi' + user + 'Today is' date);

// ES6
console.log(`Hi ${user} Today is ${date}`);
  • 백틱 ``(back-ticked) 으로 문자열과 값을 간단하게 사용 가능하다
  • ${} 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식을 삽입 가능하게 한다

4. Multi-line string

// ES5
var roadPoem = 'Then took the other, as just as fair,\n\t'
    + 'And having perhaps the better claim\n\t'
    + 'Because it was grassy and wanted wear,\n\t'
    + 'Though as for that the passing there\n\t'
    + 'Had worn them really about the same,\n\t'

var fourAgreements = 'You have the right to be you.\n\
    You can only be you when you do your best.'


// ES6
var roadPoem = `Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear,
    Though as for that the passing there
    Had worn them really about the same,`

var fourAgreements = `You have the right to be you.
    You can only be you when you do your best.````

- 백틱 `` (back-ticked)을 이용해서 여러 줄의 문자열을 처리하기 수월해졌다

### 5. Destructuring Assignment
```javascript
// ES5
var res = $('body').data(),
    first = res.first,
    second = res.second

// ES6
var { first, second } = [10, 20, 30, 40, 50];
console.log(a);
// 10
console.log(b);
// 20
console.log(rest);
//[30,40,50]

// array destructuring
const arr = [1, 2, 3];
const [one, two, three] = arr;

// object destructuring
const obj = { firstName: 'Gildong', lastName: 'Hong' };
const { lastName, firstName } = obj;
  • 비구조화 할당, 배열이나 객체의 요소를 해체하여 별개의 변수로 추출할 수 있다
  • 배열은 순서를 중요하게 여기게 되고, 객체는 키캆을 중요하게 여겨 순서를 바꾸어도 동일하게 동작한다 (값만 추출)

6. Enhanced Object Literals

6-(1)

var language = 'js
var langs = {
  language: language,		// ES5
  language					// ES6
};
  • 속성과 값이 같으면 1개만 기입 가능

6-(2)

const shab = {
  coding() {
    coding: function()
    console.log('Hello World');
  }
}
shab.coding();

// Hello World
  • 속성에 함수 정의할 때 function 생략 가능

7. Promises

  • 비동기를 위한 객체, 어떤 일의 진행 상태를 나타내는 객체로 상태 이라는 속성을 갖고 있다
  • resolve, reject를 호출하여 진행 상태를 결정할 수 있다
  • promise 의 값은 resolve, reject를 호출할 때 넘긴 인자에 의해 결정된다
  • then() , catch() 는 일의 진행 상태를 나타내는 객체이다
  • promise가 fullfilled일 때 then()에 등록한 함수를 실행하고, promise가 rejected 일 때는 아무것도 하지 않는다

7-(1) 동기

  • 요청과 응답이 동시에 일어난다 설계가 간단하고 직관적이지만 응답이 있을 때까지 대기해야 한다

7-(2) 비동기

// ES5
setTimeout(function() {
  console.log('Wow!')
}, 1000)

// ES6
var wait1000 = () => new Promise((resolve, reject) => {
  setTimeout(resolve, 1000)
	}
)
wait1000()
	.then(function() {
  		console.log('Yay!')
  		return wait1000()
	})
	.then(function() {
  		console.log('YayYay!')
	});
  • 요청과 응답이 동시에 일어나지 않는다
  • 응답이 오기 전까지 다른 요청이나 작업이 가능하다

8. Default parameter 추가

// ES5
var bmi = function (height, weight) {
  var height = height || 184;
  var weight = weight || 84;
  return weight / (height * height / 10000);
}

// ES6
const bmi = function (height = 184, weight = 84) {
  return weight / (height * height /10000);
}
  • 인자가 없거나 undefined 인 경우에 들어갈 기본값을 설정해 놓아야 한다
  • ES6에서는 기본 매개 변수(Default Parameters)를 제공하고, 매개변수가 없을 경우 지정한 기본값을 인자로 전달한다

9. Module

// ES5
var service = require('module.js')
console.log(service.port) // 3000

// ES6
import {port, getAccounts} from 'module'
console.log(port) // 3000

import * as service from 'module'
console.log(service.port) // 3000
  • 재사용하기 위한 코드 조각을 뜻하며, 세부사항은 캡슐화 시키고, API 부분만 외부에 노출시킨 코드들이다
  • 모듈 스코프를 가지며, export, import 키워드로 사용한다

10. Class

class Note {
  constructor(text) {
    this.text = text;
  }
}
  • 객체 생성 방식 중 하나, 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍이다
  • 자바스크립트에서 클래스는 객체를 생성하는 함수라고 생각한다 (생성자 함수)
  • 단, 생성자 함수와 동일하게 동작하지 않으며, 클래스가 엄격하며 호이스팅이 발생하지 않는 것처럼 동작하는 let, const 키워드처럼 동작하게 된다

11. string method (includes, startsWith, endsWith)

const text = 'Hello World Hong gil dong';
text.includes('Hong')
// true
text.startsWith('Hello')
// true
text.endsWith('dong')
// true
  • includes (포함되어 있는지), startsWith (시작되는지), endsWith (끝나는지)
  • true/false 값을 리턴하며 문자열 메서드들로 검사 로직을 수행할 수 있다
    • ex) 이메일에 포함되는지, 홍 씨로 시작하는지, 끝나는지 등등

참고:
https://webapplog.com/es6/
https://poiemaweb.com/es6-block-scope

profile
성장중인 개발자

0개의 댓글