2-2. Primitive & Reference, Scope, Closure

js 깊게 알기

primitive type data(원시 타입 데이터)

• string, number, bigint, boolean, undefined, symbol, (null)과 같은 고정된 저장공간을 차지하는 데이터
• 데이터는 각 변수간에 원시타입 데이터를 복사할 경우 데이터값을 복사하기 때문에 기존에 데이터에 영향이 가지 않음

let a = 1;
a = b;
b = 2;
a; // 1로 기존데이터 변경이 안됨

reference type data (주소 타입)

• 배열, 객체, 함수는 특별한 저장 공간을 유동적으로 사용 가능한 데이터
• 데이터를 복사할때 주소를 복사하기 때문에 복사한 데이터에서 원소를 변경할 경우 기존데이터에 영향이 감

let e = [10,20];
e=f;
f[0] = 50;
e = [50,20]

Scope

• 의미
  한글로 범위라는 뜻인데, 프로그래밍할때 범위를 고려해야 하는 이유는 한줄의 코드가 작동할때 어디까지가 작동될 수 있는지 파악할 수 있다. 즉, 변수 접근 규칙에 따른 유효 범위이다.

• 적용범위

1. 변수는 어떠한 환경 내에서만 사용 가능하며, 프로그래밍 언어는 각각의 변수 접근 규칙을 갖고 있다.
2. 변수와 그 값이, 어디서부터 어디까지 유효한지를 판단하는 범위이다
3. JavaScript는 기본적으로, 함수가 선언되는(lexical) 동시에 자신만의 Scope를 가진다.

//문제 : greetSomeone()과 firstName 실행의 결과는?
//Global Scope시작
let greeting = 'Hello';
//Local Scope시작
function greetSomeone() {
  let firstName = 'Josh';
  return greeting + ' ' + firstName;
} //Local Scope끝
greetSomeone(); // 'Hello Josh'
firstName; // ReferenceError
// Glocal Scope 끝

firstName접근을 할 수 없어서 참조할 수 없는 error가 나왔다.
firstName변수는 Local Scope영역에서만 사용가능하다.

- 주요규칙

0. Rule 1 : Local Scope(지역변수) vs. Global Scope(전역변수)

-지역변수는 본인의 scope안에서만 사용가능하며, 전역변수는 어디든 사용이 가능하다.
-지역변수는 함수 내에서 전역변수보다 우선순위를 가진다.

1. 중첩 규칙

-함수 안에 함수를 넣을 수 있음.

2. block scope(block-level scope) vs. function scope(function-level scope)

• block scope는 {}안에서 사용가능한 범위이고 function scope는 함수안에서만 사용가능한 범위를 말한다.

3. let, const, var의 차이

-let은 block{}단위로 범위사용이 가능하기 때문에 var사용보다 지향한다.
-var키워드는 block넘어가도 범위 사용 가능.(범위가 명확하지않아 사용을 지양)
-const키워드는 constant의 줄임말로 값이 변하지 않는 상수이다. let키워드와 동일하게 block scope를 따르지만 값을 재정의할 수 없고 재정의하려면 TypeError가 발생한다.

4. 전역 변수와 전역 객체(window)의 의미

• var, glocal scopre가 선언된다면 window객체와 연결됨

5. 선언없이 초기화된 전역변수 사용하지 않기

• 실수를 방지하고 싶을 경우, Strict Mode사용(콘솔사용x,파일저장할때 사용가능)

'use strict; 

클로저(Closure)

• 외부 함수의 변수에 접근할 수 있는 내부 함수 또는 이러한 작동 원리를 일컫는 용어
• 클로저 함수 안에서는 지역변수(innerVar), 외부함수의 변수(outerVar), 전역변수(globalVar)의 접근이 전부 가능

function outerFn() {
  let outerVar = 'outer';
  console.log(outerVar);
  
  function innerFn() {
    let innerVar = 'inner';
    console.log(innerVar);
  }
  return innerFn;
}

let globalVar = 'gloval';
let innerFn = outerFn();
innerFn();

- 커링 : 함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게 하는 방법

function addeer(x) {
  return function(y) {
    return x+y;
  }
}

adder(2)(3); //5

let add100 = adder(100); // x의 값을 고정해놓고 재사용 가능.
add100(2); // 102
add100(10); //110

let add5 = adder(5);
add5(2); //7

- 클로저 모듈 패턴 : 변수를 스코프 안쪽에 가두어 함수 밖으로 노출시키기 않는 방법로 외부함수에 접근할 수 있는 내부 함수이다.