[Javascript] ES5 vs ES6

ECMA Script(ES)

Javascript의 표준 규격

 

• 자바스크립트의 첫 등장 : 1990년대 Netscape회사에서 Brendan Eich라는 사람에 의해 최초 개발
  • Javascript가 잘 되자 MS에서는 Jscript라는 언어를 개발해 IE에 탑재하였으나, 두 스크립트의 형식 등이 너무 제각각이라 크로스 브라우징을 하는 데 문제가 생겼다.
  • 따라서 표준을 마련하는 것이 필요하여 ECMA(European Computer Manufactures Association)라는 정보와 통신시스템의 비영리 표준 기구에 제출하여 표준에 대한 작업을 ECMA-262란 이름으로 1996년 11월에 시작해 1997년 6월에 채택되었다.
• ES는 최초로 표준이 정의된 이후로 지속적으로 발전하였고, 현재는 ES6까지 발전하였다.

---

ES5 vs ES6

1. let, const 키워드 추가

• ES5
  • ES5까지에서 변수는 함수 scope를 가진 var 키워드를 활용해 선언하였다.
  • 특히, 상수를 선언할 때도 var 키워드만 지원하기 때문에, 변수명을 대문자로 해서 표기하였다.
  • var로 인해 재할당과 재선언이 굉장히 자유롭다는 특징이 있다.

var a = 123;
var CONST = "Javascript";

• ES6
  • var로 인해 *호이스팅 문제가 발생하는 것을 방지하기 위해 let, const가 등장하였다.
  • let : 한 번 선언된 변수의 이름과 동일한 이름으로 선언 불가 / 값은 재할당 가능
  • const : 재선언 불가 / 재할당 불가

var a = 123;
let b = "hello";
const c = "Javascript";

 

2. Arrow function 추가

• ES5

function sum(a,b) {
	return a+b;
}

• ES6
  • 화살표 함수(Arrow function)로 함수를 간결하게 나타낼 수 있다.
  • 덕분에 코드의 가독성, 유지보수성이 늘어났다.
  • 화살표 함수를 사용할때 매개변수가 하나이면 괄호가 생략 가능하고, {}, () 및 return 키워드도 생략 가능하다.

// 명시적으로 return문도 생략 가능
let sum = (a, b) => {a+b}
// 중괄호 생략 가능
let sum = (a, b) => a+b;
// 매개변수가 하나일 때 괄호 생략
const square = x => x * x;

 

2. Template Literal 추가

• ES5

function sum(a,b) {
	return a+b;
}

• ES6
  • backtick으로 문자열을 감싸서 표현할 수 있다.
  • ${} 구문을 통해 변수나 표현식을 삽입할 수 있다.

변수 삽입 용이

// 1. 변수 삽입
const name = "John";
const greeting = `Hello, ${name}!`; // 백틱 사용

 

여러 줄 문자열

- 템플릿 리터럴을 사용하면 여러 줄에 걸친 문자열을 쉽게 작성할 수 있다.

- 이전에는 줄바꿈을 위해 이스케이프 시퀀스(\n)를 사용했지만, 템플릿 리터럴에서는 줄바꿈을 그대로 사용할 수 있다.

// 2. 여러 줄 문자열(Multi-line Strings)
const address = `123 Main St.
Springfield, IL
USA`;

 

표현식 사용

- 

변수 뿐만 아니라 연산, 함수 표현 결과 등 다양한 결과를 포함할 수 있다.

// 3. Expression(표현식) 사용
const x = 10;
const y = 20;
const sum = `The sum of ${x} and ${y} is ${x + y}.`;

 

특수 문자 처리 표현 용이

- Escape Sequence 등을 사용하지 않고도 backslash와 같은 다른 특수문자를 신경쓰지 않고도 활용할 수 있다.

// 4. 특수 문자 처리 용이
const filePath = `C:\Users\Public\Documents`;
console.log(filePath); // 출력: "C:\Users\Public\Documents"

 

태그 함수(Tag Functions)

- 템플릿 리터럴에 태그 함수를 사용하면, 템플릿 리터럴을 입력으로 받아 원하는 방식으로 처리가 가능하다

- 문자열을 커스터마이즈하거나 보안을 강화하는 데 유용할 수 있습니다.

// 5. 태그 함수 사용
function highlight(strings, ...values) {
  return strings[0] + values.map((val, i) => `<strong>${val}</strong>` + strings[i + 1]).join('');
}

const name = "Charlie";
const city = "New York";

const result = highlight`Hello, ${name} from ${city}!`;

