항해99 2일차 (ES6)

1. let, const let : (변수를 선언할때) 재할당은 가능하고,재선언은 불가능하다. const : (상수를 선언할때)재할당, 재선언이 불가능, 초기값이 없으면 선언 불가능
2. 화살표 함수(Arrow Function) function이나 return 키워드 없이 함수를 만드는 방법

// ES5
function func() {
	return true
}

//ES6
const func = () => true
const func = () => {
	return true
}

() => {}
parm => {}
(parm1, parm2, ...parms) -> {}

// 익명 화살표 함수
() => {}

this

function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다.

1. 구조 분해 할당 (Destructuring)

// 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"

let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3

// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

let [a,b,c,d] = arr
console.log(d) // undefined

let [a,b,c,d = 4] = arr
console.log(d) // 4

d = 4가 있고 배열안에 “value4”가 있었다면 4는 초기값이며 없을경우 d의 값은 4가되고 해당위치에 밸류값이 있었을 경우 값은 “value4”가 된다.

// 객체의 경우
let user = {name: "nbc", age: 30};
let {name, age} = user;

// let name = user.name;
// let age = user.age;

console.log(name, age) // nbc 30

// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30

let {name, age, birthDay} = user;
console.log(birthDay) // undefined

let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today 

1. 단축 속성명 (property shorthand)

const name = "nbc"
const age = "30"

const obj = {
	name,
	age: newAge
}

//객체의 key와 value 값이 같다면, 생략 가능하다.
const obj = {
	name,
	age
}
//const obj = {
// name:name
// age: age
// }

1. 전개 구문 (Spread)

// 배열
let arr = [1,2,3];

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

// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}

user2.name = "nbc2"

console.log(user.name) // nbc
console.log(user2.name) // nbc2

user2에 배열을 다시 펼쳐서 넣어주고 name의 값을 변경해준다.

1. 나머지 매개변수(rest parameter)

function func (a, b, ...args) {
	console.log(...args)
}

func(1, 2, 3) // 3
func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7

---

일급 객체로서의 함수

자바스크립트에서 함수는 일급 객체(First-Class Object)라고한다.

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

1. 변수에 함수를 할당

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

sayHello(); // "Hello!" 출력

변수에 할당된 함수는 나중에 사용할 수 있다.

1. 함수를 인자로 다른 함수에 전달 콜백함수 : 매개변수로써 쓰이는 함수 고차함수 : 함수를 인자로 받거나 return하는 함수.

function callFunction(func) {
  func();
}

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

callFunction(sayHello); // "Hello!" 출력

1. 함수를 반환

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

const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력

1. 객체의 프로퍼티로 함수를 할당

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // "Hello, my name is John" 출력

객체의 메소드로 함수를 호출할 수 있다.

위 코드에 this는 person을 가르킨다.

만약 화살표함수를 사용했을땐 undefined가 나온다. 이유는 화살표함수는 this를 바운딩하지 않는다.

1. 배열의 요소로 함수를 할당

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

console.log(myArray[0](5, 10)); // 15 출력
console.log(myArray[1](10, 5)); // 5 출력

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

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

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

const result = add(multiplyByTwo(5), multiplyByThree(10)); // 40 출력

---

Map

• 키-값 쌍 추가 및 검색(set)
• 키-값 쌍 삭제(delete)
• 모든 키-값 쌍 제거(clear)
• Map 크기 및 존재 여부 확인(size)

💡 [맵에는 다음과 같은 주요 메서드와 프로퍼티가 있습니다]

 `new Map()` – 맵을 만듭니다.
 `map.set(key, value)` – `key`를 이용해 `value`를 저장합니다.
 `map.get(key)` – `key`에 해당하는 값을 반환합니다. `key`가 존재하지 않으면 `undefined`를 반환합니다.
 `map.has(key)` – `key`가 존재하면 `true`, 존재하지 않으면 `false`를 반환합니다.
 `map.delete(key)` – `key`에 해당하는 값을 삭제합니다.
 `map.clear()` – 맵 안의 모든 요소를 제거합니다.
 `map.size` – 요소의 개수를 반환합니다.

Map 생성 및 사용

새로운 Map을 만들려면 Map() 생성자를 사용합니다.

const myMap = new Map();

이제 Map에 값을 추가하려면 set() 메소드를 사용합니다.

myMap.set('key', 'value');

Map에서 값을 검색하려면 get() 메소드를 사용합니다.

console.log(myMap.get('key')); // 'value' 출력

Map의 반복

Map에서는 keys(), values(), entries() 메소드를 사용하여 키, 값 및 키-값 쌍을 반복할 수 있다.

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

for (const key of myMap.keys()) {
  console.log(key);
}
// one
// two
// three

for (const value of myMap.values()) {
  console.log(value);
}
// 1
// 2
// 3
for (const entry of myMap.entries()) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
// one: 1
// two: 2
// three: 3

<aside>
💡 [for …of 반복문]

`for of` 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. `for of` 구문을 사용하기 위해선 컬렉션 객체가 `[Symbol.iterator]` 속성을 가지고 있어야만 합니다(직접 명시 가능).

var iterable = [10, 20, 30];

for (var valueof iterable) {
  console.log(value);// 10, 20, 30
}

**iterator**는 반복자라는 말이에요. 요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 
열거되어있는 자료구조로 이해해주시면 돼요. 
아래 예시 코드에서 **`myMap.keys()`**으로 쓸 수 있는 이유는 **`myMap.key()`**가 
반환하는 값이 **iterator**이기 때문이에요.

</aside>

Map의 크기 및 존재 여부 확인

Map의 크기를 확인하려면 size 속성을 사용합니다.

console.log(myMap.size); // 3 출력

특정 키가 Map에 존재하는지 여부를 확인하려면 has() 메소드를 사용합니다.

console.log(myMap.has('two')); // true 출력

---

Set

• 고유한 값을 저장하는 자료구조
• 값만 저장한다.
• 키를 저장하지는 않는다.
• 값이 중복되지 않는 유일한 요소로만 구성된다.

Set 생성

const mySet = new Set();

Set 값 추가

mySet.add('value1');
mySet.add('value2');

Set 값을 검색

console.log(mySet.has('value1')); // true 출력

Set의 반복

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

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

// value1
// value2
// value3