ES5/ES6 문법 차이

ES6가 제공하는 일부 새로운 기능 

 

let 및 const 선언자

• var선언자 대신 let 및 const 선언자를 사용할 수 있다.

1. var는 함수 내에서 선언된 변수가 함수 외부에서도 접근 가능하다. 
	이를 호이스팅이라고 부른다.
    
2. var는 블록 스코프를 지원하지 않는다. 
	if문이나 for문과 같은 블록 내에서 선언된 변수가 블록 외부에서도 접근이 가능하다.
    
3. var는 중복 선언이 가능하다. 이는 코드의 복잡도를 증가시키고, 얘기치 않은 결과를 초래할 수 있다.

    var a = 1
    var a = 2

---

화살표 함수 

function키워드 없이 함수를 만들 수 있으며, return키워드 없이, 식을 계산한 값이 자동으로 반환된다.

 

es5 =>

function myfunc(name){
	return "TokTokHan" + name;
}

es6 =>

const myFunc = (name) => `TokTokHan ${name}`;

화살표 함수의 제한사항 

1. 다만 화살표 함수로 사용할 경우 this나 super에 대한 바인딩이 없고, methods로 사용될 수 없다.

2. new.target 키워드가 없다.

3. 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없다.

4. 생성자로 사용할 수 없다.

 

단점이 있지만 화살표 함수는 코드의 줄 수를 줄이면서 직관적인 프로그래밍을 할 수 있다.

 

---

향상된 객체 리터럴

 

객체 리터럴(Enhanced Object Literals)은 객체를 생성하는 방법을 간소화하고 코드 가독성을 높여준다

1. 축약된 속성명
    향상된 객체 리터럴에서는 객체의 속성명과 변수명이 같을 경우, 속성명을 생략할 수 있어 코드 가독성을 높일 수 있다.

// 기존 객체 리터럴
const name = 'John';
const age = 30;
const person = {
  name: name,
  age: age,
};

// 향상된 객체 리터럴
const name = 'John';
const age = 30;
const person = {
  name,
  age,
};

2. 동적 속성명

    속성명을 동적으로 생성할 수 있고, 속성명을 변수에 저장하여 동적으로 객체를 생성할 수 있다.

const dynamicKey = 'name';
const person = {
  [dynamicKey]: 'John',
  age: 30,
};

3. 메서드 축약 표현

    객체 리터럴에서 메서드를 정의할 때, function 키워드를 생략할 수 있다.

// 기존 객체 리터럴
const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

// 향상된 객체 리터럴
const person = {
  name: 'John',
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
};

---

모듈

 

모듈은 파일 단위로 코드를 구성하고, 필요한 기능만 골라서 가져와 사용할 수 있게 해준다.

파일 내에서 export와 import 구문을 사용하여 모듈 간의 의존성을 선언한다.

export 구문은 모듈에서 외부로 공개할 함수, 클래스, 변수 등을 선언합니다. import 구문은 다른 모듈에서 공개된 함수, 클래스, 변수 등을 가져와서 사용할 수 있게 해준다.

 

모듈은 전역 스코프를 사용하지 않기 때문에, 변수의 충돌이나 오염이 발생할 가능성이 적다.

이는 모듈의 의존성이 미리 파악되기 때문에, 불필요한 코드를 로드하지 않고 최적화된 코드를 사용할 수 있게 한다.

 

모듈을 사용하면 코드의 구성성과 재사용성이 높아지며, 코드 유지보수가 용이해진다.

 

---

템플릿 리터럴

 

기존의 문자열 표기법과 달리 역따옴표(``)를 사용하며, 변수나 표현식을 쉽게 삽입할 수 있다.

템플릿 리터럴을 사용하면 문자열 안에서 ${}으로 변수나 표현식을 감싸고, 이를 평가하여 문자열에 삽입할 수 있다. 

문자열을 동적으로 생성 할 수 있고 가독성도 향상된다.

