04. 변수

변수를 사용하는 이유는?

메모리 값에 직접 접근하는 것은 오류를 발생시킬 가능성이 있으므로 위험하다.
직접 접근한다 하더라도 그 메모리 값은 코드가 실행될 때마다 달라지므로 코드가 실행되기 이전에는 값이 저장된 메모리 주소를 알 수도 없고 알려주지도 않는다.
➡️ 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름. 값의 위치를 가리키는 상징적인 이름

식별자

식별자 : 어떤 값을 구별해서 식별할 수 있는 고유한 이름. 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름.

• 식별자는 값이 아니라 메모리 주소를 기억하고 있다.
• 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장되어야 한다.
• 선언에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

식별자 네이밍 규칙

• 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
• 위의 문자로 시작할 수 있되 숫자로 시작되는 것은 허용되지 않는다.
• 예약어는 식별자로 사용할 수 없다.

• 자바스크립트는 대소문자를 구별한다.
• 자바스크립트에서는 일반적으로 변수나 함수의 이름에는 camelCase를 사용하고, 생성자 함수, 클래스 이름에는 PascalCase를 사용한다.

변수 선언

변수 선언 : 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것
키워드 : 자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어. 자바스크립트 엔진은 키워드를 만나면 자신이 수행해야 할 약속된 동작을 수행한다.

*var 키워드는 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원하기 때문에 의도치 않게 전역 변수가 선언되어 문제를 일으킬 수 있다. 이러한 문제점을 개선하기 위해 ES6에서 let과 const 키워드가 도입되었다. 따라서 let과 const가 도입된 이유를 파악하기 위해서는 var 키워드의 단점을 알아야 하고, 이를 위해서는 스코프와 같은 개념을 살펴봐야한다.

• var 키워드를 사용한 변수 선언은 선언과 초기화를 동시 수행 : 변수 선언 후 비어있는 메모리 공간에는 암묵적으로 undefined라는 값이 할당되어 초기화된다.
  ➡️ 이전 애플리케이션이 사용하던 값을(쓰레기 값)을 사용할 위험을 제거한다.

호이스팅 ; 어디에서나 변수 참조가 가능한 이유

console.log(score); // undefined
var score; // 변수 선언

위의 코드는 Referecne Error가 발생하지 않고 undefined가 출력된다.
사실 변수 선언이 소스코드의 어디에 위치하든지 어디서든 변수를 참고할 수 있다.

➡️ 자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행된다. 하지만 변수 선언은 위치와 관계 없이 소스 코드가 한 줄씩 순차적으로 실행되는 시점(= 런타임)이 아닌 그 이전 단계에서 먼저 실행되기 때문이다.
자바스크립트 엔진은 소스 코드를 한 줄씩 실행하기에 앞서 먼저 준비 단계인 소스코드 평가 과정을 거치면서 코드 실행 준비를 한다.

1. 이 평가 과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다.
2. 소스 코드의 평가 과정이 끝나면 비로소 변수 선언을 포함한 모든 선언문을 제외하고 소스 코드를 한 줄씩 순차적으로 실행한다.

➡️ 호이스팅 : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

값의 할당

상수 : 값을 재할당할 수 없어서 저장된 값을 변경할 수 없는 것
변수 선언은 런타임 이전에 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

• ❗️변수에 값을 재할당할 때는 이전 값(ex. 초기 할당된 undefined)가 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 할당 값을 새롭게 저장하는 것이 아니라❗️ 새로운 메모리 공간을 확보하고 그곳에 할당값을 저장한다.
  • 어떤 식별자도 참조하지 않는 메모리 공간은 예측 불가능한 시기에 가비지 콜렉터에 의해 해제된다. : 매니지드 언어

05. 표현식과 문

표현식

값 : 식(표현식)이 평가evaluate되어 생성된 결과
리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법

• 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다.

표현식 expression : 값으로 평가될 수 있는 문statement. 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.

• 리터럴, 식별자, 연산자, 함수 호출 등의 조합으로 이뤄질 수 있다.
• 리터럴 = 표현식 : 리터럴도 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 표현식이다.
• 표현식과 표현식이 평가된 값은 동등한 관계이다.
  ➡️ 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다.

3 // 숫자 리터럴 3
var score=100; // 숫자 리터럴 100
var score = 50 + 50; // 리터럴 50과 연산자 +, 50+50도 평가되어 숫자 값 100을 생성하므로 표현식이다.

score; // = 100 // 값을 생성하지는 않지만 값으로 평가되므로 표현식이다.

// 리터럴 표현식
3
'Hello'

// 식별자 표현식
sum
person.name
arr[1]

// 연산자 표현식
10+20
sum = 10
sum !== 10

// 함수/메서드 호출 표현식
square()
person.getName()

문

문 : 프로그램을 구성하는 기본 단위이자 최소 실행 단위. 문의 집합으로 이뤄진 것이 프로그램이다.
토큰 : 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소

• 문은 여러 토큰으로 구성된다.

var sum = 1 + 2; // 토큰: var, sum, =, 1, +, 2, ;

• 문을 종료할 때는 세미콜론을 붙여줘야한다.
  • 사실 자밧크립트 엔진에서 세미콜론 자동 삽입 기능이 암묵적으로 수행하므로 생략 가능하다.
  • 그러나 개발자의 의도와 다르게 동작하는 경우가 있다.
• 코드 블록은 자체 종결성을 가지므로 세미콜론을 붙일 필요가 없다. ex. if문, for문, 함수 등

표현식인 문 vs 표현식이 아닌 문

표현식인 문가 그렇지 않은 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다.

var x; // 변수 선언 문은 표현식이 아닌 문이다.

x=100; // 할당문은 그 자체가 표현식이자 완전한 문이다.

var foo = x = 100; // foo에 100이 할당되는 문이다.

*크롬 개발자 도구에서 표현식이 아닌 문을 실헹하면 나오는 undefined를 완료값이라고 한다. 이는 표현식의 평가 결과가 아니므로 다른 값과 같이 변수에 할당할 수도 없고 참조할 수도 없다.