---

🕖 DAY +13 / 2022. 11. 07

SEB FE / Section1 / Unit9 / JavaScript 핵심 개념과 주요 문법

---

📌 Today I Learned

• 원시 자료형과 참조 자료형
• 스코프
• 클로저

💬 원시 자료형과 참조 자료형

📂 원시 자료형(ptimitive type data)

stack이라는 사물함 안에 값을 할당하고, 사용 시엔 사물함에서 이름표를 찾아 값을 반환한다
number string boolean null undefined

let a;
a = 1;
a; // 1

let b = 2;
let c = 3;

각 변수 간의 원시 타입 데이터를 복사항 경우 데이터값이 복사되기 때문에 기존의 데이터에 영향이 가지 않는다.

 const num1 = 123;
 const num2 = 123456789;

이렇게 변수에는 데이터의 크기와는 관계없이 하나의 데이터만 담을 수 있다.
원시 자료형은 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 데이터를 할당할 수는 있다.

"hello world!"
"hello codestates!"
// "hello world!" 와 "hello codestates!"는 모두 변경할 수 없는 고정된 값이다.

let word = "hello world!"
word = "hello codestates!"
// 하지만, word라는 변수에 재할당을 하여 변수에 담긴 내용을 변경하는 것은 가능하다.

const num1 = 123;
num1 = 123456789; // 에러 발생
// const 키워드로 선언하면, 재할당은 불가하다.

📂 참조 자료형(reference type data)

heap이라는 빈 공간을 만들고 사물함에 이름표를 단다. 값 대신 주소를 달고, 주소는 heap와 연결되어 있다. 값을 찾을 땐 사물함 안의 주소를 보고 heap에서 찾아 반환한다.
array function object

let a = [4, 5, 6];
let b = ["a", 1, 2];
let c = [true, false];
b.pop();
a[0] = 3;
c.pusg("a");

배열들의 원소를 빼내거나 수정을 해도 값을 찾을 때 복잡해지지 않는다.

주소를 복사하기 때문에 복사한 데이터에서 원소를 변경하게 된다면 주소 안의 데이터가 변경되기 때문에 기존의 데이터에도 영향이 가게 된다.

• 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담깁니다.
• 그래서 참조 자료형은 기존에 고정된 크기의 보관함이 아니라, 동적으로 크기가 변하는 특별한 보관함을 사용할 수 있습니다.

💬 스코프

스코프는 "변수 접근 규칙에 따른 유효 범위"이다.
변수가 접근할 수 있는 범위가 존재한다.
중괄호(블록) 안쪽에 변수가 선언되었는가, 바깥쪽에 변수가 선언되었는가가 중요하다.
이 범위를 우리는 스코프라고 부른다.

바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능하다.
반면에, 안쪽에서 선언한 변수는 바깥쪽 스코프에서는 사용할 수 없다.
스코프는 중첩이 가능하다. 마치 중첩된 울타리와 같다.

바깥쪽의 스코프는 전역 스코프(Global Scope)라고 부른다.
전역의 반대말은 지역(local)으로 전역이 아닌 다른 스코프는 전부 지역 스코프(local scope)이다.

동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는(shadow) 이러한 현상을 쉐도잉(variable shadowing)이라고 부릅니다.

📂 스코프의 종류

block scope 블록 스코프

function scope 함수 스코프

block scope 블록 스코프 (화살표 함수로 둘러싼 범위)

📂 window 객체

• var로 선언된 전역 변수 및 전역 함수는 window 객체에 속하게 된다
  • 브라우저에는 window라는 객체가 존재한다.
    • 브라우저 창을 대표하는 객체이다.
    • 브라우저 창과 관계없이 전역 항목도 담고 있다.

var myName = '김묑';
console.log(window.myName);
// 김묑

function foo() {
  console.log('bar');
}

console.log(foo === window.foo);
// true

• 전역 변수에 너무 많은 변수를 선언하지 말아라.
  • 전역 변수 : 어디서든 접근 가능한 변수
  • 편리한 대신, 다른 함수 혹은 로직에 의해 의도하지 않은 변경이 발생할 수 있음
    - 부수 효과(side effect) 발생

📂 선언 없는 변수 할당 금지

• 선언 키워드(var, let, const) 없이 변수를 할당하지 말아라.

function showAge() {
  age = 90; // age는 전역 변수로 취급 된다.
  console.log(age); // 90
}

showAge();
console.log(age); // 90
console.log(window.age); // 90

