es2015+ 정리

Const, let

ES2015 이전에서 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 아래와 같은 특징이 있다. 이는 다른 언어와는 차별되는 특징(설계상 오류)으로 주의를 기울이지 않으면 심각한 문제를 일으킨다.

1. 함수 레벨 스코프

   • 전역 변수의 남발
   • for loop 초기화식에서 사용한 변수를 for loop 외부 또는 전역에서 참조할 수 있다.
2. var 키워드 생략 허용
   • 의도하지 않은 변수의 전역화
3. 중복 선언 허용
   • 의도하지 않은 변수값 변경

4.  변수 호이스팅
   

   • 변수를 선언하기 전에 참조가 가능하다.

대부분의 문제는 전역 변수로 인해 발생한다. 전역 변수는 간단한 애플리케이션의 경우, 사용이 편리하다는 장점이 있지만 불가피한 상황을 제외하고 사용을 억제해야 한다. 전역 변수는 유효 범위(scope)가 넓어서 어디에서 어떻게 사용될 것인지 파악하기 힘들며, 비순수함수에 의해 의도하지 않게 변경될 수도 있어서 복잡성을 증가시키는 원인이 된다. 따라서 변수의 유효 범위(scope)는 좁을수록 좋다.

ES6는 이러한 var의 단점을 보완하기 위해 let과 const 키워드를 도입하였다.

//두가지 방식의 차이

var : 함수의 범위 (function scope)를 가짐

하나의 함수내에서는 적용범위가 유효하게 된다.

let, const : 블록단위(block scope)의 범위를 가지고 있음

{}로 감싸고 있는 범위내에서 유효하다.

if(true){
    var x = 3;
}
console.log(x); //3
 
if(true){
    const y =3;
}
console.log(y); //Uncaught ReferenceError : y is not defined

var 는 재선언이 가능하지만, let, const는 재선언이 불가능합니다.

const와 let의 차이점은 값을 할당한 후에 변경의 가 불가 여부입니다.

*************************************************************************

const a = 0;
a  = 1;
let b = 0;
b =1;

자바스크립트를 사용할때 한번 초기화했던 변수에 다른 값을 할당하는 경우는 생각보다 적습니다.

따라서 기본적으로 변수 선언시에는 const를 사용하고, 다른값을 대입해야 하는 상황이 생겼을때 let을 사용하면 됩니다.

*************************************************************************

var messages = ["Meow!", "I'm a talking cat!", "Callbacks are fun!"];
 
for (var i = 0; i < messages.length; i++) {
  setTimeout(function () {
    alert(messages[i]);
  }, i * 1500);
}

*************************************************************************

템플릿 문자열

ES2015 이전에 사용하던 큰따옴표 (" "), 작은따옴표 (' ')로 감싸는 기존 문자열과 다르게 백틱(` `) 으로 감쌉니다.(TAB키 상단)

문자열 안에 변수를 넣을수 있는것이 특징입니다.

일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백(white-space)를 표현하기 위해서는 백슬래시(\)로 시작하는 이스케이프 시퀀스를 사용하여야 한다. 

ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 white-space는 있는 그대로 적용된다.

var num1 = 1;
var num2 = 2;
var result1 = 3;
var result2 = num1 + '더하기' +  num2 +  '는 \' '+ result1 + '\'';
console.log(result2);

const num3 = 1;
const num4 = 2;
const result3 = 3;
const result4 = `${num3} 더하기 ${num4}는 '${result3}'`;
console.log(result4);

기존 따옴표 대신 백틱을 사용하기 때문에, 큰 다옴표나 작은 따옴표와 함꼐 사용할 수도 있습니다.

// 템플릿 대입문에는 문자열뿐만 아니라 표현식도 사용할 수 있다.
console.log(`1 + 1 = ${1 + 1}`); // 1 + 1 = 2
 
const name = 'ungmo';
 
console.log(`Hello ${name.toUpperCase()}`); // Hello UNGMO

*************************************************************************

객체 리터럴

var sayNode = function() {
  console.log('Node');
};
var es = 'ES';
var oldObject = {
  sayJS : function(){
    console.log('JS');
  },
  sayNode: sayNode,
};
oldObject[es + 6] = 'Fantastic';
 
