[Udemy] JavaScript: The Advanced Concepts - 섹션 3:Javascript Foundation II

 

** ⚠ priv | 강의노트 카테고리에 있는 내용은 발행이 목적이 아니기 때문에 전혀 정제되어있지 않습니당.**

 

섹션 3:Javascript Foundation II

29. Execution Context

Creation Phase

1. argument object created with any arguments
2. initializes this keyword to point called or to the global object if not specified

Executing Phase

1. Variable Environment created - memory space for variable and functions created
2. initializes all variables to undefined and places them into memory with any new functions

 

35. Function Invocation

// Function Expression
var canada = () => {
  console.log('cold');
}

// Function Declaration
function india() {
  console.log('warm');
}

// Function Invocation/Call/Execution
canada();
india();

canada function (Function Expression) is defined at runtime
when we actually run/call/execute/invoke the function.

ㄴ 함수표현식은 runtime 때 정의됨.
변수 호이스팅이 일어나므로 canada라는 변수가 undefined로 생성되었다가, 함수가 실제로 실행될 때 내용이 변수에 담김

india function (Function Declaration) 은 함수 호이스팅이 일어나서
호이스팅되면서 내용이 바로 정의됨

That is when the compiler initially looks at the code
and starts hoisting and allocating memory.

글고 얘는 실행컨텍스트가 만들어질때 (긍께 함수가 실행되는 순간),
this 키워드랑 arguments 도 같이 만들어짐

 

36. arguments Keyword

글로벌 컨텍스트말고 걍 함수 실행될 때 사용 가능
글로벌 컨텍스트에서 사용하면 에러남 (arguments is not defined)

The keyword arguments can be dangerous to use in your code as is. In ES6, a few methods were introduced that can help better use arguments. => ...arg

얜 array가 아니라 array like object임

그래서 array 메서드못씀

var args = Array.from(arguments);
var args = [...arguments];    // 펼치기 연산자, 전개 구문

 

Rest Parameters

function f(a, b, ...theArgs) {
  // ...
}

• 함수의 마지막 파라미터의 앞에 ... 를 붙여 (사용자가 제공한) 모든 나머지 인수를 "표준" 자바스크립트 배열로 대체합니다. 마지막 파라미터만 "Rest 파라미터" 가 될 수 있습니다.

• rest 파라미터는 Array 인스턴스로, sort, map, forEach 또는 pop 같은 메서드가 바로 인스턴스에 적용될 수 있음을 뜻합니다.

• 단, Rest파라미터는 항상 제일 마지막 파라미터로 있어야 한다.

• ES6 의 arrow function 에서는 arguments 프로퍼티가 아예 없음
  따라서 화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 rest 파라미터를 사용해야 한다.

 

​ ++ spread 연산자

function sandwich(a, b, c) {
  console.log(a); // '🍞'
  console.log(b); // '🥬'
  console.log(c); // '🥓'
}

const food = ['🍞', '🥬', '🥓'];

// Old way
sandwich.apply(null, food);

// ✅ ES6 way
sandwich(...food);

앞에서 살펴본 Rest 파라미터는 Spread 문법을 사용하여 파라미터를 정의한 것을 의미한다. 형태가 동일하여 혼동할 수 있으므로 주의가 필요하다.

// spread 문법에 의해 분리된 배열의 요소는 개별적인 인자로서 각각의 매개변수에 전달된다.
foo(1, ...[2, 3], 4, ...[5]);

https://poiemaweb.com/es6-extended-parameter-handling

 

37. Variable Environment

function one() {
  var isValid = true; // local env
  console.log("one: ", isValid);  // true
  two(); // new execution context!
}

function two() {
  var isValid; // undefined
  console.log("two: ", isValid);  // undefined
}

var isValid = false; // global
console.log("글로벌: ", isValid); // false

one();

/*
   two() isValid = undefined
   one() isValid = true
   global() isValid = false
   ------------------------
   CALL STACK
*/

 

38. Scope Chain

39. [[scope]]

The execution context tells the engine
which lexical environment it is currently working in
and the lexical scope determines the available variables.

스코프체인을 통해 부모env의 변수에 접근이 가능하다.

Lexical Environment === [[scope]]

[[scopes]] 프로퍼티를 통해서 스코프체인확인 가능

 

40. Exercise: JS is Weird

function weird() {
  height = 50;    // 🤔
  return height;
}

weird();

2번째🤔줄에서 일어나는일
weird :ㅇㅁㅇ? our variable env에는 height가 없어..
그러고 글로벌 env로 가서 물어봄
글로벌 : ㅇㅁㅇ? 나도 없어 근데 하나필요하다니까 하나만들어드림

그니까 weird 함수의 variable env 에 저장되는게 아님..
We call this leakage of global variables.

저 코드를 실제로 실행해보면
window.height 라고 전역객체에 생성되어잇듬...!

요거 방지하려면 ‘use strict’을 쓰면 됨
고러면 height is not defined 라고 레퍼런스에러가 남

 

• 함수표현식에서 익명함수가 아니라 기명함수를 쓰면

  var hey = function doodle(){
      // doodle();
      return "HEY";
  }
  
  hey();
  doodle();

  doodle안에서 doodle이라는 이름으로 자기자신(함수)에는 접근 가능하지만
  외부에서는 doodle로 접근 못함

  긍께 doodle 이라는 이름은 자기자신의 스코프에 enclosed 되어있음

  

  hey 는 글로벌 컨텍스트에 있기땜시
  글로벌에서도 hey로 부를 수 있고
  당근 doodle 안에서도 hey로 부를 수 있음

 

43. Global Variables

    <script>var x = 1;</script>
    <script>var y = 2;</script>
    <script>var z = 3;</script>
    <script>var x = 5000;</script>

전역변수를 지양해야함
다른 파일에서도 정의하면 앞선 전역변수x를 overwrite하게됨

Avoid polluting the global namespace or scope when possible.

 

44. IIFE

IIFE - Immediately Invoked Function Expression 즉시실행함수

로컬스코프안에 가두기위해 사용

var script1 = (function () {
  function foo() { return "Hi"; }
  return { foo };
})();

script1.foo();    // Hi

이런식으로도 사용 가능

 

출처 : Udemy - JavaScript: The Advanced Concept
https://www.udemy.com/course/advanced-javascript-concepts