[항해99 1주차] JS문법 종합반 - 2주차

es6 문법

1. let, const

* 선언: 변수명을 js 엔진에 알리는 것, 할당: 변수에 값 저장

• let: 재할당 가능, 재선언 불가능
• const : 재할당, 재선언 불가능, 초기값 없으면 선언 불가능
• var : 재할당, 재선언 가능

2. 화살표 함수 : function이나 return 키워드 없이 함수 만드는 방법

* function은 호출할 때 this 정해지고, 화살표함수는 선언할 때 this 정해짐

3. 삼항 연산자

condition ? true : false

4. 구조 분해 할당(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

// 객체의 경우
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,	// name : name 이렇게 이름과 속성이 같으면 생략가능.
	age: newAge 	// 이건 달라서 생략 불가능
}

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

6. 전개 구문 : 배열이나 객체를 전개

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

//...args 에 의해 a , b 외에 지정하지 않아도 속성이 들어간다.
// 만약 ...args 가 아닌 args 를 넣으면 배열형식으로 들어간다

8. 템플릿 리터럴 : 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식

백틱(``) 과 ${}로 표현

const testValue = "안녕하세요!"
console.log(`Hello World ${testValue}`) 
// Hello World 안녕하세요! 출력
console.log(`
      백틱을 사용하면 
			이렇게도 출력할 수 있습니다
            					신기하죠??	// 멀티라인을 지원!!
`)

9. named export vs default export

// default Export
// name.js
const Name = () => {
}

export default Name

// other file 
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"


// named export
// 하나의 파일에서 여러 변수/클래스 등을 export 하는 것이 가능

export const Name1 = () => {
}

export const Name2 = () => {
}

// other file
import {Name1, Name2} from "name.js"
import {newName} from "name.js" // x

// 다른 이름으로 바꾸려면 as 사용
import {Name1 as newName, Name2} from "name.js"

// default export 처럼 가져오려면 * 사용
import * as NameModule from "name.js"

console.log(NameModule.Name1)

일급 객체로서의 함수

* 일급객체(First-class Object): 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체 =>객체와 같다고 이해

- 함수가 일급 객체로 취급되는 경우

1. 변수에 함수를 할당: 함수는 값으로 취급 => 변수에 할당 가능

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

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

2. 함수를 인자로 다른 함수에 전달: 함수는 값으로 취급 => 다른 함수의 인자로 전달 가능, 콜백이나 고차함수 작성에 사용

* 콜백함수: 어떠한 함수의 매개변수로 쓰이는 함수

* 고차함수: 함수를 인자로 받거나 함수를 출력으로 반환하는 함수  고차함수 > 콜백함수

function callFunction(func) {
  func();	// 매개변수로 받은 변수 => 함수
}

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

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

3. 함수를 반환 : 함수는 값으로 취급 => 다른 함수에서 반환 가능, 팩토리나 클로저를 작성하는데 사용

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

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

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

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);	// this는 자기자신 가리킴
  }
};

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

5. 배열의 요소로 함수를 할당 : 배열의 요소로 할당 가능 => 함수를 배열에서 사용 가능

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 출력

Map과 Set

* 목적: 데이터의 구성, 검색 및 사용을 객체나 배열보다 효율적으로 처리

1. Map

: 키-값을 저장, 객체와 달리 키는 모든 유형 가능, 키가 정렬된 순서로 저장 => 추가한 순서대로 반복할 필요 x

- Map의 기능

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

- 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 – 요소의 개수를 반환합니다.

- Map 생성 및 사용

// 새로운 Map 생성
const myMap = new Map();
//Map에 값 추가
myMap.set('key', 'value');
//Map에서 값 검색
console.log(myMap.get('key')); // 'value' 출력

- Map의 반복: keys(), values(), entries() 메소드를 사용하여 키, 값 및 키-값 쌍을 반복

=> for ...of 반복문: 사용하기 위해서는 컬렉션 객체가 Symbol.iterator 속성을 가지고 있어야함(직접 명시 가능)

* iterator(반복자): 요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 상태로 열거되어있는 자료구조

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);
}

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

for (const entry of myMap.entries()) {
  console.log(`${entry[0]}: ${entry[1]}`);
}

- Map의 크기 및 존재 여부 확인

// Map의 크기 확인 => size 속성
console.log(myMap.size); // 3 출력

// 특정 key가 Map에 존재하는지 확인 => has()
console.log(myMap.has('two')); // true 출력

2. Set 

: 고유한 값 저장하는 자료구조, 값만 저장(key 저장x), 값이 중복되지 앟는 유일한 요소로만 구성

- Set의 기능

• 값 추가 및 검색
• 값 삭제
• 모든 값 제거
• Set 크기 및 존재 여부 확인

- Set의 생성 및 사용

// 새로운 Set 생성
const mySet = new Set();

// Set에 값 추가
mySet.add('value1');
mySet.add('value2');

// Set에서 값 검색
console.log(mySet.has('value1')); // true 출력

- Set의 반복 => values()사용

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

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

- Set의 크기 및 존재 여부 확인

// Set의 크기 확인
console.log(mySet.size); // 3 출력
// 특정값을 검색해 존재 여부 확인
console.log(mySet.has('value2')); // true 출력

 

* Map: 키-쌍을 저장하는 객체 

  Set: 고유한 값 저장

 => 둘 다 값 추가, 검색, 삭제 및 모든 값 제거 수행 가능 & 효율적인 데이터 구성 및 검색 수행