자바스크립트 ES6 문법 10 가지 정리

1.

destructuring

한국어로 구조 분해 할당.

const player = {
  name: 'Lebrone James',
  club: 'LA Lakers',
  address: {
     city: 'Los Angeles'
   }
 }

이러한 객체를 생성했을 때 console.log로 Los angeles라는 값을 띄우기 위해서는

console.log(player.address.city)

이런 식으로 해야한다.
하지만 여기서 destructuring 을 이용한다면 destruncturing이 프로퍼티명과 동일한 변수명으로 알아서 각각 분해하여 할당하여 준다. 활용은 다음과 같이 할 수 있다.

const { name, club, address: {city} } = player
console.log(name club city)

출력 결과는 다음과 같다.

Lebrone James LA Lakers Los Angeles 

template literal

위에 작성한 코드로 console에 Lebrone James lives in Los Angeles! 를 출력하고자 한다면 이렇게 할 수 있다.

console.log(name + ' lives in ' + city + '!')

여기서 template literal을 사용한다면 조금 더 편리하게 할 수 있다.

console.log(`${name} lives in ${city}!`)

2.

function addressMaker(city, state) {
  const newAddress = { city: city, state: state };
  console.log(newAddress);
}
addressMaker("Austin", "Texas");

이 코드에서 newAddress의 프로퍼티의 key와 value가 같을 땐 아래처럼 생략이 가능하다.

function addressMaker(city, state) {
  const newAddress = { city, state };
  console.log(newAddress);
}
addressMaker("Austin", "Texas");

3.

for of loop

for of 명령문은 반복 가능한 객체에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성한다.

let incomes = [3500, 3700, 4000];
let total = 0;

for (const income of incomes) {
  console.log(income);
  total += income;
}
console.log(total);

출력 결과는 아래와 같다

3500
3700
4000
11200

5.

multiple arguments

여러 개의 매개 변수가 있을 때 다양한 방법으로 함수를 생성할 수 있다.

function fnc(nums, num2) {
  console.log(nums, num2)
}
fnc(4, 5)

출력 결과

4 5

function fnc2(...nums) {
  console.log(nums)
}
fnc2(4,5,6,7)

출력결과

[4, 5, 6, 7]

function fnc3(nums) {
  console.log(arguments)
}
fnc3(4,5,6,7,8)

출력결과

{0: 4, 1: 5, 2: 6, 3: 7, 4: 8}

arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체다.

anonymous function

const lunchmenu = function() {
  return "I'm going to eat pizza for lunch"
}

arrow function

여러 방법으로 화살표 함수를 선언할 수 있다.

const dinnerMenu = () => {
  return "I'm going to eat a burger for dinner"
}
console.log( dinnerMenu())

const dinnerMenu2 = () => "I'm going to eat a burger for dinner"
console.log(dinnerMenu2())

const dinnerMenu3 = (food) => `I'm going to eat a ${food} for dinner`
console.log(dinnerMenu3('chicken'))

const dinnerMenu4 = food => `I'm going to eat a ${food} for dinner`
console.log(dinnerMenu4('raw tuna'))

const dinnerMenu5 = (food = 'burger') => `I'm going to eat a ${food} for dinner`
console.log(dinnerMenu5())

6.

include

.includes()는 문자열이 특정 문자열을 포함하는지 확인하는 메서드다. 다음과 같이 사용할 수 있다.

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

7.

var vs let vs const

if (false) {
  var example = 5
  let example2 = 6
}
console.log(example)
// console.log(example2)

위와 같은 코드가 있을 때 console.log(example)은 오류가 뜨지 않지만, console.log(example2)의 경우 에러 메시지가 뜬다.
그 이유는 var의 경우는 전역 변수로 선언이 되기 때문에 if문의 false이더라도 변수는 선언이 된 상태이지만, let의 경우 블록으로 선언이 되어 if문 자체가 실행이 되지 않는다면 선언되지 않는 함수이기 때문에 선언되지 않은채 console.log(example2)를 하였을 때 오류가 발생한다.

const example3 = 5;
// example3 = 7
console.log(example3);

const의 경우 상수이므로 example3 = 7과 같이 값을 재할당 할 수 없다.

const example4 = [];
example4.push(3);
console.log(example4);

위와 같은 경우에는 마치 포인트처럼 변수의 시작 주소값만을 정한 것이기 때문에 push를 통해 값을 넣을 수 있다.

const example5 = {};
example5.firstName = "Dylan";
console.log(example5);

위의 코드 역시 마찬가지이다.

8.

다른 파일의 값을 가져와서 사용해보자. 먼저 example.js란 파일을 만들어 아래와 같은 코드를 작성했다.

export const data = [1,2,3,4]

그리고 index.js에서 다음과 같이 사용할 수 있다.

import { data } from './example'

let updatedData = data;
updatedData.push(5)
console.log(updatedData)

출력 결과

[1,2,3,4,5]

9.

promise

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 여기서 비동기 처리란, '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 JS의 특성' 이다.
promise 구문은 아래와 같다

new Promise(executor)

여기서 executor은 resolve 및 reject 인수를 전달할 실행 함수를 말한다. 실행함수는 보통 어떤 비동기 작업을 시작한 후 모든 작업을 끝내면 resolve를 호출해 프로미스를 이행하고, 오류가 발생할 경우에는 reject를 호출해 거부한다. 즉, 실행함수에서 오류를 던지면 프로미스는 거부되고 실행함수의 반환 값은 무시된다.(아래 그림을 참고)

예제

let promise = new Promise((resolve, reject) => {
	// 프라미스가 만들어지면 execugtor 함수는 자동으로 실행된다.
    
    // 1초 뒤에 일이 성공적으로 끝낫다는 신호가 전달되면서 result는 '완료'가 된다.
    resolve("완료");
    reject("실패"); // 무언가 잘못되었다면 "실패" 가 뜨갰지만, 이미 resolve를 받았다면 무시된다.
    
    });

fetch

자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다.

기본 문법

let promise = fetch(url, [options]) 

예시

let result = fetch(serverURL);

result
  .fetch(response => {
    it(response.ok) {
      // success
    }
  })
  .catch(error => {
    // fail
  })

네트워크 요청 성공 시 Promise는 Response 객체를 resolve 한다. 실패 시 Promise는 Response 객체를 reject 한다.

async 와 await

async와 await를 사용하면 프라미스를 좀 더 편하게 사용할 수 있다.

async

async는 function 앞에 위치한다.

async function f() {
  return 1;
 }

function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다.
명시적으로 프라미스를 반환하더라도 결과는 동일하다.

async function f() {
  return Promis.resolve(1);
}

f().then(alert);

async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환한다.

await

await는 async함수 안에서만 동작한다. 문법은 다음과 같다.

let value = await promise;

await키워드는 프라미스가 처리될 때까지 기다리고 결과는 그 후에 반환된다.
await를 사용하면 promise.then을 사용하는 것보다 가독성도 좋고 쓰기도 쉽다.

async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료"), 1000)
  });
  
  let result = await promise; // 프라미스가 이행될 때까지 기다린다.
  
  alert(result);
 }
 
 f();

10.

set

set은 중복을 제거한 값들의 집합이다.
객체 선언은 다음과 같이 할 수 있다.

let mySet = new Set();

set 객체 사용

mySet.add(1); // .add를 이용하여 요소를 추가할 수 있다.
mySet.has(1); // .has를 이용하여 특정 요소를 확인할 수 있다. 1은 있으므로 true
myset.has(2); // false
mySet.delte(1); // Set 객체에서 1이 제거된다.
mySet.clear(); // .clear 로 모든 요소를 제거할 수 있다.