WIL 230410_Node.js : JavaScript의 ES란?, ES5/ES6 문법 차이
✅이번 WIL의 키워드
-Node.js : JavaScript의 ES란?, ES5/ES6 문법 차이
✍JavaScript의 ES란?, ES5/ES6 문법 차이
1. ES 란?
ES란 ECMAScript의 줄임말로써, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 의미한다. 쉽게 말하면 자바스크립트(JavaScript)를 표준화하기 위해 만들어졌다고도 볼 수 있다.
2. ES6 란?
ES6란 말 그대로 ES의 6번째 버전을 의미한다. 이는 2015년 6월에 개정된 버전이며, 현재 가장 최신 버전으로는 ES10까지 개정되었다. ES6 이전까지는 불규칙적으로 개정되다가, ES6를 기점으로 이후 매년 6월마다 규칙적으로 개정이 되고 있기 때문에 매년 새로운 ES 버전으로 개정되고 있다.
3. ES5,6의 차이?
ES6에서 변화된 기능은 대표적으로 아래와 같다.
-변수선언: ES5의 var 호이스팅 문제를 해결하기 위해 let, const가 추가
| 재 선언 |
재 할당 |
Block scope |
Function scope |
| var |
O |
O |
외부에서 내부 참조 가능 |
외부에서 내부 참조 불가 |
| let |
X |
O |
외부에서 내부 참조 불가 |
외부에서 내부 참조 불가 |
| const |
X |
X |
외부에서 내부 참조 불가 |
외부에서 내부 참조 불가 |
-화살표 함수 (Arrow function) : function이나 return 키워드 없이 함수를 만드는 방법, function은 호출을 할 때 this가 정해지지만 화살표 함수는 선언할 때 this 가 정해진다.
a. 함수 인자와 반환 값이 모두 있는 경우
//ES5
var multiply = function (x, y) {
return x * y;
};
//ES6
const multiply = (x, y) => x * y;
b. 인자가 하나뿐인 경우, 괄호 생략 가능
// ES5
var square = function(x) {
return x * x;
}
// ES6
const square = x => x * x;
c. 함수 몸체가 여러 줄 이라면 중괄호를 사용해야 한다.
// ES5
var sum = function(x, y) {
var result = x + y;
return result;
}
// ES6
const sum = (x, y) => {
let result = x + y;
return result;
}
d. 함수가 객체를 반환하는 경우, 소괄호로 객체 리터럴을 감싸야 한다.
// ES5
var createPerson = function(name, age) {
return {
name: name,
age: age
};
}
// ES6
const createPerson = (name, age) => ({ name: name, age: age });
-삼항연산자 (ternary operator)
condition ? expr1 : expr2
console.log(true ? "참" : "거짓") // 참
console.log(false ? "참" : "거짓") // 거짓
-구조 분해 할당 (Destructuring) : 배열[]이나 객체{}의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법
& 전개구문 (Speard)
a. 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"
let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3
// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
let [a,b,c,d] = arr
console.log(d) // undefined
let [a,b,c,d = 4] = arr
console.log(d) // 4
b. 객체의 경우
let user = {name: "nbc", age: 30};
let {name, age} = user;
// let name = user.name;
// let age = user.age;
console.log(name, age) // nbc 30
// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30
let {name, age, birthDay} = user;
console.log(birthDay) // undefined
let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today
-전개 구문 (Spread)
// 배열
let arr = [1,2,3];
let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]
// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}
user2.name = "nbc2"
console.log(user.name) // nbc
console.log(user2.name) // nbc2
-단축 속성명: 객체의 key와 value 값이 같다면, 생략 가능
const name = "nbc"
const age = "30"
const obj = {
name,
age: newAge
}
const obj = {
name,
age
}
-템플릿 리터럴 (``): 백틱으로 문자열을 감싸 표현하는 기능, 플레이스 홀더 ${variable}을 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다.
var name = "수정";
var age = 34;
console.log(`저의 이름은 ${name}이고, 나이는 ${age}살 입니다.`);
-Default Parameter: 함수의 매개변수를 기본값(Default Parameter)으로 초기화하는 기능, 함수를 호출할 때 인자를 전달하지 않아도 기본값이 설정되어 함수가 실행될 수 있게 해준다. name이라는 매개변수에 '='기호와 함께 기본값을 지정해준 것으로 간단한 예시를 들었다.
function greet(name = 'Unknown') {
console.log(`Hello, ${name}!`);
}
greet(); // "Hello, Unknown!"
greet('John'); // "Hello, John!"
-나머지 매개변수 (rest parameter)
function func (a, b, ...args) {
console.log(...args)
}
func(1, 2, 3) // 3
func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7
-named export vs default export
a. default Export
// name.js
const Name = () => {
}
export default Name
// other file
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"
a. named export
// 하나의 파일에서 여러 변수/클래스 등을 export 하는 것이 가능
export const Name1 = () => {
}
export const Name2 = () => {
}
// other file
import {Name1, Name2} from "name.js"
import {newName} from "name.js" // x
// 다른 이름으로 바꾸려면 as 사용
import {Name1 as newName, Name2} from "name.js"
// default export 처럼 가져오려면 * 사용
import * as NameModule from "name.js"
console.log(NameModule.Name1)
✍회고 및 추후 학습계획
지나간 주 내내 JS기초를 다지는 강의를 들었고 내용은 크게 나누면 아래와 같다.
1. JS소개, 기초문법(for문, break continue etc.)
2. ES 문법 소개 및 실습, 일급 객체로서의 함수, Map 소개 및 예시, Set 소개 및 예시
3. 데이터 타입의 종류 및 메모리, 변수 선언과 데이터 할당, 호이스팅, this 문법, call apply bind 응용
4. 콜백함수의 기본 개념과 this 바인딩
태어나서 처음 접한 개념이므로 아직까진 완벽히 상관관계를 이해하진 못했고,
따라서 ES6에서 추가된 기능들중 몇가지는 아직도 이해가 되지 않고 있다.
함수 값 입력시 반환될 결과를 예상하는 것도 서툴지만 기본적으로 JS가 어떤 함수식으로 운영 되는지 알았다.
데이터 타입~콜백함수는 다시 한 번 듣고 실습을 통해 눈과 손에 익힐 예정이다.
ES6에서 사용자를 위해 개선된 편리한 전체적인 기능들을 파악 후 모두 실습할 예정이다.
