2-1

ES6

ES6 : ECMAScript 6
JavaScript 버전 중 하나이다.
대규모 문법적 향상 및 변경이 있다.

---

🍏let, const

▪ 기존에 변수 선언을 위해 존재하던 var를 대체해서 나온 변수 선언에 사용되는 키워드
선언 : 변수명을 자바스크립트 엔진에 알리는 것
할당 : 변수에 값을 저장하는 것
▪ let(변수) : 재할당 가능, 재선언 불가능
▪ const(상수) : 재할당, 재선언 불가능

---

🍏arrow function (화살표 함수)

function add () {

}

var add = function () {

}

➰ 화살표 함수

var add = () => {

}

---

🍏삼항 연산자

condition ? true인 경우 : false인 경우

---

🍏구조분해할당

▪ destructuring (de + structure + ing)
de : not
structure : 구조
▪ 배열이나, 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법

➰ 배열의 경우

let [value1, value2] = [1, "new"];

→ 우변에 있는 배열을 쪼개서 왼쪽의 1은 value1에, 오른쪽의 "new"는 value2에 각 각 할당해줘

let arr = ['value1', 'value2', 'value3'];
let [a, b, c] = arr;
console.log('a : ' + a);
console.log('b : ' + b);
console.log('c : ' + c);
console.log('d : ' + d);

a : value1
b : value2
c : value3
d : undefined

➰ 객체의 경우

let user = {
    name : "nbc",
    age : 30
}

let {name, age} = user;

name -> "nbc",   age -> 30

→ name가 nbc를 가지게 되고, age가 30을 가지게 된다.

➰ 객체 - 새로운 이름으로 할당

let user = {
    name : "nbc",
    age : 30
}

let {
    name : newName,
    age : newAge
} = user

newName -> "nbc",   newAge -> 30

---

---

2-2

ES6

🍏단축속성명

property shorthand

const name = "nbc"
const newAge = "30"

const obj = {
    name : name,
    age : newAge
}

key : 이름일 뿐
value : 실질적인 데이터. 변수가 올 수 있다.
→ key와 value의 이름이 같을 경우 아래와 같이 생략할 수 있다.

const name = "nbc"
const newAge = "30"

const obj = {
    name,
    age : newAge
}

---

🍏전개 구문

spread operator
destructuring과 함께 가장 많이 사용되는 ES6 문법 중 하나

let arr = [1, 2, 3]
console.log('arr : ' , arr)
console.log('...arr : ' , ...arr)

arr :  [ 1, 2, 3 ]
...arr :  1 2 3

→ ...을 붙인 후 출력하면 전개하여 출력된다.
→ 새로운 구조로 덧입혀야 할 때 많이 사용된다.
➰ 배열에서 사용 예시

let arr = [1, 2, 3]
let newArr = [...arr, 4] 
console.log('arr : ' , arr)
console.log('newArr : ' , newArr)

arr :  [ 1, 2, 3 ]
newArr :  [ 1, 2, 3, 4 ]

➰ 객체에서 사용 예시

let user = {
    name : "nbc",
    age : 30
}

let user2 = {...user, genser : "여자"}
console.log('user : ' , user)
console.log('user2 : ' , user2)

user :  { name: 'nbc', age: 30 }
user2 :  { name: 'nbc', age: 30, genser: '여자' }

---

🍏나머지 매개변수 ( rest parameter)

function exampleFunc (a, b, c, ...args) {
    console.log(a,b,c)
    console.log('args : ' , args)
    console.log('...args : ' , ...args)
}

exampleFunc(1, 2, 3, 4, 5, 6, 7)

1 2 3
args :  [ 4, 5, 6, 7 ]
...args :  4 5 6 7

---