console.log(result); // 출력: "Hello, <strong>Charlie</strong> from <strong>New York</strong>!"

 

 

3. Default Parameter

- default parameter : 함수에 전달된 parameter의 값이 undefined이거나 전달된 값이 없을 때, 초기화 설정된 값을 말한다.

• ES5
  • 기존에는 다음과 같이 일일히 수동으로 설정해 주는 불편함이 있었다.

function add(a, b) {
  // b가 undefined인 경우 기본값을 0으로 설정
  b = (typeof b !== 'undefined') ? b : 0;
  return a + b;
}

console.log(add(5)); // 출력: 5
console.log(add(5, 10)); // 출력: 15

• ES6
  • 함수 선언에서 매개변수의 기본값을 간단하게 설정할 수 있다.
  • 다음 예시에서는 b의 기본 파라미터 값을 0으로 두었다.

function add(a, b = 0) {
  return a + b;
}

console.log(add(5)); // 출력: 5
console.log(add(5, 10)); // 출력: 15

 

4. Property Shorthand(단축 속성명)

- 단축 속성명이란, key와 value가 동일하면, 축약해서 생략할 수 있는 방법이다.

• ES5
  • 기존에는 다음과 같이 일일히 수동으로 설정해 주는 불편함이 있었다.

// 기존 객체 코드
const obj = {
  name: name,
  color: color,
  x: x,
  y: y,
};

• ES6
  • 함수 선언에서 매개변수의 기본값을 간단하게 설정할 수 있다.
  • 다음 예시에서는 b의 기본 파라미터 값을 0으로 두었다.

const obj {
    name,
    color,
    x,
    y
}

 

5. Destructuring Assignment(구조 분해 할당)

- 구조 분해 할당은 배열, 객체에서 값(value)이나 속성(property)를 분해해 손쉽게 별도의 변수에 담을 수 있도록 함

• ES5
  • 다음과 같이 배열에서는 index를 활용하고, 객체에서는 프로퍼티명을 활용하였다.

// 배열에서 직접 추출할 수 없으므로 인덱스를 사용
var arr = [1, 2];
var a = arr[0];
var b = arr[1];

console.log(a); // 1
console.log(b); // 2

// 객체에서 직접 추출할 수 없으므로 프로퍼티 이름을 사용
var obj = { name: 'John', age: 30 };
var name = obj.name;
var age = obj.age;

console.log(name); // John
console.log(age);  // 30

• ES6
  • 배열에 대한 구조 분해 할당 (ES6에서 도입된 spread syntax도 사용 가능)
  • 객체에 대한 구조 분해 할당이 다음과 같이 가능하다.

* 배열에 대한 구조 분해 할당

let [a, b] = [10, 20]
console.log(a) // 10 출력
console.log(b) // 20 출력

let array = [1, 2, 3];
let [a, b, c] = array;
console.log(a, b, c); // 1 2 3

 

- 스프레드 연산자(...)를 활용해서 다음과 같이 분해 가능하다.

let array = [1,2,3,4,5];
let [a, b, ...rest] = array;
console.log(rest); // 출력 결과 [3, 4, 5]

 

 

* 객체에 대한 구조 분해 할당

- 객체 내부의 속성값들을 간편하게 분해해서 변수에 저장할 수 있도록 도와준다.

const obj = {
	name: "John",
    age: 18,
    memo: "Hello".
}

const { name, age, memo } = obj;

console.log(name); // "John"
console.log(age); // 18
console.log(memo); // "Hello"

- 속성의 이름을 기준으로 분해되기 때문에 순서가 변경되어도 상관 없다.

const obj = {
	name: "John",
    age: 18,
    memo: "Hello".
}

// 순서 변경해도 무방
const { memo, name, age } = obj;

console.log(name); // "John"
console.log(age); // 18
console.log(memo); // "Hello"

 

- 다음 예시에서는 스프레드 연산자를 활용해 obj 객체 중 name에 프로퍼티 값이 저장되고, 나머지 age와 memo는 ...rest가 받아서 rest 변수에 모아 객체로 저장한다.

const obj = {
  name: "John",
  age: 18,
  memo: "Hello",
};

const { name, ...rest } = obj;
console.log(name); // "John"
console.log(rest); // { age : 18, memo: 'Hello' }

---

출처

- https://developer.mozilla.org/ko/

- https://velog.io/@weffa/JavaScript-ES5%EC%99%80-ES6-%EC%B0%A8%EC%9D%B4

- https://chanhuiseok.github.io/posts/js-10/