thumbnail
4.변수
JavaScript
2022.03.09.

제로베이스 네카라쿠배 온라인스쿨 1기 과정(2021. 11 ~ 2021. 12)에서 공부했던 Javascript Deepdive 교재의 내용 요약 및 필자의 생각을 정리한 내용입니다. 원서의 내용 챕터의 일부를 요약한 내용으로 보다 자세한 내용은 원서를 참조 바랍니다.


4장 변수

4.1 변수란 무엇인가? 왜 필요한가?

  • 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.
  • 자바스크립트가 10 + 20 이라는 식의 의미를 해석한다고 가정하면 다음과 같은 과정을 거친다.
    • 연산을 수행하기 전에 먼저 + 연산자의 좌변과 우변의 숫자 값 피연산자(operand)를 기억한다.
      • 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다.
      • 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체로, 셀 하나의 크기는 1바이트(8비트)이며 1바이트 단위로 데이터를 저장하거나 읽어 들인다.
      • 각 셀은 고유의 메모리 주소를 갖고, 이 주소는 공간의 위치를 나타내며, 메모리의 크기만큼 정수로 표현된다.
      • 컴퓨터는 모든 데이터를 2진수로 처리하기 때문에 메모리에 저장되는 데이터는 종류 상관없이 모두 2진수로 저장된다.
    • 숫자 값 10과 20은 메모리 상의 임의 위치(메모리 주소)에 기억되고, CPU는 이 값을 읽어들여 연산을 수행한다. 연산 결과로 생성된 숫자 값 30도 메모리 상의 임의의 위치에 저장된다.
    • 연산 결과를 메모리에 저장했지만, 이 값을 다시 사용하기 위해선 메모리 주소에 접근할 필요가 있다. 그러나 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 높기 때문에 자바스크립트는 직접 메모리 제어를 허용하지 않는다.
    • 따라서 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 메커니즘을 제공한다.
  • 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. (값의 위치를 가리키는 상징적인 이름)
  • 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름을 변수 이름(변수명)이라고 하며, 변수에 저장된 값을 변수 값이라고 한다.
  • 변수에 값을 저장하는 것을 할당(assignment, 대입, 저장)이라고 하고, 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라고 한다.

Comment: 변수 생성 및 저장 메커니즘에 대한 부분으로 자바스크립트 뿐 아니라 대부분의 프로그래밍 언어 공통적으로 적용되는 부분이다.

4.2 식별자

  • 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.
  • 식별자는 값이 아니라 메모리 주소를 기억하고 있다. 식별자로 값을 구별해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미다.
  • 변수, 함수, 클래스 등 이름은 모두 식별자다. 네이밍 규칙을 준수해야하며 선언(declaration)에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

4.3 변수 선언

  • 변수 선언이란, 변수를 생성하는 것을 말한다.
  • 변수를 사용하려면 반드시 선언이 필요하며, 변수 선언 시 var, let, const 키워드를 사용한다.

var 키워드

  • var 키워드는 뒤에 오는 변수 이름으로 새로운 변수를 선언할 것을 지시하는 키워드다.
  • 변수 선언에 의해 확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화 된다. (자바스크립트의 독특한 특징)
  • var 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행된다.
  • 초기화란 변수가 선언된 이후 최초로 값을 할당하는 것을 말한다. var 키워드로 선언한 변수를 undefined로 암묵적인 초기화가 자동 수행된다.
  • 초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 애플리케이션이 사용했던 값이 남아있을 수 있는데, 이러한 값을 쓰레기 값(garbage value)이라 한다.
    • 메모리 공간을 확보한 다음, 값을 할당하지 않은 상태에서 곧바로 변수 값을 참조하면 쓰레기 값이 나올 수 있다.
    • var 키워드는 암묵적으로 초기화를 수행하므로 이러한 위험으로부터 안전하다.
  • 만약 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러)가 발생한다.

Comment: 뒷부분에 등장하는 ES6의 let, const 키워드와의 차이점을 꼭 기억해두어야 한다. 참고로 모던 자바스크립트는 var 키워드의 사용을 지양한다.

