자바스크립트 - 변수, var, const, let, 선언, 할당, 초기화, 렉시컬 스코프, 스코프 체인

앞서 여러 프로젝트를 진행한 결과 프론트엔드 웹 개발자로 진로를 정했고, 나에게 없는 기초를 튼튼히 다져야겠다는 생각이 들어 [SK플래닛] 웹 풀스택 개발자 과정 ASAC과 함께 자바스크립트, 리액트, 스프링부트 공부과정을 블로그에 작성하기로 결심했다. 풀스택이지만, 어느 한쪽을 얕게 공부하지 않는 빡센 커리큘럼이라고 한다. 4개월 동안 교육을 듣고 블로그에 작성하는 이 시간들을 통해 유의미한 결과가 도출되기를!!😎

자바스크립트란?

자바스크립트는 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어

자바스크립트의 역할은 웹페이지에서 다양한 기능을 구현하는 것입니다

예시로 애니메이션 동작, 팝업 띄우기, 사용자에게 문자 입력을 받기 등이 있습니다

*자바와는 아무런 연관이 없습니다^^

자바스크립트는 미리 컴파일을 거치지 않고 실행되는 인터프리터 언어

'자바스크립트 엔진'은 브라우저에 내장된 '자바스크립트 가상 머신'이라 불리는 엔진입니다

이 엔진은 자바스크립트 코드를 컴퓨터가 이해하고 실행할 수 있는 낮은 수준의 언어로 변환합니다

JIT(Just-In-Time) 컴파일 기술을 사용하여 자바스크립트 코드를 실행하는 동안 실시간으로 컴파일하고 최적화합니다

이러한 특성을 통해 빠르게 코드를 실행할 수 있습니다

컴파일이 발생하긴 하지만 런타임에 처리되기 때문에 컴파일 언어가 아닌, 인터프리터 언어로 분류가 됩니다

 

=> 자바스크립트는 동적이고 실시간으로 실행되는 스크립트 언어로서, 웹페이지를 보다 인터랙티브하게 만들어줍니다

자바스크립트의 장점

• HTML/CSS와 함께 모든 주요 브라우저에서 기본언어로 사용되고 있습니다
• 다양한 라이브러리와 프레임워크가 제공되고 있어 개발에 용이합니다
• 웹 개발뿐만 아니라 서버, 모바일 앱 개발에도 쓰입니다

---

 

코딩이라고 하면 사람들은 길고 복잡한, 영어로 문장들을 생각합니다

그러나 코딩도 뜯어보면 결국 작은 요소들의 복합체로 이루어져 있습니다

그중 제일 작은 요소인, 모든 코드의 시발점이라고도 할 수 있는 변수를 알아봅시다

변수란?

하나의 값을 저장할 수 있는 이름을 가진 저장공간

컴퓨터는 정보를 0과 1로 기억합니다

다행히 기술의 발전으로 우리는 0과 1을 직접 치는 것이 아니라 약속된 문장으로 컴퓨터에게 일을 시킵니다

 

컴퓨터에게 어떤 일을 시키고 싶은가요?

주로 사람이 할 수 없는 영역인 반복되는 작업, 고도의 계산이나, 방대한 데이터들을 저장하는 것 등일 것입니다.

 

위의 작업들은 모두 데이터를 어딘가는 저장해 놓아야 가능합니다

그래서 변수라는 곳에 데이터를 저장하는 것입니다

변수를 저장할때는 선언, 할당, 초기화의 과정을 거칩니다

선언

let name;  //선언

• 사용할 변수의 이름을 작성합니다
• 선언만 한다면 초기값은 undefined 입니다

할당 & 초기화

name = 'Judy'; // 선언한 name에 값을 할당
const age = 25; // 초기화

 

선언은 내가 이러한 변수를 만들겠다하고 컴퓨터에게 알리는 것입니다

변수를 선언하는 방법은 변수의 종류를 쓰고 변수의 이름을 작성하면 됩니다

할당은 선언된 변수에 내가 저장하고 싶은 값을 넣어주는 것입니다

그리고 초기화는 선언과 동시에 할당을 진행하는 것입니다

변수의 종류

변수의 종류에는 var, let, const 가 있습니다

초기에 변수의 종류는 var 밖에 없었습니다.

그러나 여러 문제들이 발생함으로 인해 let과 const라는 변수의 종류가 만들어지게 되었습니다

const는 var, let과 다르게 한번 담은 값을 변경할 수 없습니다

• 따라서 const는 선언시 초기화가 꼭 같이 이루어집니다. 위의 예시처럼요
• '일정한'이라는 뜻의 constant 에서 왔습니다

