[TIL] Day14-scope&closure

공부중인 개발자·2021년 4월 22일

CODESTATES JavaScript

TIL

목록 보기

14/64

자료형

원시 자료형 primitive data

객체가 아니면서 method를 가지지 않는 6가지의 타입
string, number, bigint, boolean, undefined, symbol, (null)
원시자료형은 한개의 데이터만을 담을 수 있다. 변수에도 한개의 데이터만 담을 수 있다.
'문자열', 3, true 등

참조 자료형 reference data

원시 자료형이 아닌 모든 것은 참조 자료형
배열[]과 객체{}, 함수function(){}가 대표적
참조자료형은 한개의 데이터를 담은 것이 아닌 데이터들이 담겨있는 주소가 담긴다.
참조 자료형은 기존 고정된 크기의 보관함이 아닌 동적으로 크기가 변하는 보관함을 사용할 수 있다.

let a = [1, 2, 3]; // 임의의 배열을 가진 변수 a
let b = [1, 2, 3]; // 임의의 배열을 가진 변수 b 둘의 배열은 같아 보이지만
a === b // false a와 b가 다른 이유는 둘의 배열의 생김새는 같지만 a가 가진 [1, 2, 3] 과
	// b가 가진  [1, 2, 3] 은 다른 주소를 가지고 있기 때문에 둘은 같지 않다.
c = a;
c.pop();
console.log(c) // [1, 2]  배열의 마지막 인덱스를 지우는 pop 때문에 c의 값은 [1, 2]이다.
console.log(a) /* [1, 2]  c에 pop을 넣었지만 c는 a의 주소를 받은 것이기 때문에
		변수 a의 결과값 역시 [1, 2]가 된다. */

scope

영어 단어는 범위라는 의미, 자바스크립트에선 "변수의 유효범위"로 사용
변수에 접근할 수 있는 범위가 존재, 중괄호(블록) 안쪽에 변수가 선언되었는가, 바깥쪽에 변수가 선언되었는가가 중요
바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능
안쪽에서 선언한 변수는 바깥쪽 스코프에서는 사용X
지역 변수는 전역 변수보다 더 높은 우선순위

let a는 가장 바깥쪽 scope로 모든 scope가 이용가능한 전역 변수이다. 그리고 scope1은 전역scope이다.
let b는 scope2의 변수이고 scope2와 scope3, scope4에서 이용 가능하며 scope1에서는 변수 b를 사용할 수 없다.
결과적으로 scope4에서는 모든 변수를 이용할 수 있지만 scope3에서는 d를 이용할 수 없고 2에서는 c,d를 이용할 수 없으며 1에서는 b,c,d 변수를 모두 이용할 수 없다.

스코프의 종류: 블록스코프(중괄호를 기준으로 범위 구분), 함수스코프(함수 선언식 및 함수 표현식은 함수 스코프)
화살표 함수는 블록스코프다.

var

var 변수는 블록 스코프를 무시하고, 함수 스코프만 따른다.
var는 재선언이 가능하다.

const

const는 값의 재할당이 불가능
값을 재할당할 경우 TypeError를 내므로, 의도하지 않은 값의 변경을 막을 수 있다.

	let	const	var
유효범위	블록&함수스코프	블록&함수스코프	함수스코프
값 재할당	가능	불가능	가능
재선언	불가능	불가능	가능

참고

'use strict' 를 js파일 제일 위에 작성하면 좀 더 엄격한 작동 가능

closure

클로저 함수는 외부 함수의 변수에 접근할 수 있는 내부 함수, '함수를 리턴하는 함수' 리턴된 함수가 클로저 함수이다.
외부 함수는 내부 함수의 변수에 접근할 수 없지만 내부 함수는 외부 함수의 변수에 접근 할 수 있다.
클로저 함수는 데이터를 보존 할 수 있다.

let minus = function(a) {
  	return function(b) {
      return a - b;
    }
}

let que2 = minus(10);
que2(7); //3
que2(5); //5

위의 식을 보면 minus의 지역변수 a 에 10 을 넣어줬는데 a = 10 이라는 숫자가 que2라는 변수에 저장이 되어있다. que2 만 이용한다면 다시한번 minus에 10이라는 변수를 주지 않아도 된다. 이런것을 보고 데이터를 보존 할 수 있다.

클로저 모듈 패턴
클로저를 이용해 리턴 값을 객체로 하여 여러 개의 내부 함수를 리턴하도록 만들 수 있다. 그렇기 때문에 외부함수에 변수를 설정하면 전역변수를 이용하지 않고 다양한 함수에 사용할 수 있다. 그로인해 side effect(전역변수로 인해 의도되지 않은 변수의 변화)를 줄일 수 있다. 또한 다양한 함수를 사용함에 있어 모듈화가 될 수 있다. 함수 재사용성을 극대화하여, 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것을 모듈화