*모듈, Class 관련 내용 추가 예정

🔴 새로운 변수 let과 const, 그들의block scope

• 스코프: 범위, 유효공간, 허용범위
  • 함수스코프: 함수에 의해 생기는 변수의 유효범위 (var)
  • 블락스코프: 블락{}에 의해 생기는 변수의 유효범위 (let, const--> 둘의 차이는 let은 재할당 가능, const는 재할당 불가 )

{ 
  let a = 10
  { 
     let a = 20
     console.log(a) //20
  }
   console.log(a) //10
}
console.log(a) //reference Error 블락 밖에서는 변수가 유효하지 않음

---

🟡 template literal

기존 string literal의 번거로움을 없애기 위해 backtick을 사용한 것

const a = 10
const b = 20
const str = `${a} + ${b} = ${ a + b }`
// a라는 변수를 str처리 해주기 위해 띄워쓰기 하나하나의 str를 만들어서 더해주는 번거로움이 줄게된다.
console.log(str)

• multi-line : 기존은 줄바꿈을 위해 \n을 사용했으나 , template literal은 그냥 엔터치고 쓰면 됨 -> 🚨공백을 다 읽는다는 뜻이기 때문에 띄워쓰기, 들여쓰기 시에 주의해야한다.

const f = function () {
  const a = `abc
  def
  ghij`
  console.log(a)
}
f() /* abc
  def
  ghij*/

• ${ } 내에는 값이나 식이 올 수 있다.
• 문자열이므로 자동으로 toString 처리가 된다.

---

🟢 default parameter

함수 파라미터의 기본값을 설정할 수 있으며 undefined 혹은 누락된 파라미터에 대해서만 그 값을 출력한다.

const f = function (a = 1, b = 2, c = 3, d = 4, e = 5, f = 6) {
  console.log(a, b, c, d, e, f)
}
f(7, 0, "", false, null) // 7 0 "" false null 6

---

🔵 rest parameter

인자를 배열로
기존의 arguments를 대체해 함수에 전달된 인수들의 목록을 배열로 전달받는 문법이다. ...매개변수명으로 쓰며, 오직 한 번만 매개변수의 가장 마지막에서만 사용할 수 있다.

const f = function (x, y, ...rest) {
  console.log(rest)
}
f(1, 2, true, null, undefined, 10) // [true, null, undefined, 10]

---

🟣 spread operator

배열을 인자로
배열의 각 인자를 펼친 효과를 내는 펼치기, 전개라는 뜻의 연산자로 iterable한 모든 데이터를 펼칠 수 있다. 기존의 배열은 그대로 두고 수정된 배열을 만들고 싶을 때 사용한다.

var birds = ['eagle', 'pigeon']
var mammals = ['rabbit', 'cat']
var animals = birds.concat('whale').concat(mammals)
console.log(animals) // ['eagle', 'pigeon','rabbit', 'cat'] 

const animals2 = [...birds, 'whale', ...mammals]
console.log(animals2) //['eagle', 'pigeon','rabbit', 'cat']

iterable한 모든 데이터를(length가 있는것) 펼칠 수 있기 때문에 string을 펼칠 수 있다.

const str = 'Hello!'
const splitArr = str.split('')
const restArr = [...str]
console.log(splitArr, restArr)// ["H", "e", "l", "l", "o", "!"] ,  ["H", "e", "l", "l", "o", "!"] 

push,unshift,concat 등의 기능을 대체할 수 있다.

let originalArr = [2, 3]
const preArr    = [-2, -1]
const sufArr    = [6, 7]

originalArr.unshift(1)
originalArr.push(4)
originalArr = [0, ...originalArr, 5]
console.log(originalArr) //[0, 1, 2, 3, 4, 5]

const concatArr = preArr.concat(originalArr, sufArr)
const restArr = [...preArr, ...originalArr, ...sufArr]
console.log(concatArr, restArr) //[-2, -1, 0, 1, 2, 3, 4, 5, 6, 7] , [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7] 