var	재선언 가능	재할당 가능	함수 스코프
let	재선언 불가	재할당 가능	블록 스코프
const	재선언 불가	재할당 불가	블록스코프

스코프(Scope)란?

스코프란 변수에 접근할 수 있는 범위 입니다.

전역 스코프(Global Scope)는 프로그램 내 어느 곳에서든지 변수에 접근할 수 있다는 의미이고
지역 스코프(Local Scope)는 특정 부분에서만 접근할 수 있다는 의미입니다

지역 스코프의 예로는 함수 스코프와 블록 스코프가 있습니다

함수 스코프

• 함수 안에서 선언된 변수는 해당 함수 내에서만 접근 할 수 있습니다
• var로 선언된 변수는 함수 스코프를 가집니다

var star = 1;

function print() {  // function 시작
    var star = 2;
    console.log(star); 
}    // function 끝

print();  // function 안에 코드 실행
console.log(a);   // 2 출력

블록 스코프

• 블록(Block)은 중괄호{}로 둘러싸인 부분을 의미합니다
• 따라서 블록 스코프는 변수가 선언된 가장 가까운, 안쪽의 블록 내에서만 유효합니다
• let, const로 선언된 변수는 블록 스코프를 가집니다 

if (true) {  // 블록 시작 
	let star = "I'm block scope";
	console.log(star);  // 위에 문장 출력
}  // 블록 끝

consoel.log(); // ReferenceError 에러

 

+ 추가로 함수 외부에 선언된 var은 전역 스코프를 가지기에 예기치 못한 문제가 많이 발생했었습니다

후에 let, const는 블록 외부에 선언돼도 전역 스코프를 가지지 않고 해당 파일 내에서만 접근 가능한 스코프를 가지게 됩니다 

렉시컬 스코프

자바스크립트 엔진은 코드 실행 전에 변수의 접근 가능한 범위를 함수가 작성된 시점에 따라 결정합니다

함수를 호출하는 곳이 아닌 함수를 선언한 곳에 따라 상위 스코프가 결정되는 것입니다
렉시컬 스코프를 정적 스코프(Static Scope)라고 부르기도 합니다

// 렉시컬 스코프 예시

let a = 1;  //foo() 와 foo2()의 상위 스코프

function foo() {
	let a = 5;  // 재선언 가능한 이유: 함수 스코프를 가지기 때문에 전역 변수 a에 영향을 미치지 않음
   	foo2();
}

function foo2() {
	console.log(a);
}

foo(); // 1
foo2(); // 1

• a를 출력하는 foo2 함수를 foo 안에서 호출했습니다. 그런데 foo2 함수를 호출하기 바로 위에 5가 할당된 지역 변수 a가 있습니다. 그래서 foo를 실행하면 출력이 5일 것 같지만 실제로 foo2는 전역 변수 a에 접근하기 때문에 1이 출력됩니다

스코프 체인

자바스크립트 엔진은 실행 단계에서 필요한 변수나 함수를 찾기 위해
현재 스코프에서 시작하여 상위 스코프로 이동하면서 찾을 때까지 탐색을 합니다

만일 최상위 스코프인 전역 스코프에 도달할때까지 찾지 못하면 탐색을 종료합니다

이렇게 스코프가 연결되어 있는 구조를 스코프 체인이라고 합니다

// 스코프 체인 예시

const globalStar = 'BTC';

function outerFunc() {
		const countryStar = '20cm';
		
		function innerFunc() {
				const localStar = 'Judy';
				
				console.log(localStar);  // 현재 스코프(innerFunc)
				console.log(countryStar);  // 현재 -> 상위 스코프(outerFunc)
				console.log(globalStar); // 현재 -> 상위  -> 전역 스코프
		}
		
		innerFunc();
}

outerFunc();

리터럴이란?

리터럴은 데이터 그 자체를 의미합니다

var number = 4;
let today = "wednesday";
const isHappy = true;

• 위에서 숫자 4, 문자열 "wednesday", 진리값 true가 각각 리터럴입니다.

리터럴과 상수의 차이점

상수는 값을 한번 할당하면 변경할 수 없는 값이고(const로 선언된 변수는 상수 변수 입니다),

리터럴은 코드 상에서 고정된 데이터를 표현하는 방식인 것입니다

 

 

참고

https://asfirstalways.tistory.com/21

https://medium.com/@su_bak/javascript-%EC%8A%A4%EC%BD%94%ED%94%84-scope-%EB%9E%80-bc761cba1023