항해 2일차 (es6, 일급객체로서의 함수, Map과 Set)

항해 2일차

오늘은 es6 문법과 일급객체로서의 함수, Map과 Set에 대해서 공부를 하였다.

간략하게 보자면

각종 es6 문법

1. let, const

let: 재할당은 가능하고, 재선언은 불가능하다.
const: 재할당, 재선언이 불가능, 초기값이 없으면 선언 불가능하다.

2. 화살표 함수

const func = () => true  // 기본 문법 
const func = () => {     // function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다. 
	return true
}

3.삼항 연산자

조건 ? 참 : 거짓

4. 구조 분해 할당

배열[]이나 객체{}의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법이다

// 배열의 경우
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

// 객체의 경우
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

5. 단축 속성명

객체의 key와 value 값이 같다면, 생략 가능하다.

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

const obj = {
name,
age: newAge
}

const obj = {
name,
age
}

6. 전개 구문
>배열이나 객체를 전개하는 문법이다. 구조분해할당과 함께 정말 많이 사용된다.

```js
// 배열
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

7. 나머지 매개변수

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

8. 템플릿 리터럴

여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식이다.
백틱(`) 과 ${ }로 표현합니다.

9. named export vs default export

Named Export는 여러 값을 내보내는데 유용합니다. 모듈을 가져올 때 동일한 이름을 사용해야만 해당 값을 참조할 수 있습니다. Default Export는 모듈당 하나의 Export만 가능합니다. 내보내기 되는 주체는 함수, 클래스, 객체 등 다양한 것이 될 수 있습니다

일급 객체로서의 함수

자바스크립트에서 함수는 일급 객체(First-Class Object)라고 해요. 그래서 함수를 객체처럼 여러가지 방식으로 다룰 수 있다.
함수가 일급 객체로 취급되기 때문에, 자바스크립트에서 함수는 매우 유연하게 사용될 수 있습니다. 이것은 등 다양한 프로그래밍 패턴에서 사용됩니다. 함수를 일급 객체로 다룰 수 있다는 것은, 코드를 더 간결하고 모듈화된 형태로 작성할 수 있게 해줍니다.
또한, 새로운 함수를 반환하는 함수를 작성하면, 함수를 조합하여 더 복잡한 기능을 구현할 수 있어요. 이것을 활용하면 코드를 더욱 간결하게 작성할 수 있으며, 유지 보수도 쉬워집니다.

1. 변수에 함수를 할당

• 함수는 변수에 할당할 수 있다. 함수는 값으로 취급되기 때문에, 다른 변수와 마찬가지로 변수에 할당할 수 있다. 변수에 할당된 함수는 나중에 사용할 수 있다.

2. 함수를 인자로 다른 함수에 전달

• 함수는 다른 함수에 인자로 전달될 수 있다. 함수가 값으로 취급되기 때문에, 다른 함수의 인자로 전달할 수 있다. 이것은 콜백(callback)이나 고차 함수(higher-order function)를 작성하는 데 사용된다.

3. 함수를 반환

• 함수는 다른 함수를 반환될 수 있다. 함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있다. 이것은 함수 팩토리나 클로저를 작성하는 데 사용된다.

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

• 함수는 객체의 프로퍼티로 할당될 수 있다. 객체의 메소드로 함수를 호출할 수 있다.

5. 배열의 요소로 할당될 수 있다. 이것은 함수를 배열에서 사용할 수 있게 한다.

Map과 Set

JavaScript에서 객체(object)와 배열(array)을 이용하면 굉장히 다양하고 복잡한 프로그래밍을 할 수 있다. 그럼에도 불구하고 여전히 현실세계의 여러가지 문제들을 ‘프로그래밍’적으로 반영하기엔 많이 부족하다. Map과 Set은 이러한 한계를 극복하고자 비교적 최근 등장한 자료구조라고 할 수 있다

Map

Map은 키-값 쌍을 저장하는 객체와 비슷하다. Map은 각 쌍의 키와 값을 저장하며, 객체와 달리 키로 사용할 수 있는 모든 유형을 사용할 수 있다. Map은 키가 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없다. Map을 사용하면 다음과 같은 작업을 수행할 수 있다.

 `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` – 요소의 개수를 반환합니다.
  keys(), values(), entries() -   keys(), values(), entries()를 통해 for of 반복문
 을 사용하여 내용을 반환할 수 있다. 이때 반환하는 값이 iterator이다. 

Set

Set은 고유한 값을 저장하는 자료 구조이다. Set은 값만 저장하며, 키를 저장하지 않는다. Set은 값이 중복되지 않는 유일한 요소로만 구성된다. Set을 사용하면 다음과 같은 작업을 수행할 수 있다.

 `new Set()` – Set을 만듭니다.
 `set.add('value')` – `add`를 이용해 `value`를 추가합니다.
 `set.has(key)` – `value`가 존재하면 `true`, 존재하지 않으면 `false`를 반환합니다.
 `set.size` – 요소의 개수를 반환합니다.
  values()-  values()를 통해 for of 반복문을 사용하여 값을 반복할 수 있다. 

즉 Map은 키-값 쌍을 저장하는 객체와 비슷하며, Set은 고유한 값을 저장하는 자료 구조이다. Map 및 Set은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있다. Map 및 Set을 사용하여 효율적인 데이터 구성 및 검색을 수행할 수 있다.

마무리

Map과 set에 대해서 잘 봐야겠다...