22.05.22 WIL - ES5 와 ES6의 차이 및 회고록

Seong Hyeon Kim·2022년 5월 22일
ES5ES6WIL
0

항해99

목록 보기
4/16

* ES5와 ES6의 차이

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

템플릿 리터럴

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("용민"); };		

///🚀 참고
여기서 익명 함수란 말 그대로 이름이 없는 함수를 뜻한다.
ex) var bar = function (a, b) {...};
반대로 기명 함수는 이름이 있는 함수이다.
ex) var bar = function funcName(a, b) {...}

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에선 var 밖에 존재하지 않았다. var 는 변수를 선언할 때 사용되는 키워드로,
재할당과 재선언에 굉장히 자유롭다.

var x = 10;
x = 15;
console.log(x); //15
var x = 12;
console.log(x); //12

ES6

ES6부터 let, const가 추가되었다.
let은 한번 선언된 변수에 동일한 이름으로 선언할 수 없다.
하지만, 값은 재할당 할 수 있다.

let x = 10;
x = 15;
console.log(x); //15
let x = 12; // Identifier 'x' has already been declared
  • const는 한번 초기화된 변수에 재할당/재선언할 수 없다.
const x = 10;
console.log(x); // 10;
x = 15; // TypeError: Assignment to constant variable.

그리고, let, const는 블록 스코프 또는 Function 스코프 내부에 선언되면 해당 스코프 밖에서 안에 있는 변수를 참조할 수 없다. 쉽게 설명하자면, 중괄호로 묶인 부분 내부에 선언된 let, const를 중괄호 외부에서 참조할 수 없다는 것이다.
그러나 밖에서 안에 있는 const, let은 참조할 수는 있다.

if (true) {
  var i = 0;
}
console.log(i); // 0
if (true) {
  let j = 10;
}
console.log(j); // ReferenceError
if (true) {
  const k = 100;
}
console.log(k); // ReferenceError
  • var는 Function 스코프는 내부에 선언된 var를 외부에서 참조할 수 없지만 블록 스코프에선 내부에 선언되어 있어도 외부에서 참조 가능하다.
function f() {
  var v = 5;

  console.log(v); // 5
}

console.log(v); // ReferenceError: v is not defined

if (true) { 
    var i = 0;
}

console.log(i); // 0

정리하자면 다음과 같다.

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

클래스

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

* Chapter 2에서 스스로 가장 많이 성장했다고 느낀 부분이 있다면 자유롭게 적어주세요

  • 이번 챕터에서 저는 무려 알고리즘 문제를 스스로 풀게되었다는 부분입니다.
    항해99에 들어오기전에도 알고리즘 문제풀이를 조금씩 해보면 좋다라는 것을 알고는 있었지만, 실제로 풀기에는 너무 어려운 문제들이라는 생각에 미뤄왔었던 부분인데, 이번 주차에 맞닥들이게 되면서 어떻게든 문제를 풀려고 아둥바둥한 끝에 결국 마지막에 와서는 쉬운문제든 어려운 문제든 스스로 풀수 있게되었다는 점이 가장 성장한 부분이 아닐까 하는 생각이 듭니다.

