자바스크립트의 문법 (上)

개발 블로그·2022년 3월 29일
0

DeepDive

목록 보기
2/2
post-thumbnail

변수

1) 변수란?

변수는 값의 위치(주소)를 기억하는 저장소이다. 값의 위치란 값이 위치하고 있는 메모리 상의 주소(address)를 의미한다. 즉, 변수란 값이 위치하고 있는 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 명명한 식별자(identifier)이다.

var a = "Ranja";
/*
	var : 변수 선언
    a: 식별자
    "Ranja": 데이터(값)
    "Ranja"라는 데이터를 저장
    => 그 데이터를 저장한 메모리의 주소는 a라는 이름으로 저장
    => 데이터의 값을 가져오고 싶을때 는 a를 불러오면 해당 주소의 값을 참조해온다.
*/
console.log(b)
// VM400:1 Uncaught ReferenceError: b is not defined at <anonymous>:1:13
// 선언되지 않은 식별자에 접근하면 이렇게 참조할 수 없다는 메세지가 등장한다.    

메모리 생존주기는 프로그래밍 언어와 관계없이 비슷하다.
1. 필요할때 할당한다.
2. 사용한다. (읽기, 쓰기)
3. 필요없어지면 해제한다.


2) 변수의 흐름

자바스크립트 엔진이 런타임 이전에 변수를 처리하는 과정을 한번 보자.

모든 코드를 실행하기 이전에 전체 코드를 한번 읽는다.
var, let, const 등의 변수 선언을 읽고 다음의 행동을 반복한다.

1) 값을 저장하기 위한 메모리 확보
2) 변수 이름과 확보된 메모리 주소 연결
3) 해당 메모리에는 undefined라는 값이 암묵적으로 할당됨
(컴퓨터의 메모리에 다른 값이 들어있을 수 있기 때문에 초기화를 한다.)

// 작성한 코드
console.log(a) // undefined
a = 100;
var a; 
console.log(a) // 100

// 엔진이 런타임이 되기 전 실행하는 시점
var a;
console.log(a);
a = 100;
console.log(a);

자바스크립트 코드는 인터프리터에 의해 한줄씩 순서대로 수행된다. 그러나 첫 줄은 a가 선언되기 전임에도 참조에러가 나오지 않고 undefined를 반환한다.

  • 이처럼 변수 선언문이 코드가 선두로 올려쳐진 것처럼 동작하는 것을 변수 호이스팅이라고 한다.

이제 런타임에서 변수가 재할당되는 과정을 보자.

	   변수		메모리 주소      값
1단계 : a ==> | 0x000000f2 | undefined |
	
      		 | 0x000000f2 | undefined |
2단계 : a ==> | 0x00001332 |    100    |

변수가 재할당될 때는 첫 주소에 있던 undefined를 지우고 100을 새로 넣는 것이 아니라 100이라는 값을 새로운 메모리에 할당하고 그 주소를 a에게 다시 연결한다.

그리고 연결된 식별자가 없는 값을 가진 메모리들은 자바스크립트의 가비지 컬렉터가 주기적으로 검사하면서 자동 해제해준다.


3) 변수를 네이밍할 때 주의할 점

  • 키워드는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어이므로 식별자로 사용할 수 없다.
    - ex) let, var, const, this 등등

  • 첫글자로 $, _를 제외한 특수문자 사용불가능

  • 첫글자로 숫자 사용 불가능


표현식

statement(문)은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다. 문은 여러가지 token으로 구성된다.

    { -	statement  - }
token  token    token  token
var    ranja    =      1002;
var a= ,
VM528:1 Uncaught SyntaxError: Unexpected token ','

그럼 표현식은 무엇일까

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

var score = 100;
// 100이라는 숫자를 우리가 쓰면 엔진이 100이라는 코드를 숫자 100으로 평가해서 할당해준다. 
// 이렇게 사람이 이해할 수 있는 약속된 문자, 숫자를 리터럴이라고 한다.
100; // 
getPerson();

타입

자바스크립트의 모든 값은 숫자, 문자, boolean 등등 고유한 데이터 타입을 갖는다.

1) 그렇다면 왜 타입이 필요할까?

메모리에 값을 할당하는 과정을 위에서 얘기했는데 여기서 생략된 과정이 있다.

자바스크립트 엔진
=> 100 이라는 리터럴 확인
=> 숫자타입의 값으로 해석하고 8바이트의 메모리 공간 확보
=> 100이라는 리터럴을 이진수로 변환해 메모리에 저장

자바스크립트는 메모리에 할당하기 전에 데이터가 어느정도의 크기인지 알아야 낭비와 손실없이 값을 저장할 수 있기 때문에 타입이 필요하다.

그리고 두번째로 그 값을 다시 읽어올 때도 타입이 필요하다.

0100 0001 => 숫자 65 | 문자 'A'
2진수로 저장된 값은 어떻게 해석할지 타입이 없으면 결정할 수 없다.


2) 동적 타입(dynamic/weak type)

// 자바
char var1 = 65;
// C
int a = 10;

C나 JAVA같은 정적 타입 언어는 변수를 선언할 때 명시적으로 타입을 선언해줘야 한다. 그리고 그 타입을 변경할 수 없으며 변수에는 선언한 타입의 값만 할당할 수 있다.

자바스크립트의 경우에는 반대로 할당하는 값에 따라 타입이 결정된다.

var a = 'hello';
var b = 10;
console.log(typeof a); // string
console.log(typeof b); // number

a = false;
console.log(typeof a); // boolean

이렇게 선언이 아닌 할당에 의해 타입이 결정되는 것을 타입추론 (type interface) 라고 한다. 또한 자바스크립트는 재할당에 따라 언제든 타입이 변경될 수 있다.
이러한 특징을 동적 타이핑이라고 부른다.

단점으로는

  • 개발자의 의도와 상관없이 엔진에 의해 타입이 변환되기에 유연성은 높지만 신뢰성이 떨어진다.
  • 그만큼 데이터 타입을 체크하기 위한 코드도 많이 늘어남.
profile
프론트엔드 개발자의 TIL

0개의 댓글