📝 Template literal

Template literal 은 내장된 표현식을 허용하는 문자열 리터럴이다. Template literal 표현식/문자열 삽입, 여러ß 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다.

var name = 'Eddie Nketiah'
var club = 'Arsenal'
alert(`${name} is belong ${Arsenal}.`)

사용 방식은 backtick으로 감싸고 ${변수 명} 을 넣고 싶은곳에 작성해주면 된다.

🧬 Destructuring

Destructuring(구조분해할당)은 구조화된 배열 또는 객체를 비구조화 하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당하거나 반환할 때 유용하게 쓰인다. 그럼 ES6 에서 Destructuring 하는 법을 알아보자.

function address(address){
  const newAddress = {
    city: address.city,
    state: address.state,
    coutry: 'London'
  }
  console.log(newAddress.city, newAddress.state, newAddress.coutry)
}
address({city: 'Eddie', state: 'Xhaka'})

다음 코드에서는 {city: 'Eddie', state: 'Xhaka'} 객체가 먼저 address 함수에 전달되고, address객체의 city와 state 속성을 복사하여 newAddress 객체를 생성한다.

🔄 반복문

ES6에서 가장 많이 쓰는 반복문 중 하나인 forEach 이 있다. 빠르게 예제를 통해서 알아보자.

forEach

forEach() 메서드는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다.
map() 메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다는 점이다.

var list = [1, 2, 3, 4, 5];
var loop = list.forEach(function(e, i) {
  return e;
});

🗂️ Spread Operator

Spread Operator를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체를 개별 요소로 분리시킬 수 있다. 예제를 보며 알아보자.

let GroupA = ["Mary", "Joel", "Danny"];
let GroupB = ["David", ...GroupA, "Lily"];
console.log(GroupB); // ["David", "Mary", "Joel", "Danny", "John", "Lily"]

GroupB 에서 ...을 사용하여 ["Mary", "Joel", "Danny"] 가 전재되어 GroupB에 추가된 것을 확인할 수 있다.

🤖 Function

1. 🦦 Parameter(매개변수)

ES6 부터 함수 Parameter에 기본값을 줄 수 있게 되었다. 또 Parameter에 함수 호출을 넣어줄 수도 있다. 또 여러개의 매개변수를 받을 때에는 ...Parameter 를 Parameter로 써주게 되면 매개변수를 여러개 받을 수 있다.

function example0(a = 1){
  console.log(a);
  return 10;
}
function example1(b = example0){
  console.log(b);
}
function example2(...c){
  return c;
}
example0();				// { a: 1 }
example1(); 			// { b: 10 }
example2(1,2,3,4); 		// { c: [1, 2, 3, 4] }

2. 🏹 Arrow function

ES6 에서는 화살표를 이용하여 함수를 정의하는 새로운 방법이 추가되었다.

한 줄에 쓰기

화살표 함수는 한줄로 간단히 정의할 수 있다. 중괄호를 사용하지 않고 바로 오른쪽에 정의하고, return 키워드를 명시적으로 정의하지 않아도 오른쪽에 있는 값이 알아서 return 된다.(써도 문제 X)