age는 선언한 적 없으나, 값을 할당하면서 마치 var로 선언된 전역 변수처럼 작동한다.

• 실수를 방지하기 위해 strict mode를 사용할 수도 있다.

'use strict'

function showAge() {
  age = 90; // 여기서 에러가 발생한다
  console.log(age); // 90
}

showAge();

💬 클로저

📂 클로저 함수의 특징

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

여기서의 키워드는 "함수가 선언"된 "어휘적(lexical) 환경"입니다.

const adder = x => y => x + y;
adder(5)97); // 12

typeof adder(5) // 'function'  // 리턴 값이 함수의 형태다.

adder(5) // y => x + y // 리턴 값이 함수의 형태다.

클로저 함수의 기본 형태

// const adder = x => y => x + y;
// 위의 코드와 동일하게 작동하는 코드
const adder = function (x) {
	return function (y) {   // 리턴 값이 함수의 형태다.
    	return x + y;
    }
}

x가 선언된 함수는 바깥쪽에 있으니 외부 함수라고 부른다.
그리고 y가 선언된 함수는 보다 안쪽에 있으니 내부 함수라고 부른다.
이 클로저 함수는 스코프가 분리되어 있다.

📂 데이터를 보존하는 함수

HTML 문자열 생성기

const tagMaker = tag => content => `<${tag}>${content}</${tag}>`

const divMaker = tagMaker('div');
divMaker('hello') // '<div>hello<div>'
divMaket('world') // '<div>world<div>'

const anchorMaker = tagMarker('a');
anchorMaker('go') // '<a>go</a>'
anchorMaker('study') // '<a>study</a>'

예제에서 divMaker 함수는 'div'라는 문자열을 tag 라는 변수에 담아두고 있으며, anchorMaker 함수는 'a'라는 문자열을 tag에 담아두고 있다.

클로저는 이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게 해 준다.

📂 정보의 접근 제한

클로저를 이용해 내부 함수를 단 하나만 리턴하는 것에 그치지 않고, 객체에 담아 여러 개의 내부 함수를 리턴하도록 만든다.

정보의 접근 제한 (캡슐화)

만일 스코프로 value 값을 감싸지 않았더라면, value 값은 전역 변수여야만 했을 것이다. 하지만 makeCounter라는 함수가 value 값을 보존하고 있기 때문에, 전역 변수로 따로 만들 필요가 없다.

전역 변수가 좋지 않은 이유는, 전역 변수는 다른 함수 혹은 로직 등에 의해 의도되지 않은 변경을 초래하기 때문이다. 이를 side effect라고 합니다. side effect를 최소화하면, 의도되지 않은 변경을 줄일 수 있다. 따라서 이에 따른 오류로부터 보다 안전하게 값을 보호할 수 있다.

클로저를 통해 불필요한 전역 변수 사용을 줄이고, 스코프를 이용해 값을 보다 안전하게 다룰 수 있다.

📂 모듈화

재활용이 가능한 makeCouner함수
여러 개의 counter를 만드는 것이 가능

const makeCounter = () => {
	let value = 0;
	
	return {
		increase: () => {
			value = value + 1
		},
		decrease: () => {
			value = value - 1
		},
		getValue: () => value
	}
}

const counter1 = makeCounter();

counter1.increase();
counter1.increase();
counter1.decrease();
counter1.getValue(); // 1

const counter2 = makeCounter();

counter1.decrease();
counter1.decrease();
counter1.decrease();
counter1.getValue(); // -3

// counter1과 counter2의 value는 서로에게 영향을 끼치지 않는다.

makeCounter에 의해 리턴된 객체는, makeCounter를 실행할 때에 선언되는 value 값을 각자 독립적으로 가지게 된다. 따라서 counter1에서의 value와 counter2에서의 value는 서로에게 영향을 끼치지 않고, 각각의 값을 보존할 수 있다.

이와 같이 함수 재사용성을 극대화하여, 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것을 모듈화라고 한다.

클로저를 통해 데이터와 메서드를 같이 묶어서 다룰 수 있다. 즉, 클로저는 모듈화에 유리하다.

‘클로저 모듈 패턴’의 예시입니다. 변수 value는 직접 수정하는 것이 불가능하고, 리턴하는 객체가 제공하는 메서드를 통해서만 조작이 가능합니다. 이렇게 캡슐화를 함으로써 변수 value를 makeCounter 함수로 보존해서 전역 변수로 인한 side effect를 방지할 수 있습니다.