[Javascript] ES6

let, const

// let
let name = '철수';
name = '영희';
console.log(name);

화살표함수

//화살표 함수 사용
const myFunc = (name) => {
    return `안녕 ${name}`;
}
console.log(myFunc('영희'));


//화살표 함수를 map과 함께 사용하기
const myArray = ['진수', '영철', '영희', 5];

let arr2 = myArray.map((item) => item);
console.log(arr2);

템플릿 리터럴 ``

//화살표함수, 템플릿 리터럴 사용
const myFunc1 = (name) => `안녕 ${name}`;

console.log(myFunc1('철수'));

기본매개변수

//Default parameters(기본 매개변수) x
const myFunc2 = (name, age) => {
    return `안녕 ${name} 너의 나이는 ${age}살 이니?`;
}
console.log(myFunc2('순자'));

//Default parameters(기본 매개변수) o
const myFunc3 = (name, age = 32) => {
    return `안녕 ${name} 너의 나이는 ${age}살 이니?`;
}
console.log(myFunc3('덕자'));

Array and object desturction(배열 및 객체 비구조화)

const contacts = {
    familyName: '정',
    name: '주나',
    age: 42
};

//ES5에서는 let familyName = contatcts.familyName로 각 변수에 값을 할당해야함
//ES6에서는 객체 프로퍼티를 얻기 위해 값을 중괄호에 넣음
let {familyName, name, age} = contacts;

console.log(familyName);
console.log(userName); //undefined
console.log(name);
console.log(age);

//name의 변수명 변경
let {name: anotherName} = contacts;
console.log(anotherName); //주나 출력

//배열의 경우 {} 대신 []써주면 됨
const arr = ['하니', '두리', '서희', 3];
let [value1, value2, value3] = arr;
console.log(`배열 내 이름: ${value1}`);
console.log(`배열 내 이름: ${value2}`);
console.log(`배열 내 이름: ${value3}`);

import and export

 

 

export default function detail(name, age){
    return `안녕 나는 ${name}, ${age}살이야 잘부탁해!`;
}

 es6Component.js 파일에서 export 

 

 

 

import detail from './es6Component.js';

console.log(detail('박춘배', 54));

 

 es6.js에서 import 

import할때는 확장자 꼭 적어주기

 

 

 

 

 

 

 

 

 

Promise

const myPromise = () => {
    return new Promise((resolve, reject) => {
        resolve(`Promise 실행 성공`);
    })
}
console.log(myPromise());

fetch

const url = 'https://h-owo-ld.tistory.com/';
const getData = (url) => {
    return fetch(url);
}
getData(url).then(data => data.json()).then(result => console.log(result));

참고:
- https://velog.io/@kimhscom/JavaScript-%EC%9E%90%EC%A3%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-ES6-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC