TIL #3 scope,closure

오늘 원시타입자료형 (Primitive) 참조타입자료형 (Reference) 에 대해 배웠고
scope와 closure 에대해 배웠다.

Primitive , Reference

- Primitive

• String , Number, Boolean, null, undefined
  이와 같은 값이 원시 타입 데이터이다 ( 이 외에도 더 있다)
  원시 타입 데이터는 변수에 할당될 때 메모리 상 고정된 크기로 저장되고
  변수가 데이터 값을 보관한다.
  Call stack

- Reference

• Object, Array
  이와 같은 타입은 참조 타입 데이터다. ( 이것 또한 더 있다)
  참조 타입 데이터는 크기가 정해져 있지 않고 변수에 할당될 때 값이 직접적으로 변수에 저장될 수 없고 데이터에 대한 주소가 저장 된다.
  Heap

  이 정도로만 간단하게 정리하고 다음에 좀 더 자세히 다뤄보도록 하자!

scope

scope ?

변수 접근 규칙에 따른 유효 범위를 말한다.

변수는 어떠한 환경 내에서만 사용이 가능하고
프로그래밍 언어는 각각의 변수 접근 규칙을 갖고 있다!

변수와 그 값이, 어디서부터 어디까지 유효한지를 판단하는 범위를 말한다.

JavaScript 에서는 기본적으로, 함수가 선언되는 동시에 자신만의 scope를 갖게 된다.

Local Scope vs Global Scope

안쪽 Scope (Local Scope)에서 바깥 변수/함수를 접근하는 것은 가능!
바깥쪽 Scope (Global Scope)에서 안쪽 변수/함수를 접근하는 것은 불가능!

let connect = 'login'// 전역 변수            // 첫줄부터 끝까지 Global Scope
function gameLogin(){                      // function gameLogin{} 이
 	let user = 'Altanis';// 지역 변수       // Local Scope
  return user + ' ' + connect ;
}

gameLogin(); // -> 'Altanis login'
user; // -> ReferenceError

• Scope는 중첩이 가능하다.
• 함수 안에 함수를 넣을 수 있다.
• Global Scope는 최상단의 Scope이다. 그래서 전역 변수는 어디서든 접근이 가능하다.
• 지역 변수는 함수 내에서 전역 변수보다 더 높은 우선순위를 가진다.

지역변수의 let 유무에 유의하자

let game = 'LeagueOfLegends';
function gametype(){
 let game = 'OverWatch';  // let 키워드를 사용해 새로 선언 되었다.
}						  // 전역에 있는 game과는 다른 변수다!

Function Scope vs Block Scope

Block?

중괄호로 시작하고, 끝나는 단위

	if(true)_{
     console.log('hello'); 
    }_

	for (let i = 0; i<3; i++)_{
     console.log(i); 
    }_

	_{
  	 console.log('hi');
	}_

var vs let 그리고 const

let 말고 변수를 정의하는 키워드로 var가 있다.

• JavaScript는 기본적으로, 함수 단위로 자신만의 Scope를 가진다
• var 키워드 (old way)

VS

• Block 단위로 Scope를 구분했을 때 예측하기 쉬운 코드를 작성할 수 있다

• let 키워드

  var 는 block 범위를 벗어나도 같은 function scope 에서는 사용이 가능하다

  const 키워드

  값이 변하지 않은 변수, 즉 상수를 정의할 때 사용하는 키워드

• let 키워드와 동일하게 Block Scope를 따른다.

• 값을 재정의하려고 하면 TypeError가 뜬다.

  	let	const	var
  유효 범위	Block Scope	Block Scope	Function Scope
  값 재정의	가능	불가능	가능
  재선언	불가능	불가능	가능

  var 재선언 문제가 많아 불가능으로 바뀌었다고 한다!

전역 변수와 window 객체

window?

전역 범위를 대표하는 객체

Global Scope에서 선언된 함수,
var 키워드를 이용해 선언된 변수는 window 객체와 연결된다

var game = 'LeagueOfLegends';
console.log(window.game); // LeagueOfLegends

function gamePlay() {
 		console.log('Rankgame'); 
}
console.log(gamePlay === window.gamePlay); // true

🚫 전역 범위에 너무 많은 변수를 선언하지 말 것!
선언 키워드 없이 변수를 초기화 하지 말 것!

function position(){
  lane = 'top';     // lane이 전역 변수로 취급 된다.
}

이러한 실수를 방지하고 싶다면 Strict Mode를 사용하자!

Closure

Closure?

외부 함수의 변수에 접근할 수 있는 내부 함수

• 자바스크립트는 함수도 리턴 할 수 있다.

	function outerFn(){
      	let outerStr = 'outer';
_      function innerFn(){
      	let innerStr = 'inner';         // 클로저 함수
      }_
      return innerFn;
    }

	let globalStr = 'global';

클로저 함수 안에서는 아래 변수 모두 접근이 가능하다.

• 지역 변수 (innerStr)
• 외부 함수의 변수 (outerStr)
• 전역 변수 (globalStr)

커링?

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

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

let add20 = sum(20);  // x 값을 고정해놓고 재사용이 가능하다!
add20(3); // 23
add20(100); // 120

외부 함수의 변수가 저장되어 마치 템플릿 함수처럼 사용 가능

	function htmlMaker(tag) {
      let startTag = '<' + tag + '>';
      let endTag = '</' + tag + '>';
	  return function(content) {
        return startTag + content + endTag;
      }
    }

	let divMaker = htmlMaker('div');
	divMaker('hello'); // <div>hello<div>

클로저 모듈 패턴 : 변수를 스코프 안쪽에 가두어 함수 밖으로 노출 시키지 않는 방법

	function levelUp() {
      let level = 0;
      
      return {
        levelplus : function() {
        	level++;
        },
        levelminus : function() {
         	level--; 
        }
        levelinfo : function() {
          return level;
        }
      }
    }
    
let leveup1 = levelUp();
levelup1.levelplus();
levelup1.levelplus();
levelup1.levelplus();
levelup1.levelinfo(); // 3