[Tech] ES6에서 생긴 변화 & Ajax

ES6에서 생긴 큰 변화들

ES6란?!

• ECMA Sciprt 6
• ES2015라고도 불림
• 2015년에 도입된 자바스크립트 표준안
• 가장 큰 변화가 일어난 ES 버전

---

변화 1. const & let

• 기존의 var 키워드가 가지는 한계를 보완한 변수 키워드 등장
• 블록 스코프를 가지는 키워드
• 공통적으로, 재선언 불가
• const는 재할당 불가 / let은 재할당(변경) 가능

---

변화 2. 화살표 함수(Arrow functions)

• 기존의 function 키워드를 사용한 방법보다 간결한 방식.

  function func(num) {
   return num * 2;
  };
  
  const func = (num) => {
   return num * 2;
  };
  
  const func = (num) => num * 2;
  

• 하지만, this가 가리키는 곳이 다르므로, 구분되어 사용해야함.
• 내장 함수(map, filter, reduce…)과 함께 사용할 때도 간결함.

  const arr = [25, 26, 27];
  
  const chg1 = arr.map(function(v) {
   return v * 2;
  });
  
  const chg2 = arr.map((v) => v * 2);
  

---

변화 3. 심화된 반복문

• for … in: 객체를 반복 / 키를 기준으로 반복
  (배열 사용 X)

  for (let 키변수 in 객체) { … }

• for … of: 배열, 문자열을 반복
  (객체 사용 X)

  for (let 값변수 of 배열) { … }

---

변화 4. 클래스 문법

• 객체지향 프로그래밍을 위한 핵심 문법
• class 키워드를 사용하여 생성.
• constructor()로 생성자 정의.
• new 키워드로 생성자를 토대로 인스턴스 객체 생성.
• this 키워드로 생성된 인스턴스 객체를 가리킴.
• extends 키워드로 다른 클래스 상속 가능.

  class myClass {
   constructor(name, age) {
      this.name = name;
      this.age = age;
   } // 생성자 정의
  }
  
  const me = new myClass('재건', 26);  // 인스턴스 객체 생성
  console.log(me.name) // '재건' 출력
  

---

변화 5. Promise 문법

• 비동기 데이터를 처리하기 위한 문법
• 비동기 작업의 성공 or 실패를 나타내는 정보를 가지는 객체

  const promise = new Promise((resolve, reject) => {
   const success = true;
  
   if (success) {
      resolve('실행 성공')
   } else {
      reject('실행 실패!')
   }
  })
  

---

변화 6. 템플릿 리터럴(Template Literals) $

• 문자열에 변수 연결을 용이하게 만듦.

  • ES6 이전

    function func(name, age) {
      return name + '(이)는 ' + age + '세';
    }
    console.log(func('재건', 26));   // 재건(이)는 26세
    

  • ES6 탄생

    const func = (name, age) => { 
      return `${name}(이)는 ${age}세`
    }
    console.log(func('재건', 26));   // 재건(이)는 26세
    

---

변화 7. 기본 매개 변수(Default parameters)

• 함수 매개변수에 기본 값을 설정할 수 있음!

  const func = (name = '재건', age = 26) => {
   return `${name}(이)는 ${age}세`
  }
  console.log(func());             // 재건(이)는 26세
  console.log(func('진영', 27));   // 진영(이)는 27세  
  

---

변화 8. Spread & Rest 문법

• Spread: 반복되는(iterable) 데이터 객체를 전개하여 여러 개의 요소로 펼침.
• Rest: 여러 개의 요소를 하나의 배열로 만들어 반환.
• 공통으로, ... 연산자 사용
  Spread/Rest 문법 정리

---

변화 9. 구조 분해 할당

• 비구조화 할당이라고도 불림.
• 객체 또는 배열의 값을 추출해서 새 변수에 쉽게 할당 가능
  구조 분해 할당 정리

---

변화 10. import & export 용법

• import로 가져오기 가능
• export로 내보내기 가능

  // sub.js
  export default function exFunc(val) {
   return val * 2;
  }
  

  // main.js
  import exFunc from './sub';
  
  conosle.log(exFunc(50)); // 100
  

---

Ajax란?!

• Asynchronous Javascript And XML
• 자바스크립트에서 비동기 방식으로 데이터를 송수신할 수 있는 통신 기능.
• 필요한 데이터만 가져와서 사용자 경험을 향상 시키는 방법.

---

Ajax 구현 방법

1. XMLHttpRequest 객체
   전통적인 방식, 비동기 통신을 위한 객체를 만들어서 요청을 보냄.

   const httpReq = new XMLHttpRequest();
   httpReq.open('GET', 'https://jsonplaceholder.typicode.com/todos');
   httpReq.send();
   

2. JSON의 Fecth API
   기존 방식보다 더 간결하고 가독성이 좋은 자바스크립트 문법.

   fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => {
         if (!res.ok) throw new Error();
         return res.json();
      })
   

3. JQuery와 같은 라이브러리 사용
   라이브러리를 사용하여, 더 쉽게 Ajax 작성 가능.

---

✨ 출처

프론트엔드 기술 면접 질문
Blog, [JavaScript] 자주 사용하는 ES6 문법 정리

---