Unit10

이번 유닛에서는 앞서 배운 JavaScript에 대한 내용을 조금 더 깊게 다루고 새로운 문법을 배웠다.

원시 자료형과 참조 자료형

원시 자료형(primitive data type)

객체가 아니면서 method를 가지지 않는 6가지의 타입
string, number, bigint, boolean, undefined, symbol과 같은 고정된 저장 공간을 차지하는 데이터

변수에는 하나의 데이터만 담는다.

const num1 = 1;
const num2 = 12;

원시 자료형은 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 데이터를 할당할 수는 있다.

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

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

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

참조 자료형(reference data type)

별도로 관리되고, 우리가 직접 다루는 변수에는 주소가 저장되기 때문에 reference type이라고 불린다. 대량의 데이터를 다루기에 적합한 배열과 객체

heap

참조 자료형이 저장되는 특별한 데이터 보관함
heap에서는 자기 마음대로 사이즈를 늘렸다가 줄였다 할 수 있다.
이로써 많은 양의 데이터를 보관할 수 있기 때문에 고정된 공간을 사용하는것보다 효율적이게 되었다.

스코프

스코프란?
"변수의 유효범위"

let i = 'hi';
function igreet(){
    let name = 'tom';
    return i + ' ' + name;
}    
console.log(igreet()); // 'hi tom'
console.log(name); // ReferenceError

스코프 특징

1.바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능하다.

2.반면에, 안쪽에서 선언한 변수는 바깥쪽 스코프에서는 사용할 수 없다.

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

4.지역 변수는 전역 변수보다 더 높은 우선 순위를 가진다.

변수 선언과 스코프

let과 var은 값 재할당이 가능하지만, const는 불가능하다.
let과 const는 재선언이 불가능 하지만, var은 가능하다.

변수 선언시 주의점

var 키워드는 블록 스코프를 무시하기 때문에 let과 const를 주로 사용하자.
전역 변수를 var로 선언하는 것은 브라우저의 내장 기능을 사용하지 못하게 만들 수도 있다.

클로저

클로저 함수란?
외부함수의 변수에 접근할 수 있는 내부함수이다.

클로저 함수의 특징

1. 함수를 리턴하는 함수

2. 외부 함수의 변수에 접근 가능한 내부함수

리턴하는 함수에 의해 스코프(변수의 접근 범위)가 구분된다.
바깥 스코프에서는 안쪽 스코프 접근이 불가능 하지만, 바깥 스코프에서 선언한 변수에는 접근 가능하다.

클로저의 활용

1. 데이터를 보존하는 함수

일반적인 함수는, 함수 실행이 끝나고 나면 함수 내부의 변수를 사용할 수 없다. 이와 다르게, 클로저는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수가 메모리 상에 저장된다.

클로저를 이용해 HTML 문자열을 만드는 예제

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

'클로저 모듈 패턴'이라고도 불리고, 객체가 제공하는 메서드를 통해 value 값을 간접적으로 조작할 수 있다.

3. 모듈화

함수 재사용성을 극대화하여, 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것
클로저를 통해 데이터와 메서드를 같이 묶어서 다룰 수 있다. 즉, 클로저는 모듈화에 유리하다.