4.4 변수 선언의 실행 시점과 변수 호이스팅

  • 자바스크립트는 인터프리터에 의해 한 줄씩 순차적으로 실행된다. 이 때, 변수 선언문보다 변수를 참조하는 코드가 앞에 있으면 일반적으로 참조 에러가 발생할 것이라고 예상할 수 있다.
  • 하지만 자바스크립트에서는 위 같은 경우 참조 에러가 아닌 undefined가 출력되는데 그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.
  • 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가 과정을 거치면서 소스코드를 실행하기 위한 준비를 한다.
    • 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다.
    • 이후 모든 선언문을 제외한 코드들을 한 줄씩 실행한다.
  • 즉, 자바스크립트 엔진은 어디에있든 변수 선언을 다른 코드보다 먼저 실행한다.
  • 이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 **변수 호이스팅(variable hoisting)**이라 한다.

Comment: 변수 호이스팅은 자바스크립트 고유의 특징이기 때문에 기억해 두어야 한다.

4.5 값의 할당

  • 변수에 값을 할당할 때는 연산자 = 를 사용한다. 할당 연산자는 우변의 값을 좌변에 할당한다.
  • 변수 선언과 값의 할당을 2개의 문으로 나누어 표현할 수도 있고 하나로 합쳐서 표현할 수 있다.
    • 이때 주의할 점은 변수 선언과 값의 할당 실행 시점이 다르다는 점이다.
    • 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

4.6 값의 재할당

  • 재할당이란 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것을 의미한다.
  • var 키워드로 선언한 변수는 값을 재할당할 수 있다. 현재 변수에 저장된 값을 버리고 새로운 값을 저장하는 것이다.
  • var 키워드로 선언한 변수는 선언과 동시에 undefined로 초기화되기 때문에 엄밀히 말하자면 변수에 처음으로 값을 할당하는 것도 재할당에 해당한다.
  • 값을 재할당 할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수(constant)라 한다.
    • ES6의 const 키워드를 사용하면 재할당이 금지된다.
  • 재할당을 통해 어떤 식별자와도 연결되어 있지 않은 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제된다. 단, 메모리에서 언제 해제될진느 예측할 수 없다.
    • 가비지 콜렉터는 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능을 말한다.
    • 자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어로 가비지 콜렉터를 통해 메모리 누수를 방지한다.

4.7 식별자 네이밍 규칙

  • 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), **달러 기호($)**를 포함할 수 있다.
  • 단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), **달러 기호($)**로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다.
  • 예약어는 식별자로 사용할 수 없다.
    • 예약어 목록은 책 참조
  • 변수는 쉼표로 구분해 하나의 문에서 여러 개를 한번에 선언할 수 있다. (가독성이 나빠진다)
  • 한글이나 일본어 식별자도 사용할 수 있다. (알파벳 외 유니코드는 권장하지 않는다)
  • 대소문자를 구분한다.
  • 좋은 변수 이름은 코드 가독성을 높인다.
  • 변수에 주석이 필요하다면 변수의 존재 목적을 명확히 드러내지 못한 것이다.
  • 네이밍 컨벤션은 하나 이상의 영단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명 규칙이다.
    • 카멜 케이스(camelCase) : 첫 단어의 첫글자는 소문자, 이어지는 단어들의 첫 글자는 대문자
    • 스네이크 케이스(snakecase) : 단어와 단어 사이를 언더스코어()로 연결
    • 파스칼 케이스(PascalCase) : 단어별 첫 글자를 대문자
    • 헝가리언 케이스(typeHungarianCase) : 변수 타입 + 식별자로 변수명 표현

Comment: 식별자 네이밍 규칙은 처음엔 낯설고 귀찮게 여겨질 수 있지만, 실무에서 공통 컨벤션을 적용하는 이유를 생각해보면 왜 규칙이 필요한지 알아야 한다.


© 2022 Developer Abel, Powered By Gatsby.