챕터 4. 변수

자바스크립트 동작 원리

컴퓨터가 계산을 수행하기 위해서는 컴퓨터가 리터럴과 연산자의 의미를 이해해야합니다.

또한, 컴퓨터가 해당 계산식에 대한 의미를 2진수로 파싱할 수 있어야 합니다.

컴퓨터 구동 방식

메모리

- 컴퓨터는 1 바이트 단위로 데이터를 저장 및 읽음
- 각 메모리 셀은 고유 주소를 가짐
- 메모리 주소는 0부터 메모리 크기에 해당하는 숫자까지의 주소를 지님
- 메모리 계산을 위해 ‘10+20’에 해당하는 식은 10, 20, 그리고 결과값인 30이 각각 메모리 주소에 저장됨
- 메모리를 변수에 저장하지 않았으므로 해당 결과값(30)은 메모리에 단순 저장만 된 상태

메모리를 직접 접근하고 제어하는 것은 운영체제에 큰 문제를 야기할 수 있습니다.

또한, 코드가 같더라도 값이 저장되는 메모리 주소는 계속해서 달라집니다.

변수

- 하나의 값을 저장하기 위해 확보한 메모리 공간 그 자체
- 메모리 공간을 식별하기 위해 붙인 이름
- 값을 저장하고 참조하는 메커니즘을 위한, 값의 위치를 가리키는 이름

변수 이름

- 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
- 변수에 지정된 값을 ‘변수값’이라고 함
- 변수에 값을 저장하는 것을 ‘할당’이라고 함
- 변수에 저장된 값을 읽어 들이는 것을 ‘참조’라고 함

📌 변수 이름을 통해 변수에 저장된 값의 의미를 명확히 알 수 있음

📌 따라서 좋은 이름, 저장된 값의 의미를 파악할 수 있는 변수 이름을 설정해야함

- 변수 이름을 식별자라고도 함
- 식별자란, 특정 값을 구별해서 식별할 수 있는 고유한 이름
- 이름을 통해서 각각의 값들을 구분할 수 있음
- 식별자는 메모리 주소를 기억해야함
- 식별자는 값이 아닌, 메모리 주소를 기억하는 것을 꼭 주의!!

주의할 점

• 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자
  ex) 함수, 클래스, 변수, 변수 이름 등등
• 함수와 클래스와 같은 식별자는 네이밍 규칙을 준수해야함

변수 선언

- 변수를 생성하는 것을 의미함
- 메모리 주소 확보 및 해당 주소와 변수 이름을 연결하여 특정 값을 저장하게함

• 변수 선언 방식
  - let
  - const
  - var

• var는 block level scope를 지원하지 않아, 전역 변수가 선언됩니다.

• 변수를 선언한 경우, 값이 할당되지 않았다면 ‘undefined’가 할당되며, 이러한 과정을 ‘초기화’라고 합니다.

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

  • 자바스크립 트 엔진은 2단계에 거쳐 변수 선언을 수행
    1. 선언 : 변수 이름을 등록하여 자바스크립트 엔진에 알림
    2. 초기화 : 값을 저장하기 위한 메모리 공간 확보, undefinde 할당
       • 초기화를 하지 않으면 이전 앱에서 사용한 데이터가 남아있을 수 있음
  • 변수 이름을 포함한 모든 식별자는 ‘실행 컨텍스트’에 등록됨
    • 실행 컨텍스트
      • 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경 제공
      • 코드 실행 결과 관리
      • 식별자와 스코프 관리
      • 변수 이름, 변수 값은 컨텍스트 내에서 객체 형태로 등록 및 관리
  • 선언하지 않은 식별자에 접근하고자 할 때
    • ReferenceError가 발생
    • 등록된 식별자를 찾지 못하는 경우 해당 에러 발생

• 변수 선언과 호이스팅

  • 소스 코드는 일반적으로 블록 단위로 실행되지만,(run time)
  • var에 의한 변수 선언은 그 이전 단계에서 먼저 실행됨
    • 변수 선언, 함수 선언 등은 소스코드 실행 이전에 먼저 실행됨
    • 그 이후, 소스코드가 한 줄씩 순차적으로 실행됨
  • 변수 호이스팅
    • 이렇게 변수 선언문이 코드 맨 처음으로 끌어올려 지는 것과 같은 현상을 말함