배열의 나머지를 할당 받을 수도 있다.

const a = [1,2,3,4,5,6];
let [first, second, ...rest] = a;

console.log(first, second, rest);
// 1 2 [3, 4, 5, 6]

---

🟤 enhanced object function

1. 프로퍼티 축약이 가능해졌다.
   프로퍼티의 key와 value에 할당한 변수명이 동일한 경우에 value를 생략 가능하다.

//ES5
var x = 10
var y = 20
var obj = {
  x: x,
  y: y
}

//ES6
const x = 10
const y = 20
const obj = {
  x,
  y
}

2. 메소드를 간결하게 만들 수 있음

:function 키워드 제거 가능

//ES5
var obj = {
  name: 'foo',
  getName: function () { return this.name }
}

//ES6
const obj = {
  name: 'foo',
  getName () { return this.name }
}

super 명령어로 상위 클래스에 접근 가능

const Person = {
  greeting () { return 'hello' }
}
const friend = {
  greeting () {
    return 'hi, ' + super.greeting()
  }
}
Object.setPrototypeOf(friend, Person)
friend.greeting() //"hi, hello"

prototype 프로퍼티가 없음 -> 생성자 함수를 만들지 못함 (함수는 오직 함수의 역할만!)

const Person = {
  greeting () { return 'hello' }
}
const p = new Person.greeting() //Uncaught TypeError: Person.greeting is not a constructor

---

⚫ arrow function

ES5에서 이렇게 썼던 코드

var a = function () {
  return new Date()
}
var b = function (a) {
  return a * a
}
var c = function (a, b) {
  return a + b
}
var d = function (a, b) {
  console.log( a * b )
}

ES6에서 이렇게 사용할 수 있다.

let a = () => new Date()
let b = a => a * a
let c = (a, b) => a + b
let d = (a, b) => {
  console.log( a * b )
}

1. function을 생략하고 (매개변수) => { 본문 } 의 형태로 작성
2. 매개변수가 하나뿐인 경우는 괄호 생략 가능
3. 매개변수가 없을 경우엔 괄호가 필수
4. 본문이 return [식 or 값] 뿐인 경우 { }와 return 키워드 생략 가능 (두개를 세트로 생략해야함)
   --> 하지만 return할 값이 객체라면 괄호를 필수로 넣어야 한다.

return할 값이 객체인 경우

const f = () => {
 a: 1,
 b: 2
} //괄호를 안 써주면 해당 값이 객체인지 모르는 그냥 본문이 되어버림 
const f = () => ({
 a: 1,
 b: 2
})

5. this를 바인딩하지 않는다.( = 자신만의 this를 생성하지 않는다) 따라서 둘러싸인 스코프에서 this를 찾을 수 있음 ( = 자신을 포함하고 있는 외부 scope에서 this를 계승받는다)

   arguments와 call,apply의 this바인딩을 무시한다.

var obj = {
  i:10,
  b: () => console.log (this.i,this), //undefined, window
  c: function() {
    console.log(this.i, this) //10, obj
  }
} 

---

⚪ destructuring assignment

객체,배열 안의 필드를 객체 자체로 변수로 대입할 수 있다.

ES5에서 이렇게 쓰던 것을

var colors = ['red', 'white', 'orange']
var first = colors[0]
var second = colors[1]
var third = colors[2]
console.log(first, second, third)

ES6 에서 이렇게

const colors = ['red', 'white', 'orange']
const [first, second, third] = colors 
console.log(first, second, third)

const iu = {
  name : '아이유',
  age : 25,
  gender : 'female'
}
const {
  name: n,
  age: a,
  gender: g
} = iu
console.log(n, a, g) //'아이유', 25, 'female'

할당할 변수명은 생략할 수 있다.

const iu = {
  name : '아이유',
  age : 25,
  gender : 'female'
}
const {
  name,
  age,
  gender
} = iu
console.log(name, age, gender)//'아이유', 25, 'female'