oldObject.sayNode(); //Node
oldObject.sayJS(); //JS
console.log(oldObject.ES6); //Fantastic

let newObject = {
  sayJS() {
    console.log('JS');
  },
  sayNode,
  [es+6]:'Fantastic',
}
newObject.sayNode(); //Node
newObject.sayJS(); //JS
console.log(newObject.ES6); //Fantastic
 

oldObject 와 newObejct를 비교해서 볼때, sayJS 같은 객체의 메서드를 선언, 할당 할때 더는 콜론(:) 과 function 을 붙이지않습니다.

sayNode: sayNode 처럼 key(속성명) 와 value(변수명) 이 겹치는 경우에는 한번만 쓰면 됩니다.

자바스크립트에서는 다음과 같은 경우가 많은데, 코드의 중복을 피할수 있게 되어 편리합니다.

{ name : name, age : age } // ES5

{ name , age } //ES2015

객체의 속성명을 동적으로 생성할수 있습니다. 예전 문법에서는 ES6라는 속성명을 만들려면 객체 리터럴(oldObject) 바깥에서 [es +6]를 해야했었지만, ES2015 문법에서는 객체 리터럴 안에 선언해도 됩니다.

// ES5
var i = 0;
var propNamePrefix = 'prop_';
 
var obj = {};
 
obj[propNamePrefix + ++i] = i;
obj[propNamePrefix + ++i] = i;
obj[propNamePrefix + ++i] = i;
 
console.log(obj); // { prop_1: 1, prop_2: 2, prop_3: 3 }

// ES6
let i = 0;
const propNamePrefix = 'prop_';
 
const obj = {
  [propNamePrefix + ++i]: i,
  [propNamePrefix + ++i]: i,
  [propNamePrefix + ++i]: i
};
 
console.log(obj); // { prop_1: 1, prop_2: 2, prop_3: 3 }

객체 리터럴에 추가된 문법들은 코딩시 편의를 위해 만들어진 것이라는 느낌이 강하며, 익숙해지면 코드의 양을 많이 줄일수 있습니다.

*************************************************************************

화살표 함수

화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.
 
// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.
 
() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.
 
() => {           // multi line block.
  const x = 10;
  return x * x;
};

화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.

// ES5
var pow = function (x) { return x * x; };
console.log(pow(10)); // 100
// ES6
const pow = x => x * x;
console.log(pow(10)); // 100

콜백함수로 간결하게 사용이 가능하다.

// ES5
var arr = [1, 2, 3];
var pow = arr.map(function (x) { // x는 요소값
  return x * x;
});
 
console.log(pow); // [ 1, 4, 9 ]
// ES6
const arr = [1, 2, 3];
const pow = arr.map(x => x * x);
 
console.log(pow); // [ 1, 4, 9 ]

**기존의 funtion(){}도 그대로 사용할수있습니다

function add1(x, y){
    return x + y;
}
const add2 = (x, y) => {
    return x + y;
};
 
const add3 = (x, y) => x + y;
 
const add4 = (x, y) => (x + y);
 
function not1(x) {
    return !x;
}
const not2 = x =>!x;

add1, add2, add3 ,add4 와 not1, not2 는 각각 같은 기능을 하는 함수입니다

화살표 함수에서는 function 선언대신 => 기호로 함수를 선언합니다.

또한 , 이전의 functinon 과 동일하게 변수에 대입하여 재사용이 가능합니다.

return문을 줄일수 있으며, 중괄호 대신 return할 식을 바로 적어주면됩니다.

add4처럼 보기 좋게 소괄호로 감쌀수 있고, not2처럼 매개변수가 하나면 소괄호를 묶어주지 않아도 됩니다.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function , 화살표 함수를 사용할시 this에 대해서.

자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

콜백 함수 내부의 this는 전역 객체 window를 가리킨다.

function Prefixer(prefix) {
  this.prefix = prefix;
}
 
Prefixer.prototype.prefixArray = function (arr) {
  // (A)
  return arr.map(function (x) {
    return this.prefix + ' ' + x; // (B)
  });
};
 
var pre = new Prefixer('Hi');
console.log(pre.prefixArray(['Lee', 'Kim']));

