[TIL] 2주차!! 알고리즘 주간

이번주는 JS기반 알고리즘을 공부하는 주간이었다.

알고리즘 문제를 풀면서 ES5문법과 ES6의 문법차이에 대한 설명들이 많았다.

그래서 이번 WIL에서는 ES5/ES6의 문법차이를 회고해보려고한다.

차이점을 크게 나누어 보자면

• 변수 선언 방식
• 함수 선언 방식
• 문자열 처리
• 객체의 변화
• 구조화 할당, 비구조화 할당

변수 선언 방식 🔥

// ES5
function a(){
  var a = 1;
  if(true){
    var b = 2;
  }
  console.log(a) // 1
  console.log(b) // 2
}

ES5의 변수선언시 var는 Function Scope를 사용한다.
그러므로 if문의 블럭과는 상관없이 외부에서도 접근이 가능하다.
var의 장점은 함수 호이스팅이 되기때문에 var로 생성하지않고 그냥 변수로 사용해도 에러없이 생성되어 사용이 가능했다.
하지만 이 경우 동일한 변수명에 다른값을 넣어서 시스템에 문제를 발생시킬 수 있다.

// ES6
function a(){
  let a = 1;
  if(true){
    let b = 2;
  }
  console.log(a) // 1
  console.log(b) // uncaught referenceError: b is not
}

ES6의 변수선언시 let과 const가 존재하며 이 두가지 선언은 if문의 블럭에서 생성된 변수 b는 if문 종료와 동시에 사라지기 때문에 지역변수로써의 역할을 하고있는 것이다.
let은 중복선언시 typeerror가 발생하지만 잘못된 변수 사용으로 인해 발생하는 오해의 소지를 줄여주기 때문에 정확한 사용을 할 수있다.
const는 상수라는 개념에 맞다. 주의할점으로는 재할당이 불가능하다는 의미이다.

---

함수 선언 방식 🔥

// ES5
function plus (a,b) { return a+b }
var plus = function(a,b) { return a+b }

// ES6
let plus = (a,b) => { return a+b }

화살표 함수를 사용함으로서 함수선언이 간결해진다.

this의 사용에도 변화가 있다.
ES5의 경우 객채내 메소드 실행시 메소드의 this가 메소드가 선언된 해당 객체를 가르킨다. 하지만 객체안에서 선언된 함수의 this는 window를 바라보고 있기때문에 함수안에서 this.name이나 this.nickname을 해도 값이 나오지 않는다.
이런경우 innerInfo.call(this)를 통해 this를 바인딩 시켜주거나 this를 해당변수에 담아 var a = this 와 같은 방식으로 사용했다.

// ES5
var thisTest = {
     name : "안치영",   
     age : 26,
     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: 26, info: ƒ}
// 안치영 26
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
// ":undefined"

ES6에서의 this는 자신을 둘러싸고 있는 this를 바라보기 때문에 바로 사용이 가능하다.

// ES6
let thisTest = {
     name : "안치영",   
     age : 26,
     info() {
          console.log(this)
          console.log(this.name , this.age)
 
          innerInfo = () =>{
              console.log(this)
              return this.name + ":" + this.age
          }
          return innerInfo()
     }
}

---

문자열 처리 🔥

// ES5
var name = "안치영";
var age = 26;

var info = "안녕하세요 제 이름은" + name + "이고, " + age + "살 입니다.";

ES5에서는 Java에서 사용하던 것과 같이 +연산자를 통해 문자열사이에 변수를 넣어줄 수 있었습니다.

하지만 ES6로 넘어오면서 백틱과 ${}를 통해 한줄표현이 가능하게 되었다.

// ES6

let name = "안치영";
let age = 26;

let info = `안녕하세요 제 이름은 ${name}이고, ${age}살 입니다.`

---

객체의 변화 🔥

ES5의 객체 내부함수에서는 의미없는 function 키워드를 계속 적어줘서 함수라는것을 명시해줘야 했지만 ES6부터는 일반 메소드처럼 사용이 가능하며, 넣고자하는 변수와 object의 key가 같다면 변수명만 적어주어도 key:value가 생성된다.

// ES5
var getInfo = function() {
    var name = "안치영";
    return name;
};
var age = 26;
var object = {
    getAge : function(){
        return age;
    },
    getInfo : getInfo(),
};

object["getInfo"+age] = "getInfo"+age;

// ES6
let getInfo = () => {
    let name = "안치영";
    return name;
};
let age = 26;
let object = {
    getAge(){
        return age;
    },
    getInfo,
    ["getInfo" + age] :"getInfo" + age
};

---

구조화 할당 / 비구조화 할당 🔥

기존까지의 객체는 기존의 객체에서 값을 꺼내 변수에 담아 사용했다.

// ES5
var alpha = ['a','b','c','d'];
console.log(alpha[0] , alpha[1] , alpha[2] , alpha[3]);

// ES6
let alpha = ['a','b','c','d'];
let [a,b,c,d] = alpha;
console.log(a,b,c,d);

---