변수
1. 변수란?
예를 들어 10+20을 연산을 하면 사람들은 보통 뇌에 저장하고 연산을 하지만, 컴퓨터는 메모리에 있는 10과 20을 이용하여 CPU을 통해 연산이 이루어진다. "즉, 변수는 하나의 값을 저장하기 위해 확보한 하나의 메모리 공간 자체이자, 메모기 공간을 식별하기 위해 붙인 이름이다."
용어정리
변수이름: 메모리 공간에서 변수를 식별할 수 있는 고유 이름(식별자)
변수값: 메모리에 저장된 값
할당: 변수에 변수값을 저장하는것, 즉 메모리 공간에 값을 저장하는 것
참조: 변수에 저장된 메모리값을 읽어 들어오는 것
2. 변수 선언
변수 선언이란 메모리 공간을 확보해 두는것을 말한다. ES6전 까지 변수 선언을 할 수있는 키워드는 var가 유일 했지만, ES6부터 const, let이 등장 하였다.
var의 문제점
var의 가장 치명적인 단점은 블록레벨 스코프을 지원하지 않고, 함수레벨 스코프를 지원한다. 그래서 의도치 않게 전역 스코프에 접근하여, 문제를 일으킬수 있다.
예시
var firstNum = 20; // 코드 100번째 줄
add(firstNum)
...
var firstNum = 100; // 코드 500번째 줄
function add(value) {
return value + 10
}
이럴경우 의도치 않게 firstNum에 새로운 값을 할당하게 되어 문제를 일으킬수 있다.var 키워드를 사용하는 동시에 변수 선언과 변수 초기화가 같이 이루어진다. 변수 초기화는 변수 선언으로 메로리값의 주소가 생기면 암묵적으로 undefined를 할당하는것을 말한다.
3. 호이스팅
자바스크립트는 런타임 하기전 즉 코드를 실행하기전, 우선 코드를 평가라는 단계를 거치게된다. 코드 평가는 쉽게 말해 코드를 실행하기 위해 준비단계로 생각하면 된다. 평가단계에서 변수와 함수를 자바스크립트 코드를 내부적으로 최상위로 끌어 올려 선언 단계를 거치게 된다. 이를 끌어 올린다고하여 호이스팅이라고 부른다.
호이스팅 단계에서 var와 함수 선언식은 선언과 초기화가 동시에 이루어지고, let, const는 선언 단계만 이루어진다.
consol.log(num); // undefined
var num; // 선언&초기화
num = 100; // 할당
console.log(num); // 100
* var는 선언과 초기화가 동시에 이루어져서 처음 console.log에 undefined 값이 나온다
* 만약 const나, let이였스면 reference에러를 발생 시켰을 것이다.4. 변수 재할당
변수를 재할당 하게 되면 원래의 메모리 공간에서의 값을 바꾸는 것이 아니라 새로운 메모리공간을 만들어 새로운 메모리값을 할당하는 것이다. 사용되지 않는 메모리 공간은 "가비지 콜렉터"에 모이게 되고, 주기적으로 자바스크립트는 가비지 콜렉터를 검사하여 메모리 해제를 하여 메모리 누수 현상을 자체적으로 방지한다.
5. 네이밍 규칙
변수의 수가 많아지면 변수 이름짓기도 힘들어지고, 구별하기도 힘들어진다. 그래서 나름 규칙을 만들어 변수 이름을 정하는걸 네이밍 규칙이라고 한다.
// 카멜 케이스
var firstName;
// 스네이크 케이스
var first_name;
// 파스칼 케이스
var FirstName;
// 헝가리언 케이스
var strFristName; // 타입과 이름을 같이 정의
var $name = document.querySelector('.name'); // dome에서 취득한 변수
* 자바스크립트는 변수나 함수의 이름에는 카멜 케이스, 생성자 함수, 클래스 이름에는 파스칼 케이스를 따르고 있다.
* 그러므로 가독성을 높이려면 두케이스를 이용하는 것이 유리하다정리
- 변수 선언은 데이터를 저장할 메모리 주소를 할당 받는것이다.
- 변수 초기화는 변수 선언이 된 메모리 주소에 암묵적으로 undefined 값을 할당하는 것이다.
- 변수 할당은 지정하고자 하는 값을 메모리 주소에 저장하는 것이다.
- 호이스팅은 런타임전 평과과정에서 내부적으로 변수, 함수들이 자바스크립트 최상위로 코드로 올라가는 현상을 말한다.
- 변수를 재할당 하게되면 새로운 메모리 값을 만들어 할당하게 되고, 사용하지 않는 메모리값들은 가비지 컬렉션에 모이게 되고, 자바스크립트가 주기적으로 검사를하여 메모리 해제를 하여, 메모리 누수를 방지한다.