(A) 지점에서의 this는 생성자 함수 Prefixer가 생성한 객체, 즉 생성자 함수의 인스턴스(위 예제의 경우 pre)이다.

(B) 지점에서 사용한 this는 아마도 생성자 함수 Prefixer가 생성한 객체(위 예제의 경우 pre)일 것으로 기대하였겠지만, 이곳에서 this는 전역 객체 window를 가리킨다. 이는 생성자 함수와 객체의 메소드를 제외한 모든 함수(내부 함수, 콜백 함수 포함) 내부의 this는 전역 객체를 가리키기 때문이다.

콜백 함수 내부의 this가 메소드를 호출한 객체(생성자 함수의 인스턴스)를 가리키게 하려면 아래의 3가지 방법이 있다.

// Solution 1: that = this
function Prefixer(prefix) {
  this.prefix = prefix;
}
 
Prefixer.prototype.prefixArray = function (arr) {
  var that = this;  // this: Prefixer 생성자 함수의 인스턴스
  return arr.map(function (x) {
    return that.prefix + ' ' + x;
  });
};
 
var pre = new Prefixer('Hi');
console.log(pre.prefixArray(['Lee', 'Kim']));

// Solution 2: map(func, this)
function Prefixer(prefix) {
  this.prefix = prefix;
}
 
Prefixer.prototype.prefixArray = function (arr) {
  return arr.map(function (x) {
    return this.prefix + ' ' + x;
  }, this); // this: Prefixer 생성자 함수의 인스턴스
};
 
var pre = new Prefixer('Hi');
console.log(pre.prefixArray(['Lee', 'Kim']));

ES5에 추가된 Function.prototype.bind()로 this를 바인딩한다.

// Solution 3: bind(this)
function Prefixer(prefix) {
  this.prefix = prefix;
}
 
Prefixer.prototype.prefixArray = function (arr) {
  return arr.map(function (x) {
    return this.prefix + ' ' + x;
  }.bind(this)); // this: Prefixer 생성자 함수의 인스턴스
};
 
var pre = new Prefixer('Hi');
console.log(pre.prefixArray(['Lee', 'Kim']));

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

화살표 함수에서의 this

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다고 하였다.

화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this라 한다. 화살표 함수는 앞서 살펴본 Solution 3의 Syntactic sugar이다.

*****************중간 단어 설명~!*************

- 사람이 이해 하고 표현하기 쉽게 디자인된 프로그래밍 언어 문법

- 사람이 프로그래밍 언어를 sweeter하게 사용 할 수 있도록 도와주는 문법

- 더욱 더 간결하고 명확하게 표현이 가능한 문법을 뜻 한다.

화살표 함수의 this 바인딩 객체 결정 방식은 함수의 상위 스코프를 결정하는 방식인 렉시컬스코프와 유사하다.

////////////////////////////////////////////////////////////////////////////////////////////////////////////

function Prefixer(prefix) {
  this.prefix = prefix;
}
 
Prefixer.prototype.prefixArray = function (arr) {
  return arr.map(x => `${this.prefix}  ${x}`);
};
 
const pre = new Prefixer('Hi');
console.log(pre.prefixArray(['Lee', 'Kim']));

///////////////////////////////////////////////잠깐 렉시컬 스코프가 뭐죠?

JAVASCRIPT 는 렉시컬스코프(정적스코프)입니다.

var x = 1;
 
function foo() {
  var x = 10;
  bar();
}
 
function bar() {
  console.log(x);
}
 
foo(); // ?
bar(); // ?

뭐가 출력될까요?

$x = "global";
 
sub yobu{
    local $x = "yobu:;
    &yobareru();
}

sub yobureru{
    print "$x\n";    
}

&yobu();

위 예제의 실행 결과는 함수 bar의 상위 스코프가 무엇인지에 따라 결정된다. 두가지 패턴을 예측할 수 있는데 첫번째는 함수를 어디서 호출하였는지에 따라 상위 스코프를 결정하는 것이고 두번째는 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는 것이다. 첫번째 방식으로 함수의 상위 스코프를 결정한다면 함수 bar의 상위 스코프는 함수 foo와 전역일 것이고, 두번째 방식으로 함수의 스코프를 결정한다면 함수 bar의 스코프는 전역일 것이다.

