[항해99] Week02 회고 / ES? ES5와 ES6 차이

알고리즘 마라톤이 끝난 한 주였다!

비록 챌린지까지 다 풀지는 못했지만 앞으로 틈틈히 풀어가야겠다.

알고리즘 주차 마지막 날 까지도 배우고 습득한 것들은 많은데, 실력 자체의 향상은 있나? 라는 질문을 가지긴 했다..

(정보습득과 소화는 갭이 크다고 생각한다)그래도 첫문제부터 접근방식이나 풀이를 적었던 글들을 다시 보면서'이렇게 쉬운 문제를 왜그렇게 복잡하게 접근했지? 어렵게 풀었지?' 라는 생각을 많이 했다. 조금 실력이 는 것 같기도?

 

새로운 팀에서 좋았던 점은 하루 세 번 정도 스터디 시간을 가지며 오전 오후 시간을 느슨하게 사용하지 않았던 점!

각자 발표할 문제와 공유할 내용을 정리하면서 자연스럽게 두번, 세번씩 복습하는 과정이 정말 좋았다.

작은 고민도 생겼는데.. 평소에 의사소통이 나의 장점이라고 생각했지만 내가 이해하고 받아들인걸 다른 사람에게 설명하는게 정말 어렵다고 느꼈다. 단어 하나에도 정확한 정보를 전달하려고 하다보니, 문장 자체가 길어지고..

이걸 방지하려고 쉽게 설명하면 설명이 빈약한것 같고.. 이것도 시간과 노력이 해결 해주겠지

 

금요일은 주특기 주차 발제가 있었다.

개인과제, 팀과제가 있고 새로운 팀이 만들어졌다.

정말 조장은 하기 싫었는데 조장이 됐다... 이왕 이렇게 된거 앞서 겪은 조장들을 본받아 최선을 다 해 봐야겠다.

우리 조의 목표는 모든 조원이 주특기에 관해 최대한 배우고 얻어가는 것

그런데 겪어보니 내가 제일 부족한 것 같다.

 

---

JavaScript의 ES란?

자바스크립트 이전의 웹페이지는 아래 사진과 같이 단순히 '문서를 웹으로 열어본다' 정도였다.

 

자바스크립트는 이런 정적인(Static) 문서를 조금 더 동적(Dynamic)으로 표현할 수 있도록 만들어졌고 이를 Ecma International에서 ECMAScript(ECMA-262)라는 이름으로 현재의 자바스크립트 표준을 제정했다.

---

ES5/ES6 문법 차이

① Arrow Function 

 

this, prototype, arguments 세 가지가 없다

익명 함수로만 사용할 수 있다

lambda식과 같은 방식

 

⑴ this

일반 함수는 호출할 때 어떻게 호출되는지에 따라 this에 바인딩할 객체가 동적으로 결정되지만, 화살표 함수는 선언할 때 this에 바인딩할 객체가 정적으로 결정된다 화살표 함수의 this는 항상 상위 scope의 this를 말한다 자신만의 this를 생성하지 않는 익명 함수다 (Lexical this)

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

 

⑵ prototype

생성자 함수로 사용할 수 없다 new 사용 시 오류 발생한다

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

 

⑶ arguments

매개변수를 지정하지 않아도 arguments 프로퍼티가 함수에 자동으로 생성되어 사용 가능했었으나, arguments가 없어졌다 대신 args가 생겼다

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

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

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

 

 

@ 호이스팅(hoisting) 될 수 없다

호이스팅(hoisting)

= 들어올리다

코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것

선언 부분만 호이스팅 한다 할당 부분은 호이스팅하지 않는다

함수 내에서 선언한 함수 범위(function scope)의 변수는, 해당 함수 최상위로 호이스팅 된다 

function hoistingTest() {
   console.log(x);			// undefined
   var x = 100;
   console.log(x);			// 100
}

 

첫 번째 콘솔 로그에 출력된 undefined는 x의 값이 할당되지 않았다는 의미다

x값 할당 후 두 번째 콘솔 로그에는 할당한 값이 출력된다

 

함수 밖에서 선언한 전역 범위(global scope)의 전역 변수는, script 단위의 최상위로 호이스팅 된다

hoistingTest();

function hoistingTest() {
   console.log("test");
}

hoistingTest() 함수 위에서 먼저 호출해도 "test"가 콘솔 로그에 출력되는 것을 볼 수 있다

 

hoisting();

const hoisting = () => {
   console.log("test");
}

=> Error: Cannot access 'hoisting' before initialization

 

하지만 arrow function는 호이스팅되지 않기 때문에 이와 같이 함수 위에서 먼저 호출하면 에러가 발생한다

 

 