🍏템플릿 리터럴 (template Literal)
→ 백틱( ` )으로 감싸지면 js코드, 연산, 변수 등이 들어갈 수 있다.

const testValue = "안녕하세요"

console.log(`변수 출력 : ${testValue}`)
console.log(`연산 출력 : ${3 + 3}`)

변수 출력 : 안녕하세요
연산 출력 : 6

---

---

2-3

일급 객체로서의 함수

일급 객체 (First-class Object)
: 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.
→ 다른 객체들과 일반적으로 같다.

---

🍏 함수가 일급 객체로 취급되는 5가지 경우

➰ 변수에 함수를 할당

const sayHello = function() {
    console.log('Hello')
}

변수 출력 : 안녕하세요
연산 출력 : 6

→ 함수가 마치 값으로 취급된다.
→ 함수가 나중에 사용될 수 있도록 조치가 되었다.

➰ 함수를 인자로 다른 함수에 전달할 수가 있다.

function callFunction (func) {
    func()
}

const sayHello = function () {
    console.log("Hello!")
}

callFunction(sayHello)

Hello!

→ 메개변수로 받은 변수가 사실, 함수다.

❗콜백함수 : 매개변수로써 쓰이는 함수

❗고차함수 : 함수를 인자로 받거나 return하는 함수

➰ 함수를 반환할 수 있다.

function createAdder(num) {
    return function (x) {
        return x + num
    }
}

const addFive = createAdder(5)

console.log(addFive(5))

10

→ 메개변수로 받은 변수가 사실, 함수다.

---

---

2-4

일급 객체로서의 함수

const person = {
    name : 'Jhon',
    age : 31,
    isMarried : true,
    sayHello : function () {
        console.log(`Hello, My anme is ${this.name}`)
    }
}

person.sayHello();

Hello, My name is Jhon

//화살표함수로 표현
const person = {
    name : 'Jhon',
    age : 31,
    isMarried : true,
    sayHello : () => {
        console.log(`Hello, My name is ${this.name}`)
    }
}

person.sayHello();

Hello, My name is undefined

→ 화살표 함수를 사용할 때 this.name -> undefined // 3주차에서 설명 (화살표함수는 this를 바인딩하지 않는다)

➰ 배열의 요소로 함수를 할당

const myArr = [
    function (a, b) {
        return a + b;
    }, function (a, b) {
        return a - b
    }
]

console.log(`myArr[0](1, 3) : ${myArr[0](1, 3)}`)

console.log(`myArr[1](10, 7) : ${myArr[1](10, 7)}`)

myArr[0](1, 3) : 4
myArr[1](10, 7) : 3

➰

function multiplyBy(num) {
    return function (x) {
        return x * num
    }
}

const multiplyByTwo = multiplyBy(2)
const multiplyByThree = multiplyBy(3)

console.log(multiplyByTwo(3))
console.log(multiplyByThree(4))

function add(x, y) {
    return x + y
}

const result = add(multiplyByTwo(5), multiplyByThree(10))
console.log(`FINAL =>${result}`)

6
12
FINAL =>40

---

---

2-5

Map

Map, Set의 목적 : 데이터의 구성, 검색, 사용을 효율적으로 처리한다.

🍏Map

• key - value pair
• key에 어떤 데이터타입(유형)도 다 들어올 수 있다.
• Map은 key가 정렬된 순서로 저장되기 때문이다.
• 기능
  ▫ 검색, 삭제, 제거, 존재 여부 확인
• Map은 반복을 위한 api이다.

const myMap = new Map()
myMap.set('one', 1)
myMap.set('two', 2)
myMap.set('three', 3)

console.log(myMap.keys())

for (const key of myMap.keys()) {
    console.log(key);
}
for (const value of myMap.values()) {
    console.log(value);
}
for (const entriy of myMap.entries()) {
    console.log(entriy);
}

console.log(myMap.size)
console.log(myMap.has("two"))

[Map Iterator] { 'one', 'two', 'three' }
one
two
three
1
2
3
[ 'one', 1 ]
[ 'two', 2 ]
[ 'three', 3 ]
3
true

---

---

2-6

Set

🍏Set

• 고유한 값을 저장하는 자료구조다.
• 값만 저장한다.
• 키를 저장하지는 않는다.
• 값이 중복되지 않는 유일한 요소로만 구성된다.
• 기능
  ▫ 값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인

const mySet = new Set()
mySet.add('value1')
mySet.add('value2')
mySet.add('value3')
mySet.add('value5')
mySet.add('value8')

console.log(`mySet : ${mySet}`)
console.log(`mySet.size : ${mySet.size}`)
console.log(`mySet.has("value3") : ${mySet.has("value3")}`)

for (const value of mySet.values()) {
    console.log(value);
}

mySet : [object Set]
mySet.size : 5
mySet.has("value3") : true
value1
value2
value3
value5
value8