🤔 본문에 앞서, ES6란?
- ES란, ECMAScript의 약자로 자바스크립트의 표준, 규격을 나타내는 용어이다.
- 뒤에 숫자는 버전을 뜻하고
ES5는 2009년,ES6은 2015년에 출시되었다.- ES6을 사용하면, 한결 코드가 간결해지고 생산성이 향상되기 때문에 사용을 권장한다.
1. 변수 선언 방식(var, let, const)
var는 재정의와 재선언 모두 가능하다.let은 가변 변수로 재정의가 가능하지만 재선언은 불가능하다.const는 불변 변수로 재선언과 재정의 모두 불가하다.- 다만,
var는 예기치 못한 값을 반환할 수 있는 등 여러 문제점들이 있어 잘 사용하지 않으며,let과const키워드를 사용하는 것을 권장한다.
// 사용 예시
var kane = 21;
let son = 6;
const bentancur = 5; // const는 처음 선언할 때 반드시 초기화한다
var kane = 18; // var는 재선언 가능
2. 템플릿 리터럴(Template literal)
Template literal은 내장된 표현식을 허용하는 문자열 리터럴이다.- ES6부터 새로 도입된 문자열 표기법으로,
backtick(``)을 사용한다.- 문자열 사이에 변수나 연산을 넣을 때는
${}사이에 표현식을 삽입한다.
// 사용 예시
var name = 'Harry Kane'
var club = 'Tottenham'
alert(`${name} is belong ${club}.`)3. 객체 리터럴
- 이전보다 훨씬 간결한 코드로 객체를 선언할 수 있다.
- 메소드에
콜론(:)이나function을 붙이지 않아도 된다.- 함수명이 겹치는 경우에는 한 번만 쓸 수 있다.
// object literal
var me = {
name : 'Kim',
intro : function() {
console.log(`My name is ${this.name}`);
}
};
console.log(typeof me);
console.log(me);
[실행결과]
object
{ name: 'Kim', intro: [Function: intro] }4. 화살표 함수(Arrow function)
- 함수 표현식을 보다 단순하고 간결하게 작성하는 문법이다.
- 인수가 하나밖에 없다면 괄호를 생략할 수 있다.
- 인수가 하나도 없을 땐 괄호를 비워놓으면 된다. 단, 이 때 괄호는 생략할 수 없다.
- 본문이 한 줄 밖에 없다면 중괄호를 생략할 수 있다.
// 사용 예시
// 기본 함수 형식
let sum = function(a, b) {
return a+b;
};
// 화살표 함수 형식
let sum = (a, b) => a+b;(1) 한 줄로 정의
- 화살표 함수는 한 줄로 간단히 정의할 수 있다.
- 중괄호를 사용하지 않고 바로 오른쪽에 정의하고, return 키워드를 명시적으로 정의하지 않아도 오른쪽에 있는 값이 알아서 return 된다.
// 한 줄로 쓰기
const example1 = (/*Parameter 는 여기에*/) => { return 5; }
const example2 = (a, b) => a+b;
console.log(example1); // 5
console.log(example2(1, 2); // 3(2) 여러 줄로 정의
- 화살표 함수에 여러줄의 코드가 포함되어야 한다면 전체를 중괄호로 묶고 return 키워드를 사용해야 한다.
// 여러 줄로 쓰기
const example3 = (a, b) => {
var result;
if(a > b) result = a-b;
else result = b-a;
return result;
}
console.log(example3(10, 2)) // 85. 구조 분해 할당(Destructuring)
- 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.
- 값을 해체한 후 개별 값을 변수에 새로 할당한다.
- 기존의 방식으로 변수를 사용하려면 이름이 상당히 길어지는 반면, 구조 분해 할당을 하면 훨씬 간결해진다.
// 기존의 방식
const Player = {
name: "Lebron James",
club: "LA Lakers",
address: {
city: "Los Angeles"
}
};
console.log(Player.address.city);// 구조 분해 할당 방식
const {
name,
club,
address: { city }
} = Player;
console.log(city);
console.log(`Hello ${name}!`);6. 모듈 내보내고 가져오기(export & import)
모듈을 내보내는 방법으로는 named export와 default export가 있다.
// named export 기본 형식
export { 모듈명1, 모듈명2 };
import { 모듈명1, 모듈명2 } from 'js 파일 경로';
// default export 기본 형식
export default 모듈명;
import 모듈명 from 'js 파일 경로';name export
- named export는 한 파일에서 여러 개를 export할 때 사용 가능하다.
- export한 이름과 동일한 이름으로 import 해야 하며, 중괄호에 묶어서 import 해야 한다.
- 다른 이름으로 import 하려면 as를 사용하고, 한 파일에 있는 클래스나 변수들을 한번에 import 하려면 * as를 사용한다.
// named export에서 as를 사용하여 다른 이름으로 import
import { named1 as myExport, named2 } from './example.js';
// 한 파일에 있는 모든 클래스나 변수를 * as를 사용하여 한번에 import
import * as Hello from './example.js';default export
- default export는 하나의 파일에서 단 하나의 변수 또는 클래스 등등만 export할 수 있다.
- import할 때 아무 이름으로나 자유롭게 가능하며, 중괄호에 묶지 않아도 된다.
// data.js
export const add = (a, b) => {
return a + b;
};import { add } from "./data";
let result = add(3, 2);
console.log(result); // 5data.js에서 add를 export 했고, index.js에서 add를 import 해 사용했다.
7. 클래스
Class는 객체를 생성하기 위한 템플릿으로, 틀과 같은 역할을 한다. 반드시 정의한 뒤에 사용해야 한다.
- 클래스 선언은
let과const처럼 블록 스코프에 선언되며, 호이스팅이 일어나지 않는다.- 클래스의 메소드 안에서
super키워드를 사용할 수 있다.static키워드를 메소드 이름 앞에 붙여주면 해당 메소드는 정적 메소드가 된다.Getter혹은Setter를 정의하고 싶을 때는 메소드 이름 앞에get또는set을 붙여 주면 된다.extends키워드를 사용하여 클래스에서 다른 클래스로 상속하면서 클래스의 기능을 확장해 나갈 수 있다.
// Animail.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() {
// static은 객체 생성 안 해도 사용 가능
return 10;
}
}
export class Cat extends Animal {
// 클래스 상속 받음
makeNoise(sound = "meow") {
console.log(sound);
}
}// index.js
import { Animal, Cat } from "./animal";
let cat = new Animal("Cat", 4); // Animal 객체 생성
cat.makeNoise("meow"); // 출력 결과 : meow
let cat2 = new Cat("Cat", 4); // Cat 객체 생성
cat2.makeNoise(); //
console.log(Cat.return10());
console.log(cat2.metaData);8. Promise
Promise의 정의와 특징
Promise는 비동기 작업을 처리하기 위한 객체로, 콜백 함수를 사용하는 것보다 코드를 더 깔끔하게 작성할 수 있게 해준다.Promise를 사용하면 비동기 작업의 결과값을 처리하기 위해 콜백 함수를 중첩해서 사용할 필요가 없다. 대신 then() 메서드를 사용하여 이행 상태와 거부 상태를 처리할 수 있다.Promise를 사용하면 코드의 가독성이 증가하고, 비동기 작업을 보다 효율적으로 처리할 수 있다. 하지만 Promise를 사용하는 것이 항상 옳은 선택은 아니다. 프로젝트의 크기와 복잡도에 따라 적절한 방식을 선택하는 것이 중요하다.
Promise의 3가지 상태
대기(pending): 비동기 작업이 아직 수행되지 않은 상태이다.이행(fulfilled): 비동기 작업이 성공적으로 수행되어 결과값을 반환한 상태이다.거부(rejected): 비동기 작업이 실패한 상태이다.
// Promise 객체 생성
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('작업 완료!');
}, 1000);
});위의 코드는 1초 후에 '작업 완료!'라는 문자열을 반환하는 Promise 객체를 생성한다. 이 객체를 사용하여 then() 메서드를 호출하여 작업 완료 후에 처리할 작업을 정의할 수 있다.
promise.then(result => {
console.log(result); // '작업 완료!'
}).catch(error => {
console.error(error);
});then() 메서드는 Promise 객체가 이행 상태가 되었을 때 호출된다. 만약 거부 상태가 되면 catch() 메서드가 호출된다.
9. Fetch
fetch API는 JavaScript에서 제공하는 비동기 통신 방식입니다. fetch API를 사용하면 간단하게 AJAX 요청을 보낼 수 있다.fetch함수를 호출하면Promise객체를 반환한다. 이 Promise 객체를 사용하여 비동기 요청에 대한 응답을 처리할 수 있다.
다음과 같이 fetch 함수를 사용하여 서버로부터 데이터를 가져올 수 있다.
fetch('<https://jsonplaceholder.typicode.com/todos/1>')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
- 위의 코드는 JSONPlaceholder API에서 todo 항목을 가져와 콘솔에 출력하는 코드.
- fetch 함수에는 요청할 URL을 전달하고, then 메서드에서 응답을 처리한다.
10. async, await
async/await는 JavaScript에서 비동기 처리를 위한 문법이다.
async함수를 사용하면 Promise를 반환하는 함수를 간단하게 작성할 수 있다.
예를 들어, 다음과 같이 async 함수를 사용하여 서버로부터 데이터를 가져올 수 있다.
async function getData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}위의 코드는 fetch 함수를 await 키워드와 함께 사용하여 데이터를 가져오고, try-catch 문을 사용하여 오류를 처리한다.
getData()
.then(() => console.log('데이터 가져오기 완료'))
.catch(error => console.error(error));