TIL 14: JS 핵심 개념과 주요 문법

원시 자료형과 참조 자료형

원시 자료형의 변수에는 하나의 원시 자료형만 담을 수 있습니다.

따라서 원시 자료형이 담기는 보관함의 크기는 고정되어 있습니다. 

이러한 데이터 보관함을 stack이라고 부릅니다.

원시 자료형에는 string, number, bigint, boolean, undefined, symbol, null 이 있습니다.

 

반면 참조 자료형은 변수에 할당 할 때는 변수에 값이 아닌 주소를 저장합니다. 

이 주소를 따라가면 원시 자료형과 달리 크기가 변동 가능한 데이터 보관함이 있습니다.

이러한 데이터 보관함을 heap이라고 부릅니다.

 

간단하게 정리하면 '원시 자료형은 값을 저장하고, 참조 자료형은 주소를 저장한다'로 정리할 수 있는데요.

이러한 특성 때문에 변수 a가 변수 b에 할당하는 경우가 차이가 나타납니다.

원시 자료형의 경우 아래와 같이 코드가 실행될 때 a의 값은 여전히 3으로 유지됩니다.

let a = 3;
let b = a;
b = 7;

반면, 참고 자료형의 경우 아래 코드가 실행되면 a의 값은 b가 바뀐대로 바뀌게 됩니다.

let dessert = {iceCream: 'MintChocolate'};
let cold = dessert;
cold.iceCream = 'Strawberry';

또한 cold 라는 배열에 undefined가 할당되면, 더이상 dessert 배열에 접근할 수 없게 됩니다.

 

 

스코프 (Scope)

범위(Scope)는 범위가 중괄호(블록) 또는 함수에 의해 나누어 집니다. 

안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 반대는 불가능합니다.

 

또한, 스코프는 중첩이 가능합니다. 

가장 바깥쪽의 스코프는 전역 스코프(Global Scope)라고 부릅니다.

전역이 아닌 스코프는 모두 지역 스코프(Local Scope)입니다.

 

또한 지역 변수는 전역 변수보다 더 높은 우선순위를 가집니다. 

만약 바깥 변수가 안쪽 변수가 동일하다면, 바깥쪽 변수가 안쪽 변수에 의해 가려지는 현상을 쉐도잉(variable shadowing)이라고 합니다.

 

스코프에는 두가지 종류가 있습니다.

하나는 블록 스코프(Block Scope)로 중괄호 기준으로 범위가 구분됩니다.

다른 스코프는 함수 스코프(Function Scope)가 있습니다.

함수 선언식 및 함수 표현식으로 범위가 나뉘어집니다.

한가지 주의해야할 점은 화살표 함수는 함수 스코프가 아니라 블록 스코프입니다.

 

 

 

변수 선언

스코프의 종류에 따라 변수를 정의하는 세 가지 방법(let, const, var)이 다르게 적용될 수 있습니다.

var은 블록 스코프를 무시하고 함수 스코프만 따릅니다.

단, 화살표 함수의 블록 스코프는 무시하지 않습니다.

아래는 변수 정의 방법을 정리한 표입니다.

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

변수 선언에서 주의해야 할 점이 있습니다.

참고로 window는 브라우저에만 존재하는 객체라고 합니다.

또한 전역 영역을 담고 있기도 합니다.

전역 영역에 변수를 선언하면 어디서든 접근이 가능하지만, 여러 사람이 같은 프로그램을 만들다보면 로직에 문제가 생길 수 있습니다.

이에 더하여 선언 없이 변수를 선언하는 경우 var를 사용하는 경우와 비슷하게 되기 때문에, 전역변수를 선언할당하게 되는 것이기에 문제가 생길 수 있습니다.

이런 경우를 방지하기 위해 Strict Mode를 적용합니다.

js파일 상단에 'use strict' 라고 표현하면 적용이 가능합니다.

 

 

클로저

클로저 함수는 함수를 리턴하는 함수입니다. 

인터넷에 클로저를 찾아보면 무슨 의미인지 정확하게 파악하기 좀 어렵더라구요..!

그래서 제가 생각하는 클로저 함수에 대해 좀 더 써보려고 합니다.

 

위처럼 단순히 함수를 리턴하는 함수라고만 하기에는 한계가 있습니다.

이에 대해서는 먼저 클로저의 의미에 대해 알아보겠습니다.

일단 클로저라고 하는 이유는 스코프를 이용해서 변수가 어디까지 접근할 수 있는지 범위를 정해주기 때문입니다.

또 다른 말로는 범위를 닫아준다고 할 수 있겠죠. 그래서 Closure라고 쓰이는 겁니다.

우리가 이전에는 함수 안의 변수는 함수 스코프로 인해 함수 안에 쓰이는 걸 배웠습니다.

이미 대부분의 개발자가 이러한 사실을 알고 있음에도 불구하고 굳이 저런 식으로 정해주는 이유는 바로 내부 함수에서 외부 함수에서 가져온 변수와 내부 함수의 변수를 둘 다 사용하고 있기 때문이라 생각합니다.

 

역시 말로 풀어쓰는 건 어려운 거 같아요..ㅋㅋㅋㅋㅋ