• 할당

  • 할당 연산자는 =이며, 우변의 값을 좌변의 변수에 할당하는 역할을 함

    var score; // 변수 선언 
    score = 100; // 변수 할당

  • 단축문 : 해당 선언과 할당 과정은 아래와 같이 단축 가능

    var = 100;

    📌 주의 : 단축문 역시도, 선언은 런타임 이전에 먼저 실행되지만, 할당은 소스코드가 순차적으로 실행되는 시점에 실행됨

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

  • 1개의 문에서도 먼저 선언이 이루어지고 할당을 하는 2단계로 수행됨

    • 변수 이름을 지정하고 해당 변수명과 메모리 주소를 연결하여, undefined를 할당
    • 할당을 위한 새로운 메모리 주소와 값을 변수 이름에 연결하여 해당 값을 할당
      • 이 때 undefined 메모리 주소에는 그대로 남아있고 새로운 메모리 주소에 새로운 값이 차지하게 됨

• 재할당

  • 할당된 값이 있는 변수에 새로운 값을 할당하는 것

  • undefined에서 새로운 값을 할당하는 것 역시도 재할당

  • const는 단 한 번만 할당 가능(재할당 금지)

    📌 const로 선언 및 할당한 변수를 재할당하는 경우, TypeError 발생

  • 변수와 연결되지 않은 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제되지만, 언제 해제될지는 예측할 수 없음

• 식별자 네이밍 규칙

  • 특수문자를 제외한 문자, 숫자, _, 달러 기호 포함 가능
  • 특수문자를 제외한 문자, _, 달러 기호로 시작해야함
    • 숫자로 시작하는 것은 허용하지 않음
  • 예약어와 동일한 문자 사용 불가능
    • 예약어
      1. await
      2. break
      3. case
      4. catch
      5. class
      6. const
      7. continue
      8. debugger
      9. default
      10. delete
      11. do
      12. else
      13. enum
      14. export
      15. extends
      16. false
      17. finally
      18. for
      19. function
      20. if
      21. implements
      22. import
      23. in
      24. instanceof
      25. interface
      26. let
      27. new
      28. null
      29. package
      30. private
      31. protected
      32. public
      33. return
      34. super
      35. static
      36. switch
      37. this
      38. throw
      39. true
      40. try
      41. typeof
      42. var
      43. void
      44. while
      45. with
      46. yield
  • 변수 이름은 한줄의 코드에서 ,를 이용하여 한꺼번에 선언 가능

    var player1, player2, ...;

  • 유니코드 문자(한국어나 일본어 등)을 사용할 수 있으나 권장되지 않음
  • 변수 이름은 대소문자를 구별하기 때문에 이를 주의해야함
  • 별도의 주석 없이도 변수의 존재 목적을 드러내야함
  • 자바스크립의 경우 변수와 함수는 카멜 케이스
  • 생성자 함수와 클래스의 경우 파스칼 케이스 사용

챕터 5. 표현식과 문

• 값
  • 표현식이 평가되어 생성된 결과
  • 평가 : 식을 해석해서 값을 생성하거나 참조하는 것
    • ex) 덧셈을 수행하는 코드는 해당 식을 평가하여 덧셈을 수행한 결과를 생성함
  • 모든 값은 데이터 타입을 가짐
    • 해당 데이터 타입에 따라 같은 숫자가 저장되더라도 다른 의미로 해석됨

      var sum = 1+2

    • sum이라는 변수명에는 1+2가 할당되는 것이 아닌, 1+2의 결과값이 할당됨
• 리터럴
  • 약속된 기호를 사용한 문법을 이용하여, 값을 생성하는 표기법
    • 값을 생성하기 위해 미리 약속한 표기법
  • 숫자 1,2는 단순한 숫자가 아니라 숫자 리터럴에 해당
    • 자바스크립트는 리터럴 1을 코드에 작성하면 엔진에서 이를 평가하여 숫자 1을 생성함
    • 자바스크립트 엔진은 런타임에 리터럴을 평가하여 값을 생성
  • 리터럴 예시
    • 정수 리터럴
      • 1
    • 부동소수점 리터럴
      • 1.0
    • 2진수 리터럴
      • 1001
    • 8진수 리터럴
      • 0o111
    • 16진수 리터럴
      • 0x40
    • 문자열 리터럴
      • ‘ ’
    • 불리언 리터럴
      • true, false
    • null
    • undefined
    • 객체 리터럴
      • {key : value}
    • 배열 리터럴
      • [item1, item2]
    • 함수 리터럴
      • function( ) { }
    • 정규 표현식 리터럴
      • /[A-Z]+/g
• 표현식
  • 값으로 평가될 수 있는 코드 명령ㅁ
  • 표현식이 평가되고 새로운 값을 생성하거나 기존 값을 참고함
  • 리터럴 역시 표현식