const name = 'John';
const age = 25;
console.log(`My name is ${name} and I'm ${age} years old.`); 
// "My name is John and I'm 25 years old."

템플릿 리터럴은 다중 행 문자열(multi-line strings)도 지원한다.

기존의 문자열에서는 줄바꿈을 위해서는 \n을 사용해야 했지만, 템플릿 리터럴에서는 엔터키만 입력하면 자동으로 줄바꿈이 된다.

const message = `
  Hello,
  World!
`;
console.log(message);
// 출력 결과:
// "Hello,
//   World!"

---

for...of 루프

 

배열, 문자열, Map, Set 등의 iterable 객체를 순회할 때 사용한다.

기존의 for...in 루프는 객체의 속성을 열거할 때 사용하며, 배열이나 문자열의 경우에는 인덱스를 순회했다.

하지만 for...of 루프는 배열이나 문자열, Map, Set 등의 iterable 객체의 값을 직접 순회할 수 있다.

반복문 내에서 직접 값을 조작할 수 있으며 코드의 가독성도 향상된다.

const arr = [1, 2, 3, 4, 5];
for (const num of arr) {
  console.log(num);
}
// 출력 결과:
// 1
// 2
// 3
// 4
// 5

const str = 'Hello, World!';
for (const char of str) {
  console.log(char);
}
// 출력 결과:
// H
// e
// l
// l
// o
// ,
//  
// W
// o
// r
// l
// d
// !

---

Promise

 

Promise는 비동기적인 작업이 완료되었을 때 결과 값을 반환하거나, 작업 중 발생한 에러를 처리하는 데 사용된다.

 

• 대기(pending): Promise 객체가 생성되어 아직 처리가 완료되지 않은 상태
• 이행(fulfilled): Promise 객체의 처리가 완료되어 결과 값을 반환한 상태
• 거부(rejected): Promise 객체의 처리 중 에러가 발생하여 에러를 처리한 상태

Promise는 new Promise()로 생성하며, 생성자 함수의 인자로는 resolve와 reject 함수가 있다.

resolce함수는 Promise객체의 처리가 성공적으로 환료되었을때 호출된다.

reject함수는 promise 객체의 처리 중 에러가 발생했을 때 호출된다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업
  const result = doSomething();
  if (result) {
    resolve(result); // 처리 완료
  } else {
    reject(new Error('에러 발생')); // 에러 처리
  }
});

promise.then((result) => {
  console.log(result); // 성공적으로 처리된 결과 값 출력
}).catch((error) => {
  console.error(error); // 에러 처리
});

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

fetch() 함수를 사용하여 비동기적으로 데이터를 가져오는 작업을 수행하고 있다.

이때 Promise 객체를 사용하여 비동기 작업을 수행하며, then() 메소드와 catch() 메소드를 사용하여

Promise 객체의 처리 결과를 반환하고, 에러를 처리한다.

 

---

ES6의 단점 

1. 브라우저 호환성 : 모든 브라우저에서 지원되지 않으며, 일부 브라우저에서는 새로운 기능을 지원하지 않을 수 있어

                               브라우저 호환성을 고려해야한다.

2. 성능 : 일부 새로운 기능은 성능에 영향을 미칠 수 있다. 

              예를 들어, 화살표 함수는 함수의 선언이 아닌 호출 시점에 함수를 생성하기 떄문에 성능 저하의 원인이 될 수 있다.

 

 

난 이제 공부를 시작하다보니 ES6문법으로 공부중인데 위에 적어놓지 않은 단점 중 기존 개발자들의 추가 공부라던가, 변환 및 번들링 과정에 있어서는 단점이 될 수 있을거라도고 생각이 들었다. 

이번주에는 주로 ES6문법과 공부와 알고리즘을 풀었는데 메모리라던가 처음듣는 용어들의 이론공부는 정말이고 너무 힘들었다.