js의 es6 문법 소개

ECMAScript6 (ES6)

2015년에 대규모 문법적 향상 및 변경이 있었기 때문에, ES6는 항상 언급이 된다

구조분해할당 (destructuring)

1. 배열의 경우

ex1)

let [value1, value2] = [1, "new"]

value1에는 1이 value2에는 new가 할당된다.

ex2)

let arr = [value1, value2, value3];
let [a,b,c,d=4] = arr;

value1 =a, value2 =b, value3 =c 로 할당된다.
arr에는 d값이 들어갈 자리가 없기 때문에 초기값을 설정하지 않으면 undifined가 출력
value4에 위와같이 초기값을 설정해주면 4로 출력된다.
만약 value4 가 존재한다면 4는 초기값이 때문에 사라지고 value4로 출력된다.

2. 객체인 경우

ex1)

let { name, age } = {
  name: "agc",
  age: 30,
};

console.log(name, age); // agc, 30

ex2) 새로운 이름으로 할당

let user = {
  name: "qwer",
  age: 30,
};

let { name: newName, age: newAge } = user;

console.log(newName, newAge); // qwer, 30

ex3) undifined일 경우 초기값 잡아주기

단축 속성명 : property shorthand

key, value 명이 똑같으면 단축해서 사용할 수 있다.

const obj = {name,age}

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

//같은거다

전개구문 = spread operator

가장많이 사용되는 es6 문법중 하나

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

나머지 매개변수

매개변수의 갯수가 정확히 몇개인지 모를때

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

템플릿 리터럴

` <- 백틱을 사용

console.log(`Hello World ${3+3}`); //Hello World 6

일급 객체로서의 함수

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

1. 변수에 함수를 할당할 수 있다

함수가 마치 값으로 취급된다.
함수가 나중에 사용될 수 있도록 조치가 되었다.

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

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

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

2-1. 콜백함수 : 매개변수로써 쓰이는 함수 (고차함수의 한 종류)
2-2. 고차함수 : 함수를 인자로 받거나 return하는 함수

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);
console.log(addFive(10)); // 15 출력

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

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

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

여기서 화살표 함수를 사용하면

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

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

화살표함수는 this를 바인딩 하지 않는다.

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

• Key / Value
• key에 어떤 데이터 타입도 다 들어올 수 있다.
• Map은 키가 정렬된 순서로 저장되기 때문이다.
• 기능 > 검색, 삭제, 제거, 여부확인

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

2. Map의 반복
   keys, values. entries 메소드를 사용하여 키,값 및 키-값 쌍을 반복할 수 있다.

• for ...of 반복문

var iterable = [10, 20, 30];

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

for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문. for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.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]}`);
}

console.log(myMap.size);// map의 사이즈 (길이)
console.log(myMap.has("two));// key 기반 검색
-console-
one
two
three
1
2
3
one: 1
two: 2
three: 3
3
true

Set

• 고유한 값을 저장하는 자료구조
• 값만 저장한다
• 키를 저장하지는 않는다
• 값이 중복되지 않는 유일한 요소로만 구성된다.
• 값 추가, 검색, 값 삭제, 모든값 제거, 존재여부 확인

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
console.log(mySet.size) // 2

mySet.add('value2'); // 똑같은 값을 추가하면 유일한 요소로만 구성
console.log(mySet.size) // 2 <- 같은 값을 추가했기에 똑같이 2가 나온다

console.log(mySet.has("value1")); // true

// Iterator, 반복

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

}
// 
vaule1
vaule2