• 명령문
  • 프로그램을 구성하는 기본 단위
  • 최소 실행 단위
  • 명령문은 여러 토큰으로 구성됨
    • 토큰은 문법적인 의미를 지니며 더이상 나눌 수 없는 코드의 요소를 의미
  • 명령문의 종류
    • 선언문
    • 할당문
    • 조건문
    • 반복문
• 표현식인 문과 표현식이 아닌 문의 차이
  • 문은 표현식을 아우르는 더 넓은 개념
  • 표현식은 값으로 평가되어 변수에 할당 가능
  • 표현식이 아닌 문은 값으로 평가할 수 없으므로 변수에 할당하면 에러 발생

    const y = x = 100

    • 위와 같은 코드에서 x = 100은 할당문이며 이는 할당한 값으로 평가됨
    • 따라서 y에는 100이 할당되며 오류가 발생하지 않음
  • 크롬 개발자 도구에서 표현식이 아닌 문을 실행 시에는 undefined 출력
    • 표현식인 문을 실행 시에는 평가된 값을 출력

챕터 6. 데이터 타입

• 데이터 타입
  • 값의 종류를 뜻함
  • 모든 자바스크립트 내에서의 값은 데이터 타입을 지님
  • 데이터 타입은 총 7개의 종류며 이는 원시 타입, 객체 타입으로 분류 가능
• 원시 타입
  • 숫자 데이터
    • 다른 언어와 달리 숫자는 64비트 부동소수점 형식을 따름
    • 모든 숫자는 실수로 처리
    • 특별한 숫자 타입
      • Infinity
      • -Infinity
      • NaN : 산술 연산 불가
  • 문자열
    • 텍스트 데이터
    • 0개 이상의 16비트 유니코드 문자의 집합
    • 따옴표로 감싸게 된 경우에는 공백 역시도 문자로 인식됨
    • 변경이 불가능한 값
    • 템플릿 리터럴
      • 백틱 기호 사용
      • 런타임에 일반 문자열로 변환되어 처리됨
      • 편리한 문자열 처리 기능 제공
        • 멀티라인 문자열
          • 일반 문자열은 줄바꿈이 허용되지 않음 (SyntaxError)
          • 따라서 이스케이프 시퀀스를 사용해야함(\n)
          • 하지만 템플릿 리터럴에서는 공백이 그대로 적용됨
        • 표현식 삽입
          • 내에서 ${ }으로 표현식을 감싸서 표현식 삽입 가능
          • 표현식의 결과가 문자열이 아니면, 문자열로 타입이 강제로 변환됨
        • 태그드 템플릿
  • 불리언 : true or false
  • undefined : 암시적으로 할당된 값
  • null : 명시적으로 값이 없는 경우에 사용하는 값
    • document.querySelector 메소드는 선택자에 맞는 요소를 찾지 못하는 경우에 null 값을 에러 대신에 반환함
  • symbol
    • 변경 불가능한 원시 타입의 값
    • 다른 값과 중복되지 않는 값
      • 주로 충돌 위험이 없는 객체의 프로퍼티 키를 만들기 위해 사용
      • 사용 예시

        const name = Symbol('이름');
        
        const obj = {};
        obj[name] = 'Hyeseong Oh'

• 객체 타입
  • 객체
  • 함수
  • 배열
• 데이터 타입의 필요성
  • 자바스크립트 엔진은 값의 종류에 따라 정해진 크기의 공간을 확보한 후, 값을 메모리에 저장함
  • 값을 참조하기 위해서 한 번에 읽어들여야할 메모리의 크기를 알아야함
    • 또한, 숫자의 경우 64비트 부동소수점 형식을 이용하기 때문에 8바이트로 저장됨
    • 따라서 8바이트 단위로 값을 읽어들이지 않으면 값이 훼손됨
  • 심벌 테이블 자료 구조
    • 컴파일러 혹은 인터프리터가 식별자를 객체 형태로 바인딩 된 해당하는 값의 메모리 주소, 데이터 타입, 스코프 등을 관리함
• 동적 타이핑
  • 정적 타입 언어와 달리 변수에 어떠한 타입의 데이터를 할당시킬 수 있음
  • 선언이 아닌 할당에 의해 데이터의 타입이 결정됨 (type inference)
  • 재할당에 의해 언제든지 동적으로 변수의 타입이 변할 수 있는 언어 = 동적 타입 언어
  • 단점
    • 변수의 값을 추적하기 어려움
    • 변수의 타입을 확신할 수 없음
      • 엔진에 의해 자동으로 변경되는 경우에는 더더욱
  • 변수는 최소한의 수로 작성
  • 스코프를 최대한 좁게 만들기
  • 전역 변수는 최대한 사용하지 않기
  • 상수를 사용하기