Javascript 주요 문법(21. 8. 2 TIL)
📌 변수, 상수
var a = 10;
let x = [1, 2];
const name = "준형"변수 선언 키워드 : var, let
상수 선언 키워드 : const
📢 var 는 ES6 나오기 이전 사용하던 변수 선언 키워드.
호이스팅 관련 var 키워드는 코드의 유지보수 및 가독성 측면에서 사용을 권장하지는 않는다.
※ 호이스팅 : 선언을 끌어올려 유효 범위의 최상단에 선언하는 것.
관련하여 발생한 에러는 개발자가 발견하기 어려울 수 있음.
📌 메모리
const num1 = 10; // let(키워드), a(변수명), 10(값)
const num2 = num1;-
let num2 = num1처럼 기존 변수를 대입하면 기존 변수의 메모리 주소를 참조한다.
📢 예를 들어,
const num1 = 10 에서 num1이 메모리 주소 "0x0004" 에 저장되었다고 가정하면,
const num2 = num1 에서 num2 역시 "0x0004" 주소를 참조하게 된다.
- 위와 같이 변수에 값을 할당하면 해당 정보를 두 가지 특정 장소에 저장하게 된다.
그중 하나는 힙(Heap)이고, 다른 하나는 콜 스택(Call Stack) 이다.
- 힙(Heap)에는 참조 타입 자료형을 저장하고, 콜 스택(Call Stack)에는 원시 타입 자료형을 저장한다.
🚨 원시 타입 VS 참조 타입
- 원시 타입 : 숫자(Number), 문자열(String), 불린(Boolean), null, undefined
- 참조 타입 : 객체(Object), 배열(Array), 함수(function)
const arr = [];
arr.push(1); // 정상 동작(Heap 메모리에 저장되기 때문)
arr = 2; // Uncaught TypeError: Assignment to constant variable. 에러 발생4. 메모리는 한정되어 있고, 변수나 상수를 만들 때마다 메모리 공간을 사용한다.
✔ 메모리 공간을 다 쓰면 프로그램이 제대로 동작하지 않기 때문에 자바스크립트는 객체가 생성 되었을 때 자동으로 메모리를 할당하고 쓸모 없어졌을 때 "Garbage Collector"를 통해 사용하지 않는 메모리를 해제하여 공간을 활용 한다.
📌 스코프와 클로저
🔹 스코프(Scope)
- 변수가 어느 범위까지 참조되는 지를 뜻한다.
1. Global Scope : 어디서든 접근 가능
const x = 10;
const fun = () => {
console.log(x);
};
console.log(x); // 10
// 이 경우 x가 전역 변수로 할당되어 어디서든 사용 가능하다.2. Local Scope : 해당 Context 내에서만 사용 가능
const fun = () => {
let x = 10;
return x;
};
console.log(x); // Uncaught ReferenceError: x is not defined
// 이 경우 x가 지역 변수로 할당되어 함수 내에서만 사용 가능하다.🔹 클로저(Closures)
- 함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 만드는 문법이다.
function myFunc() {
const text = "준형";
function myFunc2() {
console.log(text);
}
return myFunc2();
};
// 함수가 종료되면 myFunc2 함수는 지역 변수이기 때문에 메모리에서 사라진다.
const name = myFunc(); // "준형"
// myFunc 함수는 myFunc2 함수를 리턴하고, 리턴하는 함수가 클로저를 형성하기 때문에 해당 함수에 접근이 가능하다.📌 알게된 것
- 메모리에 대해 공부하면서 const 키워드를 사용하여 참조 타입 자료형을 할당했을 때 재할당, push 등과 같은 코드가 되고 안되고의 정확한 차이는 몰랐지만 이번 기회를 통해 원시, 참조 타입으로 나뉘는 자료형이 각각 Call Stack, Heap 메모리에 저장된다는 차이를 알게 되었다.
따라서, 상수로 선언했다 하더라도 push, pop 등 메서드가 동작하는 이유는 Call Stack에 할당하는게 아니고 Heap 영역에서 변경이 이루어지기 때문이다.
- Scope에 대해 체적으로 아는 것이 아닌 단순히 에러가 발생 하는지 안하는지의 여부만 알고 있었으나 이번 기회를 통해 전역, 지역 변수에 대해 정확하게 알게되었고,
관련하여 Closures에 대해서도 감으로만 알던 내용을 구체적으로 알게 되었다.
그러나 Closures는 아직 모든 것을 이해했다고 하기엔 무리가 있어 차후 Closures에 대해서 포스팅을 하면서 추가적으로 공부할 예정.
프론트엔드 개발자 배준형입니다.