JavaScript 문법 종합 2주차(1)

1.  각종 ES6 문법 소개

• ECMAScript 6 (ES6) 는 JavaScript의 버전 중 하나로, 2015년도에 발표됨
• ES6는 이전 버전 ES5 에서 새로운 문법과 기능을 도입하여 JavsScript 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선함
• 2015년도에 대규모 문법적 향상 및 변경이 있었기 때문에 ES6가 항상 언급됨 => 이때 새로 등장한 문법이 많음

  ⅰ.  let, const

• 기존 변수 선언을 위해 존재하던 var를 대체해서 나온 변수 선언에 사용되는 키워드
• 2015년도 이전 => var로 변수 선언 
  ES6 => let(변수선언), const(상수선언)
• 선언이란 변수명을 자바스크립트 엔진에 알리는 것
• 할당이란 변수에 값을 저장한는 것(= 할당연산자)
• let과 const  의 특징
  • let => 재할당이 가능하고, 재선언은 불가능
  • const => 재할당, 재선언이 불가능하고, 초기값이 없으면 선언이 불가능
• var의 특징
  • 재할당, 재선언이 가능하고 호이스팅 됨

let value = "value1"
console.log(value) // value1

value = "value2" // 재할당 가능
console.log(value) // value2

let value = "value3" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

const value; // 초기값 없이 선언 불가능, SyntaxError: Missing initializer in const declaration
---
const value = "value1"
console.log(value) // value1

value = "value2" // 재할당 불가능, TypeError: Assignment to constant variable.

const value = "value2" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

var name = "name1"
console.log(name) // name1

var name = "name2"
console.log(name) // name2

// 호이스팅
console.log(name) // undefined

var name = "name1"

ⅱ. 화살표 함수(Arrow Function)

• function 이나 return 키워드 없이 함수를 만드는 방법
• return문이 한줄인 경우에는 중괄호와 return 모두 생략이 가능하고 매개변수가 하나일 경우에는 소괄호도 생략이 가능함

let add = () => {};
let add2 = x => 1;

ⅲ.  삼항연산자 (ternary operator)

• condition ? true인 경우 반환값 : false인 경우 반환값

console.log(true ? "참" : "거짓");
console.log(false ? "참" : "거짓");

ⅳ.  구조 분해 할당 (Destructuring)

• 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법
• de = not, structuer = 구조

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

let arr = ["value1", "value2", "value3"];
let [a, b, c, d] = arr;
// let [a, b, c, d = 4] = arr; d가 undefined의 경우 초기값을 세팅해준 값으로 출력됨
// 반환받을 값이 있으면 초기값을 보여주지 않고 반환되는 것을 보여줌

console.log(a);
console.log(b);
console.log(c);
console.log(d); // 할당받을 값이 없으므로 자바스크립트 엔진이 자동으로 undefined를 반환

// (2) 객체인 경우
let user = {
  name: "abc",
  age: 30,
};

let { name, age } = user; // 객체의 key값과 매칭되서 리턴함
let { name, age } = {
  name: "abc",
  age: 30,
};
console.log(name);   // string
console.log(age);    // number

// 새로운 이름으로 할당
let user = {
  name: "abc",
  age: 30,
};
let { name: newName, age: newAge } = user;
// name에 abc가 아니라 newName이라는 변수에 새로운 이름으로 할당
console.log(`newName => ${newName}`); // newName => abc
console.log(`newAge => ${newAge}`); // newAge => 30

let { name, age, birthday } = user;
console.log(name);
console.log(age);
console.log(birthday); // undefined, 초기값을 미리 설정할 수 있음

 

ⅴ. 단축 속성명 (property shorthand)

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

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

const obj = {
  name,
  age: newAge
}

const obj = {
  name,
  age
}

 

ⅵ. 전개 구문 (Spread)

• 배열이나 객체를 전개하는 문법으로 구조분해할당과 함께 많이 사용됨
• 원래 구조를 없애고 새로운 구조로 덧입혀야할때 사용

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

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

// 객체
let user = {
  name: "abc",
  age: 30,
};

let user2 = { ...user };
console.log(user); // { name: 'abc', age: 30 }
console.log(user2); // { name: 'abc', age: 30 }

 

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

