항해99 | 2주차 WIL회고

👉JavaScript의 ES란?

ES는 ECMA Script로 자바스크립트의 표준 규격을 의미한다.
자바스크립트는 넷스케이프 사에서 개발한 언어인데, 자바스크립트 언어가 인기를 끌기 시작하자 마이크로소프트 사에서도 Jscript라는 언어를 개발하여 IE에 탑재하였다. 

👉JavaScript vs ECMAScript

간혹 JavaScript와 ECMAScript가 똑같다고 오해하는 경우가 있는데요. 둘 사이에는 명확한 차이가 있습니다!

일단 첫 번째 차이점은, JavaScript는 프로그래밍 언어이고, ECMAScript는 프로그래밍 언어의 표준입니다. 쉽게 생각하면 ECMAScript는 JavaScript가 갖추어야 할 내용을 정리해둔 '설명서'이고, JavaScript는 ECMAScript를 준수해서 만들어낸 '결과물' 이라고 생각할 수 있는데요. 참고로 ECMAScript가 JavaScript화 하기 위해 등장하긴 했지만, ECMAScript는 JavaScript 뿐만아니라 모든 스크립트 언어(scripting languages)가 지켜야 하는 표준입니다. 만약 여러분이 자바스크립트와 같은 언어를 직접 만들고자 한다면, 이 ECMAScript를 준수해야 한다는 것이죠!

두 번째 차이점은 JavaScript는 ECMAScript를 기반으로 하지만 ECMAScript에 정의된 내용뿐만 아니라, 다른 부가적인 기능도 있다는 겁니다. 특히, 우리가 자바스크립트로 HTML 코드를 제어하기 위해 사용하는 DOM(Document Object Model)을 다루는 문법들은 ECMAScript에 표준화된 문법이 아니라 WebIDL에서 표준화된 기술이라고 할 수 있습니다.

JavaScript와 ECMAScript의 차이 입니다.

👉ES5/ES6 문법 차이

📌템플릿 리터럴

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

✅ES5

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

✅ES6

var name = "현진";
var age = 25;
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 와 같은 방식으로 접근하면 사용하면 된다.

var thisTest = {
     name : "김현진",   
     age : 25,
     info : function() {
          console.log(this)
          console.log(this.name , this.age)

          function innerInfo() {
              console.log(this)
              return this.name + ":" + this.age
          }
          return innerInfo()
     }
}

// 실행결과 
// {name: "김현진", age: 25, info: ƒ}
// 김현진 25
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
// ":undefined"

✅ES6

ES6에서의 this 는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다.

let thisTest = {
     name : "김현진",   
     age : 25,
     info() {
          console.log(this)
          console.log(this.name , this.age)

          innerInfo = () => {
              console.log(this)
              return this.name + ":" + this.age
          }
          return innerInfo()
     }
}

// 실행결과
// {name: "김현진", age: 25, info: ƒ}
// 김현진 25
// {name: "김현진", age: 25, info: ƒ}
// "김현진:25"

생성자 함수의 인스턴스의 경우, this는 인스턴스를 가리킨다.

function Obj(value) {
  this.value = value;
}
var obj = new Obj(0);
console.log(obj.value); // 0

화살표 함수를 쓰면 함수가 선언된 스코프에 자동 바인딩이 된다.

var obj = {
  value: 10,

  // 메소드 호출
  show: function () {
    console.log(this.value); // 10

    // 함수 호출
    function show_01 () {
      console.log(this.value); // undefined
    }
    show_01();

    // 화살표 함수
    function show_02 = () => {
      console.log(this.value); // 10
    }
    show_02();
  }
}
obj.show();

📌클래스

✅ES5

ES5에선 class라는 키워드는 없었지만 프로토타입을 통해 실현 가능했다.

var Add = function(arg1, arg2) {
  this.arg1 = arg1;
  this.arg2 = arg2;
};

Add.prototype.calc = function() {
  return this.arg1 + "+" + this.arg2 + "=" + (this.arg1 + this.arg2);
};

var num = new Add(5, 8);
console.log(num.calc()); // 5 + 8 = 13

✅ES6

ES6에서는 class 키워드를 사용해서 선언할 수 있다.

class Add {
  constructor(arg1, arg2) {
    this.arg1 = arg1;
    this.arg2 = arg2;
  }
  calc() {
    return this.arg1 + "+" + this.arg2 + "=" + (this.arg1 + this.arg2);
  }
}

var num = new Add(5, 8);
console.log(num.calc()); // 5 + 8 = 13

📌클래스 상속

클래스의 상속과 오버라이딩은 super를 사용해서 수행할 수 있다.

✅ES5

var AddSquare = function(arg1, arg2) {
  Add.call(this, arg1, arg2);
};

Object.assign(AddSquare.prototype, Add.prototype);

AddSquare.prototype = {
  calc: function() {
    // 메소드는 생략될 수 없습니다.
    Add.prototype.calc.call(this);
  },
  calcSquare: function() {
    this.pow = Math.pow(this.arg1 + this.arg2, 2);
    return "(" + this.arg1 + "+" + this.arg2 + ")^2=" + this.pow;
  }
};

var numSquare = new AddSquare(5, 8);
console.log(numSquare.calc()); // 5 + 8 = 13
console.log(numSquare.calcSquare()); // (5 + 8) ^ 2 =169

✅ES6

class AddSquare extends Add {
  constructor(arg1, arg2) {
    super(arg1, arg2);
  }
  calc() {
    super.calc();
  }
  calcSquare() {
    this.pow = Math.pow(this.arg1 + this.arg2, 2);
    return "(" + this.arg1 + "+" + this.arg2 + ") ^ 2 =" + this.pow;
  }
}

var numSquare = new AddSquare(5, 8);
console.log(numSquare.calc()); // 5 + 8 = 13
console.log(numSquare.calcSquare()); // (5 + 8) ^ 2 = 169