[JS] ES6문법이란? 자바스크립트 ES6문법에대해 ARABOZA.

Dtrip·2022년 5월 29일

ES6는 ECMAScript 6의 줄임말이며 ECMAScript 표준의 가장 많이사용하는 버전이다

ES6의 대표적인 특징에 대해 간략히 소개하겠다.

const and let

Arrow functions(화살표 함수)

Template Literals(템플릿 리터럴)

Default parameters(기본 매개 변수)

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

Import and export(가져오기 및 내보내기)

Promises(프로미스)

Rest parameter and Spread operator(나머지 매개 변수 및 확산 연산자)

Classes(클래스)

const and let

const는 변수 선언을 위한 ES6의 새로운 키워드입니다. const는 var보다 강력하고 일단 사용되면 변수를 다시 할당할 수 없습니다. 즉, 객체와 함께 사용할 때를 제외하고는 변경 불가능한 변수 입니다.

이 기능은 선택자를 대상으로 하는 데 매우 유용합니다. 예를 들어 이벤트를 실행하는 단일 단추가 있거나 JavaScript에서 HTML 요소를 선택하려면 var 대신 const를 사용하십시오. 이것은 var가 '호이스팅(hoisting)'이기 때문입니다. 변수를 재할당하지 않으려면 항상 상수를 사용하는 것이 좋습니다.

Arrow functions(화살표 함수)

화살표 함수는 정말 멋지고, 코드를 더 읽기 쉽고, 더 체계적이고, 최신 코드처럼 보이게 합니다.

이 방법을 사용하는 대신:

// ES5
function myFunc(name) {
	return '안녕' + name;
}

console.log(myFunc('영희'));

// 출력 => 안녕 영희

다음을 사용합니다.

// ES6 화살표 함수
const myFunc = (name) => {
	return `안녕 ${name}`;
}

console.log(myFunc('영희')); // 출력 => 안녕 영희

// 또는 화살표를 사용하거나 'return' 키워드를 사용하지 않아도 됩니다
const myFunc = (name) => `안녕 ${name}`;

console.log(myFunc('영희')); // 출력 => 안녕 영희

Template Literals(템플릿 리터럴)

템플릿 리터럴 또는 템플릿 문자열은 꽤 멋집니다. 문자열을 연결하기 위해 더하기(+) 연산자를 사용할 필요는 없으며, 백틱(`)을 사용하여 문자열 내에서 변수를 사용할 수도 있습니다.

// ES6
const myFunc = (name, age) => {
	return `안녕 ${name}, 너의 나이는 ${age}살 이다!`; 
};

console.log(myFunc1('영희', 22));
// 출력 => 안녕 영희, 너의 나이는 22살 이다!

Default parameters(기본 매개 변수)

매개 변수를 쓰지 않은 경우 매개 변수가 이미 기본값에 정의되어 있으므로 정의되지 않은 오류가 반환되지 않습니다. 따라서 누락된 매개 변수를 사용하여 함수를 실행할 때 기본 매개 변수 t 값을 사용하고 오류를 반환하지 않습니다!

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

비구조화를 통해 배열 또는 객체의 값을 새 변수에 더 쉽게 할당할 수 있습니다.

// ES6 문법
const contacts = {
	famillyName: '이',
	name: '영희',
	age: 22
};

let { famillyName, name, age } = contacts;

console.log(famillyName);
console.log(name);
console.log(age);
// 출력
// 이
// 영희
// 22

Import and export(가져오기 및 내보내기)

JavaScript 응용프로그램에서 import 및 export를 사용하면 성능이 향상됩니다. 이를 통해 별도의 재사용 가능한 구성요소를 작성할 수 있습니다.

JavaScript MVC 프레임워크에 익숙한 경우, 대부분의 경우 import 및 export를 사용하여 구성요소를 처리합니다. 그렇다면 실제로 어떻게 작동할까요?

간단합니다! export를 사용하면 다른 JavaScript 구성 요소에 사용할 모듈을 내보낼 수 있습니다. 우리는 그 모듈을 우리의 컴포넌트에 사용하기 위해 가져오기 import를 사용합니다.

내보내기

// ES6
export default function detail(name, age) {
	return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
}

가져오기

import detail from './detailComponent';

console.log(detail('영희', 20));
// 출력 => 안녕 영희, 너의 나이는 20살 이다!

Promises(프로미스)

Promise는 ES6의 새로운 특징입니다. 비동기 코드를 쓰는 방법입니다. 예를 들어 API에서 데이터를 가져오거나 실행하는데 시간이 걸리는 함수를 가지고 있을 때 사용할 수 있습니다. Promise는 문제를 더 쉽게 해결할 수 있으므로 첫 번째 Promise를 만들어 봅시다!

const myPromise = () => {
	return new Promise((resolve, reject) => {
		resolve('안녕하세요 Promise가 성공적으로 실행했습니다');
	});
};

cosole.log(myPromise());
// Promise {<resolved>: "안녕하세요 Promise가 성공적으로 실행했습니다"}

콘솔을 기록하면 Promise가 반환됩니다. 따라서 데이터를 가져온 후 함수를 실행하려면 Promise를 사용합니다. Promise는 두 개의 매개 변수를 사용하며 resolve및 reject 예상 오류를 처리 할 수 있습니다.

참고 : fetch 함수는 Promise 자체를 반환합니다!

const url = 'https://jsonplaceholder.typicode.com/posts';
const getData = (url) => {
	return fetch(url);
};

getData(url).then(data => data.json()).then(result => console.log(result));