프로그래밍 언어는 이 두가지 방식으로 함수의 상위 스코프를 결정한다. 첫번째 방식을 동적 스코프(Dynamic scope)라 하고, 두번째 방식을 렉시컬 스코프(Lexical scope) 또는 정적 스코프(Static scope)라 한다. 자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 지원한다.

렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다.#yobu 라고 출력됩니다.

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

화살표 함수를 사용해서는 안되는 경우

화살표 함수는 Lexical this를 지원하므로 콜백 함수로 사용하기 편리하다. 하지만 화살표 함수를 사용하는 것이 오히려 혼란을 불러오는 경우도 있으므로 주의하여야 한다.

화살표함수로 메소드를 정의하는 것은 피해야 한다. 화살표 함수로 메소드를 정의하여 보자.

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

위 예제의 경우, 메소드로 정의한 화살표 함수 내부의 this는 메소드를 소유한 객체, 즉 메소드를 호출한 객체를 가리키지 않고 상위 컨택스트인 전역 객체 window를 가리킨다. 따라서 화살표 함수로 메소드를 정의하는 것은 바람직하지 않다.

이와 같은 경우는 메소드를 위한 단축 표기법인 ES6의 축약 메소드 표현을 사용하는 것이 좋다.

// Good
const person = {
  name: 'Lee',
  sayHi() { // === sayHi: function() {
    console.log(`Hi ${this.name}`);
  }
};
 
person.sayHi(); // Hi Lee

PROTOTYPE

화살표 함수로 정의된 메소드를 prototype에 할당하는 경우도 동일한 문제가 발생한다. 화살표 함수로 정의된 메소드를 prototype에 할당하여 보자.

// Bad
const person = {
  name: 'Lee',
};
 
Object.prototype.sayHi = () => console.log(`Hi ${this.name}`);
 
person.sayHi(); // Hi undefined

화살표 함수로 객체의 메소드를 정의하였을 때와 같은 문제가 발생한다. 따라서 prototype에 메소드를 할당하는 경우, 일반 함수를 할당한다.

// Good
const person = {
  name: 'Lee',
};
 
Object.prototype.sayHi = function() {
  console.log(`Hi ${this.name}`);
};
 
person.sayHi(); // Hi Lee

화살표 함수는생성자 함수로 사용할 수 없다. 생성자 함수는 prototype 프로퍼티를 가지며 prototype 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용한다. 하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않다.

(축약 메소드도 prototype 프로퍼티가 없다)

const Foo = () => {};
 
// 화살표 함수는 prototype 프로퍼티가 없다
console.log(Foo.hasOwnProperty('prototype')); // false
 
const foo = new Foo(); // TypeError: Foo is not a constructor

#4.4 addEventListener 함수의 콜백 함수

addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window를 가리킨다.

// Bad
var button = document.getElementById('myButton');
 
button.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});

따라서 addEventListener 함수의 콜백 함수에서 this를 사용하는 경우, function 키워드로 정의한 일반 함수를 사용하여야 한다. 일반 함수로 정의된 addEventListener 함수의 콜백 함수 내부의 this는 이벤트 리스너에 바인딩된 요소(currentTarget)를 가리킨다.

// Good
var button = document.getElementById('myButton');
 
button.addEventListener('click', function() {
  console.log(this === button); // => true
  this.innerHTML = 'Clicked button';
});

*************************************************************************

비구조화 할당

var candyMachine = {
  status: {
    name : 'node',
    count : 5
  },
  getCandy : function(){
    this.status.count--;
    return this.status.count;
  }
};
var getCandy = candyMachine.getCandy;
var count = candyMachine.status.count;
 
let candyMachine = {
  status: {
    name : 'node',
    count : 5
  },
  getCandy : function(){
    this.status.count--;
    return this.status.count;
  }
};
let {getCandy, status : {count}} = candyMachine.getCandy;

candyMachine 객체 안의 속성을 찾아서 변수와 매칭해줍니다.

count처럼 여러 단계 안의 속성도 찾을 수 있습니다.

getCandy와 count 변수가 초기화된 것입니다.

배열도 비구조화할 수 있습니다.

