[Javascript] study 2주차 (2) - JS review (함수 선언식 vs 함수 표현식 vs 화살표 함수, 화살표 함수의 this, ESmodules, 퀴즈 + 오답노트)

함수 선언식 vs 함수 표현식 vs 화살표 함수

함수 선언식

function name (param) {
  // ...
};

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

런타임 이전에 자바스크립트 엔진에서 먼저 실행되어, 함수 자체를 호이스팅 시킬 수 있다.

함수 표현식

const name = function(param) {
  // ...
};

• 클로져로 사용
• 콜백으로 사용 (다른 함수의 인자로 넘길 수 있음)

런타임 이전에 해당 값을 undefined로 초기화만 시키고, 런타임에서 해당 함수 표현식이 할당되어 그때 객체가 된다.

함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다.

화살표 함수

화살표 함수는 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있다.
본문이 한 줄인 함수를 작성할 때 유용하다.
그러나 Function 키워드로 생성된 함수와 다른 점이 있다.

• 익명 함수로만 만들 수 있다.
• this나 super에 대한 바인딩이 없고, methods로 사용될 수 없다.
• constructor로 사용할 수 없다.
• new.target 키워드가 없다.
• 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 사용할 수 없다.
• prototype을 가지고 있지 않는다.
• yield 키워드를 허용하지 않으므로 generator를 쓸 수 없다.

let func = (arg1, arg2, ...argN) => expression

// 매개변수가 하나뿐인 경우 괄호 생략 가능
let func = arg => expression

// 매개변수가 없는 함수는 괄호 필수
() => expression

// 함수를 동적으로 생성 가능
let welcome = (age < 18) ?
  () => alert('안녕') :
  () => alert("안녕하세요!");

// 본문이 여러 줄인 경우 중괄호 안에 코드 작성
// return문으로 결과값을 반환해야 함.
let sum = (a, b) => { 
  let result = a + b;
  return result; 
};

화살표 함수의 this

화살표 함수는 생성될 때 this가 결정된다. 함수가 어떻게 사용되건, 호출되건, this는 바뀌지 않는다.
화살표 함수는 자신만의 this를 갖지 않기 때문에, 바깥 스코프에서 this 의 값을 받는다.

const obj = {
 whoAmI: () => {
   console.log(this) // ?
 }
}

위 코드에서 this는 전역 객체 (window)이다.

ESmodules

export와 export default의 차이는?

• Named export
  • 한꺼번에 여러개를 내보낼 수 있고,
  • 한 모듈안에 여러개가 존재할 수 있다.
  • export 할 때의 이름 그대로 import 해야하며
  • { }를 사용하여 import 해야한다.

// Named export 

// 하나씩 내보내기
export let name1, name2, …, nameN; // var, const도 동일
export let name1 = …, name2 = …, …, nameN; // var, const도 동일
export function functionName(){...}
export class ClassName {...}

// 목록으로 내보내기
export { name1, name2, …, nameN };

// 내보내면서 이름 바꾸기
export { variable1 as name1, variable2 as name2, …, nameN };

// 비구조화로 내보내기
export const { name1, name2: bar } = o;

• Default export
  • 모듈안에서 한 개만 존재해야하고, 한 개의 객체만 export 가능
  • 괄호를 사용하지 않아도 import 가능

// Default export
export { name1 as default, … };

import 와 동시에 다른 이름으로 변경하려면?

// Named export 
import {reallyReallyLongModuleMemberName as shortName} from "my-module.js";

// Default export
import defaultExport, * as name from "module-name";

퀴즈 풀기!

틀린거 오답노트 쓰기

✏️ W3Docs | Quiz ES6 Basic
(여기서 푼 거는 결과가 날아갔다..ㅜ)

✏️ Javascript quiz. ES6 edition.

// #1
(function(x, f = () => x) {
  var x;
  var y = x;
  x = 2;
  return [x, y, f()];
})(1)

//[2,1,1]

// #2
(function() {
  return [
    (() => this.x).bind({ x: 'inner' })(),
    (() => this.x)()
  ]
}).call({ x: 'outer' });
// ["outer", "outer"]

// #5
(typeof (new (class { class () {} })))
// object

// #8
typeof (function* f() { yield f })().next().next()
// error

// #9
typeof (new class f() { [f]() { }, f: { } })[`${f}`]
// error

// #13
(function() {
  if (false) {
    let f = { g() => 1 };
  }
  return typeof f;
})()
// error