-
Javascript ES6 문법 정리JS & TS 2023. 9. 11. 13:53728x90
Frontend 개발자나 NodeJS개발자라면 필수인 javascript의 대격변이라고 생각하는 ES6부터 시작해 시리즈로 정리하는 글을 작성해보려고 합니다.
ES6에서 추가된 주요 기능과 문법은 다음과 같습니다.
- Class(클래스)
- Arrow Function(화살표 함수)
- 배열 축약
- Rest Parameter and Spread Operator
- Template Literal
- For... of 반복문
- Destructuring Assignment(구조 분해 할당)
- const and let 키워드
- Default Parameter
- Promise
1. Class(클래스)
클래스 문법을 사용하면 객체 지향 프로그래밍을 더 쉽게 구현할 수 있습니다.
class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`안녕하세요, ${this.name}입니다.`); } } const person = new Person("홍길동", 20); person.sayHello(); // 안녕하세요, 홍길동입니다.
2. 화살표 함수
화살표 함수는 함수를 더 간결하고 읽기 쉽게 작성할 수 있습니다.
const add = (a, b) => a + b; console.log(add(1, 2)); // 3
3. 배열 축약
배열 축약 문법을 사용하면 배열을 더 간결하게 작성할 수 있습니다.
const numbers = [1, 2, 3, 4, 5]; // 기존 방법 const evenNumbers = []; for (let i = 0; i < numbers.length; i++) { if (numbers[i] % 2 === 0) { evenNumbers.push(numbers[i]); } } // ES6 방법 const evenNumbers = [number for (number of numbers) if (number % 2 === 0)];
4. Rest Parameter and Spread operator
Rest Parameter와 Spread operator은 비슷한데 Spread operator은 배열이나 객체의 값을 다른 배열이나 객체에 복사할 때 사용하고 Rest Parameter는 함수에서 사용한다고 생각하면 간단합니다.
// Rest Parameter function test(a, b, ...rest){ console.log(a, b) // 1, 2 console.log(rest) // [3, 4, 5] } test(1, 2, 3, 4, 5) // Spread operator const numbers = [1, 2, 3]; const newNumbers = [...numbers]; console.log(newNumbers); // [1, 2, 3] const objects = [{ name: '홍길동' }, { name: '김길동' }]; const newObjects = { ...objects }; console.log(newObjects); // { name: '홍길동', name: '김길동' }
5. Template Literal
Template Literal을 사용하면 문자열과 변수를 결합하여 템플릿을 더 쉽게 작성할 수 있습니다.
const name = "홍길동"; const age = 20; // 기존 방법 const message = "안녕하세요, " + name + "입니다. 나이는 " + age + "살입니다."; // ES6 방법 const message = `안녕하세요, ${name}입니다. 나이는 ${age}살입니다.`;
6. For... of 반복문
for... of 반복문은 배열, 객체, iterable 객체를 반복할 때 사용할 수 있습니다.
const numbers = [1, 2, 3, 4, 5]; // 기존 방법 for (let i = 0; i < numbers.length; i++) { console.log(numbers[i]); } // ES6 방법 for (const number of numbers) { console.log(number); }
7. Destructuring Assignment(구조 분해 할당)
구조분해 할당은 배열이나 객체의 요소를 할당할 때 편리하게 사용할 수 있는 할당 연산자입니다.
const person = { name: 'John Doe', age: 30, }; // 기존 방법 console.log(person.name, person.age); // ES6 방법 const { name, age } = person; console.log(name, age); // John Doe 30
8. const and let 키워드
const 키워드를 사용하면 변수의 값을 변경할 수 없도록 할 수 있고, let 키워드를 사용하면 블록 스코프의 변수를 선언할 수 있습니다.
const name = "홍길동"; // name의 값을 변경할 수 없습니다. // name = "이순신"; // Error { let name = "김길동"; console.log(name); // 김길동 name = "홍길동"; // name은 블록 내부에서만 사용할 수 있습니다. console.log(name); // 홍길동 } // name은 블록 외부에서 사용할 수 없습니다. // console.log(name); // Error
9. Default Parameter
ES6 이전에는 함수의 매개변수에 기본값을 지정할 수 없었습니다. 따라서 함수를 호출할 때 모든 매개변수에 값을 전달해야 했습니다.
// 기존 코드 function greet(name) { if (name === undefined) { name = "World"; } console.log(`Hello, ${name}!`); } greet(); // Hello, World! greet("John Doe"); // Hello, John Doe! // ES6 function greet(name = "World") { console.log(`Hello, ${name}!`); } greet(); // Hello, World! greet("John Doe"); // Hello, John Doe!
10. Promise
Promise는 비동기 작업을 보기 편한 코드로 처리할 수 있는 기능입니다.
// 기존 방법 function getPage(url) { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.onload = function() { if (xhr.status === 200) { // 응답을 처리하는 코드 } else { // 에러 처리 코드 } }; xhr.send(); } getPage("https://example.com"); // ES6 const getPage = (url) => { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.onload = function() { if (xhr.status === 200) { resolve(xhr.response); } else { reject(new Error(xhr.statusText)); } }; xhr.send(); }); }; const response = getPage("https://example.com"); response.then((data) => { // 응답을 처리하는 코드 }, (error) => { // 에러 처리 코드 });
'JS & TS' 카테고리의 다른 글
Javascript ES11 문법정리 (2) 2023.11.24 Javascript ES10 문법정리 (2) 2023.11.08 Javascript ES9 문법정리 (2) 2023.10.16 Javascript ES8 문법정리 (0) 2023.10.06 Javascript ES7 문법정리 (0) 2023.09.28