arrow funciton을 사용하면 안 되는 경우

 

⑴ 객체의 메소드에서 사용 시

arrow function은 상위 scope의 this를 계승하기 때문에 이 경우 전역 객체를 가리키게 된다

const person = {
  name: 'Lee',
  sayHello: () => console.log(`Hi ${this.name}`)
};
 
person.sayHello();		Hi undefined

 

⑵ addEventListener의 콜백 함수

const btn = document.getElementById('btn');
 
btn.addEventListener('click', () => {
    console.log(this);			window    
});

 

 

② Template Literal

ES5
console.log('Hi' + user + 'Today is' + date);
ES6
console.log(`Hi ${user} Today is ${date}`);

` 백틱(back-ticked)으로 문자열과 값을 간단하게 사용 가능하다

 

 

③ Default Parameters

인자가 없거나 'undefined'인 경우에 들어갈 기본값을 설정해 놓아야 한다

ES6에서는 기본 매개 변수(Default Parameters)를 제공하고, 매개변수가 없을 경우 지정한 기본값을 인자로 전달한다

ES5
function sayHello(name, greeting) {
   name = (typeof name !== 'undefined') ? name : 'Student';
   greeting = (typeof greeting !== 'undefined') ? greeting : 'Welcome'; 
   
   return `${greeting} ${name}!`;
}
ES6
function sayHello(name = 'Student', greeting= 'Hi') {
   return `${greeting} ${name}!`;
}

greet();		Hi Student!

 

 

④ Multi-line Strings

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

ES5
var content = 'Hi,\n\t'
	+ 'My name is SHAB\n\t'
ES6
var content = `Hi,
	My name is SHAB`

 

 

⑤ Destructuring Assignment 

비구조화 할당, 배열이나 객체의 요소를 해체하여 별개의 변수로 추출할 수 있다

ES5
var res = $('body').data(),
   first = res.first,
   second = res.second
ES6
var { first, second } = $('body').data();

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a);			10
console.log(b);			20
console.log(rest);		[30, 40, 50]

 

 

⑥ Enhanced Object Literals

객체 정의 방식이 개선됐다

 

⑴ 속성과 값이 같으면 1개만 기입 가능

var language = 'js
var langs = {
  language: language,		ES5
  language			ES6
};
console.log(josh);	{language: "javascript"}

 

⑵ 속성에 함수 정의할 때 function 생략 가능

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

 

 

⑦ Promises

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

 

⑴ 동기

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

ex) 은행 계좌이체

 

⑵ 비동기

요청과 응답이 동시에 일어나지 않는다 응답이 오기 전까지 다른 요청이나 작업이 가능하다

 

ES5
setTimeout(function(){
  console.log('Yay!')
}, 1000)
ES6
var wait1000 = () => new Promise((resolve, reject) => {
   setTimeout(resolve, 1000)
   }
)
wait1000()
    .then(function() {
        console.log('WOW!')
        return wait1000()
    })
    .then(function() {
        console.log('WOWWOW!')
    });

 

 

⑧ Block-Scoped Constructs Let and Const

대부분의 프로그래밍 언어는 블록 레벨 스코프(Block-level scope)지만, Java Script는 함수 레벨 스코프(Function-level scope)를 따른다 블록 레벨 스코프를 따르는 변수를 선언하기 위해 let, const를 제공한다

let vs const

재할당 자유롭다 vs 상수를 위해 사용, 재할당이 안 된다

 

⑴ 블록 레벨 스코프(Block-level scope)

모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하고 코드 블록 외에서는 참조할 수 없다

 

⑵ 함수 레벨 스코프(Function-level scope)

함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다

 

ES6에서 var 키워드는 사용하지 않도록 하고, const 키워드를 사용하도록 하자

 

 

⑨ Classes

new 키워드로 Class 생성 가능, constructor() 생성자 함수로 속성 설정 가능, 메서드 정의, 상속, 부모 메서드 호출 가능한 Class를 사용할 수 있다 프로토 타입과 클래스가 다르지 않다 = 프로토 타입으로 상속을 구현했을 경우데 클래스 문법을 사용할 수 있다

class Note {
	constructor(text) {	
		this.text = text;
	}
}

 

 

⑩ Modules

import sayHi from "module.js";
sayHi("hi");

import * as myModule from "module.js";
myModule.sayHi("hi");

import { sayHi as A } from "module.js";

출처:[#JavaScript] ECMA Script, ES5와 ES6의 차이, ES6 문법 특징 (tistory.com)

[#JavaScript] ECMA Script, ES5와 ES6의 차이, ES6 문법 특징

https://webapplog.com/es6/