* Chapter 2에서 스스로 더 많이 성장하기 위해, 어떤 노력을 더 할 수 있었을까요?

  • #1 처음 개념잡기를 조금만 더 빨리 했었더라면 문제를 더 많이 풀어보지 않았을까 하는 아쉬움과 문제풀이를 위해 사용된 함수들을 좀더 파고들고 공부하지 않은것이 조금 아까웠습니다.

  • 아무것도 모른채로 문제를 푸는것보다 조금이라도 개념정리를 하고 문제를 푼다면 이후로도 더 잘풀릴꺼라는 팀원의 말을 듣고 우선 개념정리 및 자바스크립트에서 코드를 작성할때 사용하는 방법들 등의 개념이나 원리등을 완벽히는 아니더라도 조금은 알고 문제풀이를 진행해서 그런지 이전보다 훨씬 더 잘풀렸던 느낌은 정말 좋았습니다. 하지만 그 개념정리에 시간을 투자하다보니 스스로 문제풀이를 좀더 많이 못풀어본게 아쉬움이 많이 남았습니다.

  • #2 여러가지 함수 사용법을 좀더 익히지 못한게 아쉬웠습니다.알고리즘 문제를 풀기 위해서 IF문과 For문을 이해하기 위해서 가장 많은 시간을 들였는데요, 우선 if 와 for문을 통해서 내가 푸는법을 익히고 어떻게 푸는지 원리를 이해했기 때문에 다른 함수를 사용해서 푸는 법도 내가 if 문으로 풀었던 것을 조금 변형시켰구나 혹은 비슷한 원리인데 좀더 간결하고 짧게 사용했구나 라고 이해할수 있어서 편했지만,

  • 역시나 시간이 부족한 탓에 그런 함수들을 좀더 익히지 못하고 일단 시험을 대비해서 내가 할수있는 부분들 위주로 공부하다보니 다른 함수들을 알지만 제대로 사용못하는 그런 상황이 된게 조금 아쉬웠습니다.

  • 늘 사용하던 함수만 사용하면 다양한 코드사용을 못하기 때문에 내가 사용해보지 못한 함수들을 좀더 적극적으로 배우고 사용할려는 노력이 있었으면 더 좋았을것 같습니다.

개인 회고록

  • 앞으로 하게 될 항해99의 과정들이 어떤 과정이 있는지 모르겠지만, 적어도 이번 챕터2의 일주일은 내가 개발자가 되기로 마음먹은 이후 가장 힘들었던 고통의 시간이였던 것 같다.

  • 챕터 1은 무엇을 해야될지 몰라서 생기는 답답함과 하고싶은게 있어도 할수 없는 답답함의 연속이였다면, 챕터 2는 내가 이걸 왜 못하지, 내가 왜 이걸 이해를 못하고 있지 라는 또다른 차원의 답답함이 일주일내내 나와 함께하였다.

  • 수영으로 치자면 물속에서 숨쉬는 호흡법도 모르는데 자유형은 어떻게 하는지, 배영은 어떻게 하는지를 찾아보고 있으면서 왜 안될까 하는 짜증과 분노 그리고 모의고사에서 한문제를 2,3시간씩 걸려서 풀고 나오면서 오는 허탈함 때문에 정말 중간중간 하차할까 하는 생각이 몇번이나 들었던 챕터였다.

  • 지나고나니 드는 생각이지만 그래도 견디고 견뎠더니 뭐라도 얻어냈다. 그거 하나로 나름 만족해하며 회차를 마무리하고있다.

  • 1챕터의 허탈함인 좀 더 잘 만들수 있었을텐데 하는 아쉬움처럼 이번 회차에서도 아쉬움이 있다면 좀 더 함수식을 다양하게 쓰는법을 익히지 못한 아쉬움이다.

  • 문제를 풀 수 있게 되었다는 사실만으로도 사실 너무나도 기쁘고 행복했다. 하지만 내가 알고있는것은 아주 극히 일부분이라는 것이라는 문제들을 풀어가며 알게되었다.


  • 나 스스로가 알고있는 나의 가장 큰 문제점, 무엇이 원인인지 부족한게 뭔지 알면서도 뭔가 편한길을 걸으려하고 그것을 마주하는데 두려움이 있어서 자꾸 회피하고 외면하려는 나의 옛날 모습이 오버랩되서 조금은 기분이 싱숭생숭한 챕터다.

  • 지금도 열심히 했다. 하지만 더 열심히 해야한다. 그리고 더 잘해야 한다.

  • 내가 바라는 내가 되기위해선 좀 더 뛰어야 한다.

profile
Seong Hyeon Kim
삽질도 100번 하면 요령이 생긴다. 부족한 건 경험으로 채우는 백엔드 개발자
이전 포스트

항해 99 2주차 Node.js 과제3

다음 포스트

항해톡 발표 - 프로세스 & 스레드 (Process & Thread)

0개의 댓글