12月16日

今日は関数のscopeを勉強しました.
JavaScriptを上から下へ.
読むことで、グローバル変数を上に宣言しますが、上の内容は読めません.
とホスト
関数には2つの宣言と式があります.
宣言を上げることだ.
範囲の位置を調整できます.
モジュール関数の定義

mdn에 따르면 클로저의 정의는 다음과 같습니다. 반드시 기억하시기 바랍니다.
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

  A closure is the combination of a function and the lexical environment within which that function was declared. This environment consists of any local variables that were in-scope at the time the closure was created.

  클로저는 함수와 함수가 선언된 어휘적 환경의 조합을 말한다.
  이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.

여기서의 키워드는 "함수가 선언"된 "어휘적(lexical) 환경"입니다. 
특이하게도 자바스크립트는 함수가 호출되는 환경와 별개로, 기존에 선언되어 있던 환경 - 어휘적 환경 - 을 기준으로 변수를 조회하려고 합니다.
유어클레스 영상에서 언급되는 "외부함수의 변수에 접근할 수 있는 내부함수"를 클로져 함수로 부르는 이유도 그렇습니다.

클로저는 내부(inner) 함수가 외부(outer) 함수의 지역 변수에 접근할 수 있습니다.
이를 유념하시고 클로저의 유즈 케이스를 검색해 보시기 바랍니다. 아래 검색 키워드를 활용합니다.
  function factories
  namespacing private variables/functions
  
  
  
  
      /*
마지막 테스트 코드의 결과가 예상과는 달랐을 수도 있습니다.
'Object.assign'을 통한 복사는 reference variable은 주소만 복사하기 때문입니다. 
이와 관련하여 얕은 복사(shallow copy)와 깊은 복사(deep copy)에 대해서 학습하시기 바랍니다.
가이드가 될 만한 학습자료를 첨부합니다.
  https://scotch.io/bar-talk/copying-objects-in-javascript
  https://medium.com/watcha/깊은-복사와-얕은-복사에-대한-심도있는-이야기-2f7d797e008a
*/

function copy(mainObj) {
  let objCopy = {}; // objCopy will store a copy of the mainObj
  let key;

  for (key in mainObj) {
    objCopy[key] = mainObj[key]; // copies each property to the objCopy object
  }
  return objCopy;
}

const mainObj = {
  a: 2,
  b: 5,
  c: {
    x: 7,
    y: 4,
  },
}

console.log(copy(mainObj));

Rest Parameter
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters
Arguments VS restパラメータ
ES 5では、可変パラメータ関数は、パラメータオブジェクトによってパラメータ値を決定することもできる.
1
2
3
4
var foo = function () {
console.log(arguments);
};
foo(1, 2);//{ '0': 1, '1': 2 }
ではargumentsとrestパラメータの違いは何でしょうか.
答えからargumentsは配列に似たオブジェクトでありrestは配列である.
類似配列オブジェクト(array-like object)は、単純な遍歴性(iterable)と長さ値が既知の特徴を有する.つまり、配列のように使えるオブジェクトです.
argumentsは類似配列オブジェクトであるため、Arrayオブジェクトのメソッドは使用できません.
したがって、ES 6は、ARROW関数ではパラメータが使用できず、RESTパラメータを使用してより柔軟なコードを記述できるため、RESTパラメータを使用することを推奨する.
出典:https://jeong-pro.tistory.com/117[基本功を積むアマチュアコードブログ]
/////
スプレーの時に習った
name spacing
function factory (partially applied function)
restparameterとパラメータの違い
restparameterは、関数パラメータを受信した場合(いくつかのパラメータがあるか分からない場合に便利)に配列に設定します.
Argumentsは関数の生成時に自動的に生成されるが,真の配列ではない.さっき習ったようにpushは不可能です.forドアなどを使ってもいいです.

let func = function(num1, num2) {
  console.log(arguments);
}

let func = function(num1, num2) {
  arguments[0] = 2;
  return num1 + num2
}

restパラメータはarray

パラメータobject

let func = function() {
console.log(`arguments(인자)의 길이는 ${arguments.length}입니다`)  
let sum = 0
  for (let el of arguments) {
    sum = sum + el
  }
return sum
}
func(3,2,3,2)

arguments(인자)의 길이는 4입니다
10

ここを見ると関数にパラメータは入っていません
自分で論点から自分で関数を生成するのです.
パラメータオブジェクト
しかし、これは配列ではありません.
しかし、本当に並んでいるわけではないので、Array.fromや今日勉強しているSpread Syntaxを使うことができます.

let reaArray = […arguments]

console.log(Array.isArray(realArray))

true

---> 신기합니다...

(…args)これも同じですが、これは本当に順番に持ってきた違いなのでしょうか?あるようです.
restパラメータの適用

function testFunc (...args) {
  console.log(args)
}
testFunc(42,2,3,11)