const example3 = (/*Parameter 는 여기에*/) => { return 10; }
const example4 = (a, b) => a+b;
console.log(example3);			// 10
console.log(example4(10, 20);	// 20

여러줄에 쓰기

화살표 함수에 여러줄의 코드가 포함되어야 한다면 전체를 중괄호로 묶고 return 키워드를 사용해야 한다.

const example5 = (a, b) => {
  var result;
  if(a > b) result = a-b;
  else result = b-a;
  return result;
}
console.log(example5(14, 7))	// 7

3. 🥷 Anonymous function

Anonoymous 함수는 변수에 함수를 대입하는 느낌의 방식으로 함수를 정의한다.

const Func = function () {
  return "I love Arseanl F.C";
};
console.log(Func); // I love Arsenal F.C

🏟️ includes

includes() 는 Array 에 () 안에 있는 값이 있는지 검사하여 Boolean 으로 반환해준다.

let numArray = [1, 2, 3, 4, 5];
console.log(numArray.includes(7)); // false

🆚 var, let, const

var 타입은 스코프가 함수 단위다.Js에서는 값의 유효 범위를 스코프라고 표현한다. 쉽게 말하자면 값을 사용할 수 있는 코드 영역이라고 말할 수 있다.

var a = 'hi';
var a = 'hello';
let b = 'good';
// let b = 'job' // Uncaught SyntaxError: Identifier 'message' has already been declared
const c = 'London';
// const c = 'Paris'; //Uncaught SyntaxError: Identifier 'message' has already been declared
if(true){
  var a = 'world!';
  let b = 'great';
  const c = 'Tokyo';
  console.log(a);	// world!
  console.log(b);	// great
  console.log(c);	// Tokyo
}
console.log(a); // world!
console.log(b); // good
console.log(c); // London

위 코드에서 나온 것 처럼 var 는 중복으로 변수를 설정할 수 있다. 위 코드에서 나온 실행결과처럼 if 문 밖에 a 에 'hello'로 설정하고 if 문 안에서 새로운 값을 설정했는데 if 문 바깥의 값도 수정됬다. 이것은 var 가 스코프 관련 문제를 야기시킨다는 것을 알 수 있다. 이러한 단점을 보안한 것이 바로 let 과 const 다.

🧳Class

ES6에서는 기존의 prototype 기반으로 클래스를 만드는 것보다 명료하게 클래스를 만들 수 있게 바뀌었다.

✏️ Class 선언하기

// animal.js
export class Animal {
  constructor(type, legs) {
    this.type = type;
    this.legs = legs;
  }
  makeNoise(sound = "Loud Noise") {
    console.log(sound);
  }
  get metaData() {
    return `Type: ${this.type}, Legs: ${this.legs}`;
  }
  static return10() {
    return 10;
  }
}
export class Cat extends Animal {
  makeNoise(sound = "meow") {
    console.log(sound);
  }
}
// Class 선언은 Function 선언과 달리 호이스팅 되지 않음.

🖇️ Class 사용하기

// app.js
import { Animal, Cat } from "./aniaml";
console.log(Animal.return10()); // 10
const cat = new Cat("feline", 4);
cat.makeNoise(); // meow

⛓️ 비동기 처리

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 말한다. 동시에 여러가지 작업을 처리할 수 있고 기다리는 과정에서 다른 함수를 호출할수도 있다.

다음 그림에서 동기 처리를 할 때는 하나의 작업씩 처리하기 때문에 45초가 걸린다. 하지만 비동기 처리를 하였을 때는 1번 작업이 시작하면 동시에 2번 작업이 실행된다. 1번 작업은 결과값이 나오는대로 출력된다.

📟 ES6 Modules

이전 버전의 js 에서는 외부 라이브러리를 가져오는 방법으로만 import 가 가능했지만, ES6 부터는 정식으로 module 을 제공하고 있다.
특히 같은 파일 내에서 여러 개의 모듈을 export 하는 것도 가능하며, object destructuring 을 통해 간편하게 import 할 수 있으며, 특정 모듈을 원하는 이름 으로 import 하는 것도 가능하다.

// module.js
export const func = (a,b) => a + b;

import { func } from "./module.js"
console.log(func(1,2)); // 3

🤙🏻 promise

ES6 Promise 는 비동기 처리를 위한 표준 API이다. 기존에는 콜백 함수를 이용하여 비동기 처리를 했지만, 콜백 함수를 이용한 비동기 처리는 코드의 가독성과 유지보수의 어려움이 존재한다. ES6 Promise는 이러한 문제점을 보완하여 비동기 처리를 보다 쉽고 효율적으로 할 수 있도록 도와준다. 그럼 Promise 를 사용하는 법을 알아보자.

1. promise 생성

ES6 Promise 는 new Promise()를 통해 생성할 수 있다. new Promise()는 하나의 콜백 함수를 인자로 받으며, 이 콜백 함수는 resolve와 reject라는 두 개의 인자를 받는다. resolve는 성공적으로 실행됐을 때, reject는 실패했을 때 호출된다.

new Promise((resolve, reject) => {
  // 비동기 처리 코드
  if (/* 성공적으로 처리됐을 때 */) {
    resolve(/* 결과 값 */);
  } else {
    reject(/* 에러 메시지 */);
  }
});

2. promise 사용

Promise 객체를 생성한 후, .then()과 .catch()를 이용하여 비동기 처리 결과를 다루어 줄 수 있다. .then()은 성공적으로 처리됐을 때 실행되며, .catch()는 실패했을 때 실행된다.

promiseObject.then(result => {
  console.log("Succeed"); // 성공적으로 처리됐을 때 실행될 코드
}).catch(error => {
  console.log("Failed") ;// 실패했을 때 실행될 코드
});

3. promise chaining

Promise 객체는 체이닝(Chaining) 을 지원한다. 즉, 여러 개의 비동기 처리를 연결해서 사용할 수 있다. 이를 통해 가독성이 높아지고, 중첩된 콜백 함수를 사용하지 않아도 된다.

promiseObject.then(result => {
  console.log(1);// 첫 번째 비동기 처리
  return result;
}).then(result => {
  console.log(2);  // 두 번째 비동기 처리
  return result;
}).then(result => {
  console.log(3);  // 세 번째 비동기 처리
}).catch(error => {
    console.log("Error");// 실패했을 때 실행될 코드
});