[Javascript] 4. 변수 (모던자바스크립트딥다이브)

4-1. 변수란 무엇인가?

10 + 20

• 위 식을 계산하려면 자바스크립트 엔진은 사람과 유사한 방식으로 코드를 실행한다.
• 계산(평가 evaluation)하려면 먼저 10(리터럴), 20(리터럴), +(연산자)라는 기호의 의미를 알고 있어야 하고, 10 + 20이라는 식의 의미도 해석(parsing)할 수 있어야 한다.
• 먼저 피연산자인 10, 20을 메모리에 기억하고, CPU를 사용해 연산한다.

메모리

• 데이터를 저장할 수 있는 메모리셀의 집합체.
• 메모리 셀하나의 크기는 1바이트(8비트)
• 컴퓨터는 메모리셀의 크기인 1바이트 단위로 데이터를 저장하거나 읽어들인다.
• 각 셀은 고유의 메모리주소를 가짐.
• 메모리에 저장되는 모든 값은 2진수로 저장된다.

• 10 + 20의 연산을 해서 30이란 결과도 메모리에 저장되었지만, 이 결과값 30을 재사용 하려면 변수에 할당이 필요하다.
• 메모리주소를 통해 값에 직접 접근하는것은 매우 위험하고, 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다.
  • 코드가 실행될때마다 값이 저장될 메모리 주소는 변경된다.
• 프로그래밍언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽고 재사용 하기 위해 변수라는 매커니즘을 제공함.

변수
하나의 값을 지정하기 위해 확보한 메모리 공간 자체
또는 그 메모리 공간을 식별하기 위해 붙인 이름 값의 위치를 가리키는 상징적인 이름.

var result = 10 + 20;

• 변수 이름: 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
• 변수 값: 변수에 저장된 값
• 할당: 변수에 값을 저장하는것 (대입, 저장)
• 참조: 변수에 저장된 값을 읽어들이는 것

4-2. 식별자

• 변수의 이름을 식별자라고도 한다.
• 식별자: 어떠한 값을 구별해서 식별할 수 있는 고유한 이름
  • 값이 저장되어 있는 메모리 주소와 매핑관계, 이 매핑정보도 메모리에 저장되어야 함.
  • 값이 아니라 메모리 주소를 기억하고있다.
  • 변수 이름 뿐만 아니라, 함수, 클래스 등의 이름은 모두 식별자
  • 메모리 상에 존재하는 어떠한 값을 식별할 수 있는 이름은 모두 식별자

4-3. 변수 선언

• 변수선언: 변수를 생성하는것.
  • 값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것
• 변수를 선언할 때는 var, let, const 키워드 사용
• var키워드 단점
  • 블록 레벨 스코프를 지원하지 않고, 함수 레벨 스코프를 지원
  • 이로인해 의도치 않게 전역 변수가 선언되어 심각한 부작용 발생
• 확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화됨. (자바스크립트 독특한 특징)

변수이름은 어디에 등록되는가?

• 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록
• 실행컨텍스트(execution context)
  • 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역

• 초기화를 하지 않으면?
  • 다른 애플리케이션이 사용했던 값(쓰레기 값: garbage value)이 남아 있을 수 있다.
  • 할당하지 않은 상태에서 참조하면 쓰레기값이 나올 수 있다.
• 자바스크립트의 var키워드는 암묵적으로 초기화를 수행 ⇒ 이런 위험으로 부터 안전

4-4. 변수 선언의 실행 시점과 변수 호이스팅

console.log(score); // undefined
var score;

• 런타임 이전단계에서 변수선언이 먼저 실행되기때문.
  1. 자바스크립트 엔진은 소스코드의 평가 과정을 거치면서 소스코드를 실행하기 위한 준비를 함
  2. 이 평가과정에서 변수선언을 포함한 모든 선언문을 코드에서 찾아내 먼저 실행
  3. 평가과정이 끝나면 비로소 한줄 씩 순차적으로 실행
• 변수 호이스팅: 변수 선언문이 코드의 선두로 끌어 올려진것처럼 동작하는것.
  • 자바스크립트 고유의 특징
  • var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)은 호이스팅 된다.
  let과 const로 선언한 변수는 undefined로 자동 초기화되지만,
• 호이스팅된 이후 ‘일시적 사각지대(TDZ, Temporal Dead Zone)’에 있기 때문에 접근은 불가능

4-5. 값의 할당

• 할당이란?
  • 할당연산자 =를 사용
  • 우변의 값을 좌변 변수에 할당한다.

console.log(score); // undefined
var score;
score = 80;
console.log(score); // 80

• 변수 선언: 런타임 이전에 먼저 실행
• 값의 할당: 런타임에 실행

console.log(score); // undefined
var score = 80;
console.log(score); // 80

• 하나의 문장으로 단축표현해도 자바스크립트 엔진은 선언과 할당을 2개의 문으로 나누어 각각 실행
• 변수에 값을 할당할때, undefined가 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 80을 새롭게 저장하는 것이 아니라, 새로운 메모리공간을 확보하고 그곳에 할당 값 80을 저장한다는 점에 주의 할 것.

console.log(score); // undefined
score = 80;
var score;
console.log(score); // 80

• 변수선언이 호이스팅되므로 값의 할당이 선언보다 먼저 위에 올라오는것 가능

4-6. 값의 재할당

• 재할당이란?
  • 이미 값이 할당되어 있는 변수에 새로운값을 또 다시 할당하는 것
• var키워드로 선언한 변수는 선언과 동시에 undefined로 초기화되기 때문에 엄밀히 말하자면, 변수에 처음으로 값을 할당하는것도 사실은 재할당
• 만약, 값을 재할당 할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수(constant)라 함

4-7. 식별자 네이밍 규칙

네이밍 규칙

• 문자(a~z, A~Z), $, _로 시작해야 함
• 숫자로 시작 불가
• 공백, 특수문자, 예약어 사용 불가

네이밍 컨벤션

// 카멜케이스 (camelCase): 첫 글자는 소문자, 이후 단어는 대문자로 시작
// JavaScript 변수, 함수 이름에 주로 사용
var inputValue;
var setTodoList;
var handleSubmit;

// 2. 파스칼케이스 (PascalCase): 모든 단어의 첫 글자가 대문자
// 클래스명, 생성자 함수, React 컴포넌트 이름에 사용
var TodoItem;
var UserProfile;
var AppRouter;

// 3. 스네이크케이스 (snake_case): 단어를 소문자로 쓰고 _로 연결
// Python 변수, 데이터베이스 필드명 등에 사용
var user_name;
var created_at;
var email_address;

// 4. 헝가리안 표기법 (Hungarian Notation): 식별자 앞에 데이터 타입 또는 역할을 접두어로 붙이는 방식
// 요즘은 대부분의 현대 언어에서는 권장되지 않음 (타입 추론이 가능하고, 코드 가독성을 떨어뜨릴 수 있음)

var strName;   // 문자열
var btnSubmit; // 버튼
var iCount;    // 정수