JavaScript의 ES란? & ES5, ES6의 차이는 ?

ECMA스크립트란?

ECMA스크립트(ECMAScript, 또는 ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다. 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다. ECMA스크립트는 웹의 클라이언트 사이드 스크립트로 많이 사용되며 Node.js를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있다.

ES5와 ES6에 대한 차이는??

ES5와 ES6의 대표적인 차이점으로 아래 항목들을 들 수 있다.

템플릿 리터럴
화살표 함수
this
변수선언
모듈
클래스

• 탬플릿 리터럴

  ES6부터 새롭게 등장한 템플릿 리터럴. 덕분에 문자열 표현이 훨씬 간단해졌다.
  템플릿 리터럴이란 작은 따옴표나 큰 따옴표 대신 백틱(`)으로 문자열을 감싸 표현하는 기능을 말한다.
  템플릿 리터럴을 사용하면 플레이스 홀더(${variable})를 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다.
  ES5

  console.log("저의 이름은 " + name + "이고, 나이는 " + age + "살 입니다.");

  ES6

  console.log(`저의 이름은 ${name}이고, 나이는 ${age}살 입니다.`);

• 화살표 함수

  ES6부터 새롭게 등장한 화살표 함수로 함수 선언법이 좀 더 간단해졌다.
  ES5
  function str(arg1, arg2) { console.log("용민"); }
  // 생성자 함수(많이 사용하지 않음)
  var str = new Function("arg1", "arg2", "console.log('용민')");
  함수 리터럴(익명 함수를 만들 때 사용)
  var str = function(arg1, arg2) { console.log("용민"); };
  ES6

  var str = (arg1, arg2) => {
    console.log("용민");
  };

  var str = arg1 => console.log(arg1);
  화살표 함수에 인자(argument)가 하나밖에 없다면 괄호를 생략할 수 있다. 또한 한줄로 표현이 가능하다면 위와 같이 중괄호({})를 생략할 수 있다.

  var str = func => ({ id: "31" });

  화살표 함수가 객체를 반환한다면 위와같이 표현해줄 수 있다.

• this의 다른 동작

  ES5
  ES5같은 경우 객체 내에 있는 메소드를 실행 시 this는 메소드가 선언된 해당 객체를 가리킨다.
  하지만 객체 안에서 선언된 함수의 this는 해당 객체가 아닌 window를 바라보고 있기 때문에 함수 안에서 this.name, this.age 를 하여도 아무 값이 나오지 않는다.
  이러한 경우 해결방안으로 innerInfo.call(this) 를 통해 this 를 바인딩 시켜주거나 this를 해당 변수에 담아서 var self = this 와 같은 방식으로 접근하면 사용하면 된다.
  ES6
  ES6에서의 this 는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다.
  화살표 함수를 쓰면 함수가 선언된 스코프에 자동 바인딩이 된다.

• 변수 선언

  ES5
  ES5에선 var 밖에 존재하지 않았다. var 는 변수를 선언할 때 사용되는 키워드로,
  재할당과 재선언에 굉장히 자유롭다.
  ES6
  let, const가 추가되었다.
  let은 한번 선언된 변수에 동일한 이름으로 선언할 수 없다.
  하지만, 값은 재할당 할 수 있다.
  const는 한번 초기화된 변수에 재할당/재선언할 수 없다.
  그리고, let, const는 블록 스코프 또는 Function 스코프 내부에 선언되면 해당 스코프 밖에서 안에 있는 변수를 참조할 수 없다.
  쉽게 설명하자면, 중괄호로 묶인 부분 내부에 선언된 let, const를 중괄호 외부에서 참조할 수 없다는 것이다.
  var는 Function 스코프는 내부에 선언된 var를 외부에서 참조할 수 없지만
  블록 스코프에선 내부에 선언되어 있어도 외부에서 참조 가능하다.

선언방식	재 선언	재 할당	Block scope Function scope
var	O	O	외부에서 내부 참조 가능
let	X	O	외부에서 내부 참조 불가
const	X	X	외부에서 내부 참조 불가

😎 이번주 내가 배운것들

jsx 문법 : useState, props, useEffect
react에서 import, export하며 부모자식간 정보를 주고받는 법
styled components
react의 라이프 사이클
class형과 함수형

🤔 이번주 내가 느낀점

알고리즘 모의고사를 어렵지 않게 풀었지만 실력은 한참 부족하기에 꾸준히 공부할 예정이다. 금요일부터 리액트 입문주차에 들어서며 리액트를 공부하기 시작했다. 노마드코더 강의를 보며 state와 props에 대한 개념을 익힐 수 있었다. 하지만 개인 과제인 todolist를 하면서 map과 filter메소드를 아직 잘 못쓰겠고 가상dom이 뭔지, todo의 속성들을 컴포넌트끼리 어떻게 주고받아야할지 아직 잘 모르겠다. 좀 더 강의를 보고 계속 구글링하며 리액트에 대해 공부를 해야할거 같다.

😭이번주 아쉬웠던 점

일요일아침에 알람을 듣고 바로 일어나지 않고 더 잔것
좀더 노력할수 있음에도 노력하지 않는것
map, filter메소드를 이해하지 못한것
가상dom을 이해하지 못한것