• 매개 변수의 개수를 정확히 모를때 사용해서 추가적으로 arguments가 들어올 수 있다라는 것을 명시해줌

function exampleFunc(a, b, c, ...args) {
  console.log(a, b, c); // 1 2 3
  console.log(...args); // 4 5 6 7
  // ...를 빼고 args만 입력하면 [4, 5, 6, 7]배열 형태로 반환
}

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

 

ⅷ. 템플릿 리터럴 (Template literals)

• 백틱(`)과 ${}로 표현함
• ${} 를 사용하여 자바스크립트 코드를 입력할 수 있음
• 멀티라인을 지원함

const testValue = "안녕하세요";
console.log(`Hello World ${testValue}`);

// 멀티라인을 지원함
console.log(`
  Hello
    My name is JavaScript!!!

    Nice to meet you
`);

ⅸ. named export vs default export

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

export default Name

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

// 2. 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)

2. 일급 객체로서의 함수

• 자바스크립트에서 함수는 일급 객체(First-Class Object)
  => 자바스크립트에서 함수는 하나의 객체로써 존재함
  ❓ 일급객체(First-class Object) 란
  - 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킴
• 함수가 일급 객체로 취급되기 때문에 함수를 매우 유연하게 사용할 수 있음
  => 자바스크립트에서 함수는 매우 중요한 개념!!!
• 함수가 일급객체로 취급되는 5가지 경우

ⅰ. 변수에 함수를 할당

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

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

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

• 함수가 값으로 취급되기 때문에 다른 함수의 인자로 전달할 수 있음.
• 콜백(callback)이나 고차함수(higher-order function)를 작성하는데 사용됨
  ✔ 콜백(callback)함수 : 매개변수로써 쓰이는 함수
  ✔ 고차함수 : 함수를 인자로 받거나 return하는 함수
  ✔ 콜백함수는 고차함수의 한 종류 
     =>  why? 콜백 함수는 매개변수로 쓰인 함수, 함수를 인자로 받기 때문

function callFunction(func) {
  // 매개변수로 받은 변수가 사실, 함수
  func();
}

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

callFunction(sayHello);

ⅲ. 함수를 반환

• 함수는 값으로 취급되기 때문에 다른 함수를 반환 할 수 있음
• 이것은 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용됨

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

const addFive = creatAdder(5); 
console.log(addFive(10));  // 15

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

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

const person = {
  naem: "John",
  age: 31,
  isMarried: true,
  // sayHello: function () {
  //   console.log(`Hello, My name is ${this.naem} `);
  // },
  sayHello: () => {
    console.log(`Hello, My name is ${this.naem} `); // undefined가 출력됨
  },
};

// this => 항상 자기 자신을 가리킴
person.sayHello();

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

• 함수는 배열의 요소로 할당될 수 있음 
• 함수를 배열에서 사용할수 있게함

const myArr = [
  function (a, b) {
    return a + b;
  },
  function (a, b) {
    return a - b;
  },
];
console.log(myArr[0](1, 3));
console.log(myArr[1](10, 7));

 

ⅵ.정리

• 함수가 일급 객체로 취급되기 때문에 함수는 매우 유연하게 사용할 수 있음
  => 다양한 프로그래밍 패턴에서 사용됨
• 코드를 더 간결하고 모듈화된 형태로 작성할 수 있게 해줌
• 함수를 다양하게 조합할 수 있음
  => 새로운 함수를 반환하는 함수를 작성하면 함수를 조합하여 더 복잡한 기능을 구현할 수 있고 이것을 활용해서 코드를 더욱 간결하게 작성할 수 있으며, 유지 보수도 쉬워짐

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

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

const multiplyByTwo = multiplyBy(2); // num 자리에 2가 할당됨
const multiplyByThree = multiplyBy(3);
// 리팩토링 함수를 만들어서 반복되는 코드에 대한 처리를 해줌

console.log(multiplyByTwo(10));
console.log(multiplyByThree(10));

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

함수가 일급 객체로 취급되어 자바스크립트에서 함수를 다양한 방식으로 사용할 수 있게 해줌
함수를 객체나 배열과 같은 일반적인 자료형과 동일한 방식으로 사용할 수 있기 때문에, 코드를 더 간결하고 모듈화된 형태로 작성할 수 있음

3.Map과 Set

• JavaScript에서 객체(Object)와 배열(array)일 이용하여 다양하고 복잡한 프로그래밍을 할 수 있음
  ❗ But, 현실세계의 여러가지 문제들을 '프로그래밍'적으로 반영하기엔 많이 부족함
• Map과 Set은 이러한 한계를 극복하고자 비교적 최근에 등장한 자료구조
  ❓ 자료구조란? 여러가지 자료의 형태 ex) array, object ....
• Map과 Set의 두 자료 구조는 데이터의 구성, 검색 및 사용을 객체나 배열보다 효율적으로 처리할 수 있기 때문에 많이 각광 받고 있음
• Map과 Set의 목적은 데이터의 구성, 검색, 사용을 효율적으로 처리 
  => 기존의 객체를 도는 배열

ⅰ. Map

• key와 value 형태로 저장됨
• 객체의 key는 문자의 형태로 들어오지만 Map에서는 어떠한 데이터 타입(유형)도 들어올 수 있음
  => Map은 키가 정렬된 순서로 저장되기 때문!!
• 제공하는 기능 > 검색, 삭제, 제거(완전한 제거), 존재 여부 확인
  • key, value 추가 및 검색(set)
  • key, value 삭제(delete)
  • 모든 key, value(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.deleter(key) - key에 해당하는 값을 삭제함
◻ map..clear() - 맵 안의 모든 요소를 제거함
◻ map.size - 요소의 개수를 반환

const myMap = new Map();
myMap.set("key", "value");

// ....
// ...

myMap.get("key");

• Map의 반복
  • Map을 사용하는 이유는 대량의 데이터를 처리하기 위해서 
  • 반복을 위한 method: keys, values, entries

 for - of 반복문
for of 반복문은 ES6에 새로 추가된 컬렉션 전용 반복 구문
for of 구문을 사용하기 위해서 컬렉션 객체가 [symbol.iterator] 속성을 가지고 있어야만 함(직접 명시 가능)
Map 객체는 반복 가능한 객체로 Symbol.iterator이 기본적으로 정의 되어 있음
❌ iterator는 반복자라는 뜻
      요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조

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

console.log(myMap.keys()); // [Map Iterator] { 'one', 'two', 'three' }
for (const key of myMap.keys()) {
  console.log(key);
}

console.log(myMap.values());   // [Map Iterator] { 1, 2, 3 }
for (const value of myMap.values()) {
  console.log(value);
}

console.log(myMap.entries()); // [Map Entries] { [ 'one', 1 ], [ 'two', 2 ], [ 'three', 3 ] }
// key와 value의 값 하나씩 배열로 묶고 천체 내용을 객체로 감싸줌
for (const entry of myMap.entries()) {
  console.log(entry);
}

• Map의 크기와 존재여부 확인

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

console.log(myMap.size);   // map의 길이
console.log(myMap.has("two"));  // key 기반 검색

ⅱ.  Set

• 고유한 값을 저장하는 자료 구조
• Set은 값만을 저장하며, key는 저장하지 않음
• Set은 값이 중복되지 않는 유일한 용소로만 구성됨
• Set을 사용하여 값 추가 및 검색, 값 삭제, 모든 값 제거, set 크기 및 존재여부 확인
• Set에서 중복되는 값이 있으면 값이 합쳐짐

new Set();
mySet.add("value1");
mySet.add("value2");
mySet.add("value2");

console.log(mySet.size); // 2

// 존재여부 확인
console.log(mySet.has("value1"));
console.log(mySet.has("value2"));
console.log(mySet.has("value3"));

• Set의 반복
  • Set에서는 values()메소들 사용하여 값을 반복할 수 있음

const mySet = new Set();

// Iterator, 반복
mySet.add("value1");
mySet.add("value2");
mySet.add("value3");
mySet.add("value5");
mySet.add("value8");
for (const value of mySet.values()) {
  console.log(value);
}

// 크기 확인
console.log(mySet.size);

// 존재 여부 확인
console.log(mySet.has('value2')); // true 출력

JavaScript에서 Map과 Set은 두 가지 다른 유형의 자료구조
Map은 key - value 쌍을 저장하는 객체와 비슷하고, Set 은 고유한 값을 저장하는 자료 구조
이 두가지 자료구조를 사용하여 효율적인 데이터 구성 및 검색을 수행할 수 있음