Introduction

어제 원래 2일차 TIL정리 했어야 하는데 할머니 집에 가니 와이파이가 없어 업데이트를 못했다...
이제 업데이트를 하고 집에 가야겠다.

ESlint와 Jest를 터미널을 통해 설치했다. ESlint는 코드를 쓸 때 규칙을 정해놔 깔끔하고 정리되게 코드를 작성하는 것이다. 지금은 아직 익숙하지 않아서 그런지 빨간줄이 엄청 그어져있는게 눈에 거슬려 disable 해놨지만...Jest 는 페이스북에서 만든 테스트 라이브러리인데 Sprint를 통해 작성한 코드를 Jest에서 테스트 해봐서 패스가 되는지 안되는지 볼 때 사용한다.

둘다 유용하고 또 신기하기도 하다.

Scope & Closure

Scope와 Closure는 프리코스때 배운 내용을 복습하는 식으로 다시 강의를 들었다.
Scope를 간단하게 정리하자면 범위를 정하는 것이고 그 범위에 따라 접근할 수 있는 변수도 달라진다. 무슨 키워드로 정의하느냐에 따라 scope가 결정된다. Scope는 Closure와 가깝게 연관되어 있는데 Closure는 내부함수가 외부 함수의 변수에 접근이 가능하고 context에 접근이 가능하다. 이미 한번 공부한 내용이여서 그런가 강의도 이해가 되고 또 Checkpoint도 무난하게 풀었다. 새로 배우기도 했고 신기했던 건 IIFE, Arrow Function의 사용과 비구조화 할당 (Destructuring Assignment)이었다.

IIFE

IIFE는 Immediately invoked function ｅxpressions의 약자로 즉시 호출이 가능한 함수 표현식이다.

IIFE를 자세하게 들여다 보려면 함수 선언(Function Declaration)과 함수 표현(Function ｅxpression) 의 차이부터 봐야한다.

Function Declaration

함수 선언은, 흔히 함수를 쓸 때 사용하는,

Function A() {
  //함수코드
}

이런 식의 선언이다.

함수선언식으로 정의된 함수는 자바스크립트 인터프리터 스크립트가 로딩되면 초기화 후
VO(Variable Object)에 저장하기 때문에 선언하는 위치에 무관하게 어느 곳에서든 호출이 가능하다.

Function Expression

함수 표현은, 변수에 함수를 할당하는 것이다.

var example = function whatsup () {
  //함수코드

};

이런식이다.

Comparison

함수가 변수에 할당되어서 함수선언식과는 달리 VO에 저장하지 않고 runtime(실행)시 실행됨으로
차이점이 있다. 함수 선언식으로 정의하면 JS 인터프리터가 과도하게 많은 코드를 VO에 저장하기 때문에 응답 속도가 느려질 위험이 있다.

그리고 글로벌 스코프에 정의된것은 코드내 어디서든지 접근이 가능하기 때문에 공유를 원치 않는 속성이나 메소드가 유출될 위험도 있고 다른 파일에서 같은 이름의 변수와 함수가 있을 경우 원치 않는 결과가 있을 수 있다.

IIFE Advnatage

즉시실행함수를 사용하면 함수를 정의하지 않고, 변수에 저장하지도 않으면서 즉시 실행이 된다. 함수를 ()로 감싸주기만 하면 즉시실행함수가 된다. 그러므로 즉시 실행 함수를 사용하면 변수를 global하게 선언하지 않아도 되고, 변수에 함수를 이용해 즉시 값을 할당할 수 있으며, 라이브러리 전역 변수의 충돌을 방지할 수 있다.

함수선언 후 실행

function a () {
  console.log("Function Declaration")
}

a()

즉시실행함수

(function a () {
  console.log("IIFE")
}());

라이브러리 전역변수 충돌 방지는 아직 익숙치 않아 잘은 모르지만, 동일한 $라는 글로벌 변수를 사용하는 jQuery나 Prototype 라이브러리를 같이 사용할 때 즉시실행함수를 사용한다면 $변수에 대한 overwriting을 예방할 수 있다.

(function($) {
//$를 충돌 없이 사용가능

})(jQuery);

Arrow Function

화살표 함수 표현 (Arrow function ｅxpression) 은 function 표현에 비해 짧고, 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않으며, 익명이므로 메소드 함수가 아닌 곳에 적합하고 생성자로서 사용할 수 없다.

function sum3(x) {

  return y => {
    return z => {
      return x+y+z;

    }

  }

}


var sum3 = x => y=> z=> x+y+z;

놀랍게도 위의 두 함수는 같은 함수이다.

장점

화살표 함수의 가장 큰 장점은 내 생각에 코드를 더욱 짧고 간결하게 짤 수 있는것이다.
콜백함수로도 사용할 수 있어 MDN의 여러 예제들은 화살표 함수를 사용한다.

화살표 함수는 익명함수로만 사용할 수 있어서 호출하기 위해선 함수 표현식을 사용한다.

var x = x => x*x

x(10) 

기존 자바스크립트에서 함수의 this는 호출방식에 의해 결정되는 dynamic scoping 이었는데 화살표 함수를 사용할 경우 따로 binding 을 사용하지 않고 자신만의 this를 생성하지 않고 자신을 포함하고 있는 context의 this를 이어받는다. 화살표 함수는 언제나 상위 스코프의 this를 가리킨다. Lexical this라고도 하고 lexical scope와 유사하다. call, apply와 bind 를 사용하며 this를 변경할 수 없다.

window.x = 5;

const regular = function () {return this.x;};

const arrow = () => this.x;

 

console.log (normal.call({ x:10})); //10

console.log(arrow.call({x:10})); //1

단점

좋아보이기만 하는 화살표 함수에도 단점이 존재한다. 화살표 함수의 this는 자신을 포함하는 상위
컨텍스트를 가리키기 때문에 method 함수 사용에는 좋지 않다.

const age = {

  name: "Josh",

  age: "55",

  whatisage: () => console.log(`My Age is ${this.age}`)

};
 

age.whatisage();

위 함수를 실행했을 경우 55를 답으로 원할 수 있지만 화살표 함수 내부의 this는 method를 소유한 객체인 age를 가리키지 않고 상위 context인 전역 개체 window 를 가리킨다. 그래서 함수의 결과는 "Hi undefined"가 나온다.

Prototype에서도 this를 사용하기 때문에 같은 문제가 발생한다.
화살표 함수는 생성자 함수로도 사용할 수 없다. prototype property 가 없기 때문이다.

addEventListener 함수의 콜백함수를 화살표 함수로 사용하면 this가 window를 가리키기 때문에 사용하지 말아야 한다.

위의 경우들에는 일반함수를 사용함이 바람직하다.

Destructuring

마지막으로 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
feat.MDN

Example #1

[a, b, ...rest] = [10, 20, 30, 40, 50];

 
console.log(rest);

// expected output: [30,40,50]

Example #2

let football = {
 neymar: "neymar",
 rooney: "rooney",
 bale: "bale" 
};

let { neymar, rooney, bale } = football;
// 각 객체의 요소들을 빼올 수 있다. 

그만 알아보자...나중에 더 많이 사용할 때 알게 될 것 같다.

Conclusion

언더바도 페어프로그래밍을 통해 복습하는 식으로 풀어봤다. 소통이 중요한것같다. 더욱 적극적으로 나의 생각을 전달하고 또 남의 생각을 경청하는 연습이 중요하다. 매우.