var array = ['nodejs', {}, 10, true];
var node = array[0];
var obj = array[1];
var bpp = array[array.length -1];

const array = ['nodejs',{},10,true];
const [node, obj, bool]=array;

*************************************************************************

프로미스

자바스크립트와 노드에서는 주로비동기 프로그래밍을 합니다.

특히 이벤트 주도 방식 때문에 콜백 함수를 자주 사용합니다.

ES2015부터는 자바스크립트와 노드의 API들이 콜백 대신 프로미스(Promise)기반으로 재구성됩니다.

그래서 악명 높은 콜백을 극복했다는 평가를 받고 있습니다.

프로미스는 다음과  같은 규칙이 있습니다. 먼저 프로미스 객체를 생성해야 합니다.

const condition = true; // true면 resolve, false reject
const promise = new Promise((resolve, reject) => {
  if(condition){
    resolve('성공');
  }else {
    reject('실패');
  }
});
 
promise
  .then((message)=>{
    console.log(message);
  })
  .catch((error)=>{
    console.error(error);
  });

new Promise로 프로미스를 생성할수 있으며, 안에 resolve와 reject를 매개변수로 갖는 콜백 함수를 넣어줍니다. 이렇게 만든 promise변수에 then과 cathc 메서드를 붙일수 있습니다.

프로미스 내부에서 resolve가 호출되면 then이 실행되고, reject가 호출되면 catch가 실행됩니다.

resolve와 reject에 넣어준 인자는 각각 then과 catch의 매개변수에서 받을수 있습니다.

promise
  .then((message) =>{
    return new Promise((resolve, reject)=> {
      resolve(message);
    });
  })
  .then((message2)=>{
    console.log(message2);
    return new Promise((resolve,reject)=>{
      resoleve(message2);
    });
  })
  .then((message3)=>{
    console.log(message3);
  })
  .catch((error)=>{
    console.error(error);
  });

function findAndSaveUser(User){
  User.findOne({},(err,user) => { // 첫번째 콜백
    if(err){
      return console.error(err);
    }
    user.name = 'zero';
    user.save((err)=>{ // 두번째 콜백
      if(err){
        return console.error(err);
      }
      User.findOne({gender:'m'},(err,user)=>{ // 세번째 콜백
        //생략
      });
    })
  })
}

function findAndSaveUser(User){
  User.findOne({})
    .then((user)=>{
      user.name = 'zero';
      return user.save();
    })
    .then((user) => {
      return User.findOne({gender:'m'});
    })
    .then((user) => {
      //생략
    })
    .catch(err=>{
      console.error(err);
    });
}

콜백함수가 세번 중첩되어 있는 경우에 코드의 깊이가 깊어지지만, promise로 바꿔줄경우 then메서드로 순차적 실행이 가능하여 코드의 깊이가 더이상 깊어지지 않습니다

let promise1 = Promise.resolve('성공1');
let promise2 = Promise.resolve('성공2');
Promise.all([promise1,promise2])
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

Promise.resolve는 즉시 resolve하는 프로미스를 만드는 방법입니다. 또한 Promise.reject도 있습니다.

프로미스가 여러 개 있을 때 Promise.all에 넣으면 모두 resolve 될떄까지 기다렸다가 then으로 넘어갑니다.

result 매개변수에 각각의 프로미스 결괏값이 배열로 들어 있습니다.

Promise중 하나라도 reject가 되면 catch로 넘어갑니다.

나온배경 :

es2015 이전과 다른점:

사용법 :
예시 :

async/await

asumc/await 문법은 프로미스를 사용한 코드를 한번 더 깔끔하게 줄여줍니다.

나온배경 :

es2015 이전과 다른점:

사용법 :
예시 :

프론트엔드 자바스크립트

AJAX

나온배경 :

es2015 이전과 다른점:

사용법 :
예시 :

FormData

나온배경 :

es2015 이전과 다른점:

사용법 :
예시 :

encoderURLComponent, decodeURLComponent

나온배경 :

es2015 이전과 다른점:

사용법 :
예시 :

data attribute와 dataset

나온배경 :

es2015 이전과 다른점:

사용법 :
예시 :

//참조 : Node.js 교과서 , ㅓ닝 자바스크립트