강의 요약

ES6

2015년에 발표된 JavaScript의 버전 중 하나.

문법

구조분해할당 (destructuring)

• 배열이나 객체의 속성을 분해해서 그 값을 변수에 할당하는 것.

// 1. 배열
// val1 = 1, val2 = "new"
let [val1, val2] = [1, "new"];

// a = 1, b = 2, c = 3, d = undefined
let [a, b, c, d] = [1, 2, 3];

// a = 1, b = 2, c = 3, d = 4
let [a, b, c, d = 4] = [1, 2, 3, 4];

// 2. 객체
// 변수를 무조건 중괄호로 감싸야함
user = {
	name: "abc",
    age: 30,
}
let { name, age } = user;

// user의 name을 newName이라는 변수, user의 age를 newAge라는 변수에 할당
let { name: newName, age: newAge } = user;

단축 속성명 (property shorthand)

• key와 value의 이름이 같으면 value 생략 가능.

let name = "abc";
let someAge = 30;

let obj = {
	name,			// === name: name,
    age: someAge,
}

전개 구문 (spread operator)

• 배열이나 객체를 전개하는 구문.

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

console.log(...arr);		// => [1, 2, 3]이 아니라 1 2 3

let newArr = [...arr, 4];	// => arr을 풀어서 newArr에 배열로 집어넣고 끝에 4를 추가

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

나머지 매개변수 (rest parameter)

• 지정된 매개변수 외 추가로 매개변수가 들어온다는 명시

// 매개변수가 3개 이상 들어오면 3번째부터 끝까지 args라는 배열에 저장됨
function add(a, b, ...args) {	// args = [3, 4]
  let ans = a + b;
  args.forEach((ele) => {
    ans += ele;
  });
  return ans;
}

console.log(add(1, 2, 3, 4));

템플릿 리터럴 (template literal)

• 따옴표/쌍따옴표 대신에 백틱(`)을 사용해서 따옴표의 기능에 추가적인 기능 있음.
  • JavaScript 코드 입력 가능
  • 연산 입력 가능

// 백틱 안에서 javascript 문법을 사용하려면 ${}로 감싸야함.
let test = "test";
console.log(`Hello World! ${test}`);	// => "Hello World! test"

• 멀티라인 지원

console.log(`


		Hello
        
        
        			World
                    
                    
                    
                    `);		// => 공백들이 그대로 출력됨

일급 객체로서의 함수

• 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체.

특징

1. 변수에 함수 할당 가능

// 함수가 값으로 취급됨.
// 재사용될 수 있음.
let sayHello = function() {
	console.log("Hello!");
}

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

function callFunction (func) {
	func();
}
callFunction(sayHello);

3. 함수 반환 가능

function createAdder(num) {
	return function (x) {
    	return x + num;
    };
}
let addFive = createAdder(5);	// createAdder(5) === function (x) { return x + 5; }

console.log(addFive(10));

4. 객체의 요소로 함수 할당 가능

let person = {
	name: "abc",
    age: 30,
    sayHello: function () {
    	console.log(`Hello my name is ${this.name}`);
    }
}
person.sayHello();

5. 배열의 요소로 함수 할당 가능

let arr = [
	function (a, b) {
    	return a + b;
    },
    function (a, b) {
    	return a - b;
    },
]
console.log(arr[0](1, 2));	// 3
console.log(arr[1](2, 1));	// 1

Map, Set

자료구조.
목적: 데이터의 구성, 검색, 사용을 기존의 객체 또는 배열보다 효율적으로 처리

Map

• Key-value pair로 데이터 저장.
• 객체와 달리 key값으로 문자열 외의 다른 데이터 타입도 들어올 수 있음.
• Map은 key가 정렬된 순서로 저장됨.

기능

1. 값 추가
2. 검색
3. 값 삭제
4. 모든 값 제거
5. 존재 여부 확인

let myMap = new Map();

// 요소 추가
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

// 사이즈 (요소의 갯수)
console.log(myMap.size);

// key 검색 (true/false)
console.log(myMap.has("two");

console.log(myMap.keys());	// => [Map Iterator] { 'one', 'two', 'three' }

// Iterator (반복자) (for~of)
for (const key of myMap.keys()) {
}
for (const value of myMap.values()) {
}
for (const entry of myMap.entries()) {
}

Set

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

기능

1. 값 추가
2. 검색
3. 값 삭제
4. 모든 값 제거
5. 존재 여부 확인

let mySet = new Set();

// 요소 추가
mySet.add("value1");
mySet.add("value2");
mySet.add("value3");
mySet.add("value5");
mySet.add("value8");

// 사이즈 (요소의 갯수)
console.log(mySet.size);

// key 검색 (true/false)
console.log(mySet.has("value1");

// Iterator (반복자) (for~of)
for (const value of mySet.values()) {
}