[모던 자바스크립트 DeepDive] 4일차 - Vscode 확장 플러그인, 변수

본 문서는 "모던 자바스크림트 DeepDive"를 데일리로 학습하며 기억할 부분과 추가학습한 부분을 공유한다.

 

 

1. Vscode 확장 플러그인

• Code Runner : js파일 실행
• Live Server : HTML > 브라우저에서 띄워줌

 

2. 변수

• 기본적으로 데이터를 입력 받고 출력한다는 사실은 모든 애플리케이션에 포함된다.

자바스크립트 엔진의 해석과정 예시

1. 먼저, 연산자 좌변과 우변의 피연산자를 기억한다.
2. 이때의 리터럴과 연산자의 의미를 알고 있어야한다.
3. 위의 코드를 평가(evaluation)하기 위해 위의 과정이 필요하다.
4. 이를 기반으로 파싱하여야한다.

• 위와 같은 연산을 위해서 컴퓨터는 CPU로 연산하고, 메모리로 데이터를 기억한다.
  • 메모리 = 셀의 집합
  • 셀 하나 = 1바이트(8비트).  => 셀단위로 데이터 저장 또는 읽음
  • 각 셀에는 메모리 주소가 있다. = 공간의 위치
• 데이터 처리 : 2진수 처리 (위의 표현식의 결과인 30 역시 저장되며, 이는 2진수 형태로 저장된다.)
• 자바스크립트 개발자가 메모리에 직접접근이 불가하며, 메모리 주소는 코드 실행시점마다 변경된다.
  => "변수" 는 하나의 값을 저장하기 위한 메모리 공간/ 이름을 의미한다.
  => 직접 메모리 접근 없이 변수로 안전하게 사용이 가능하다.
• 할당(assignment) : 변수에 값 저장
• 참조( reference) : 변수 저장 값 읽음
• 변수명
  • 가독성을 높이는 부수적인 역할
  • 코드 = 개발자의 문서
  • 변수명 == 식별자
    • 특정 값을 식별할 수 있는 고유 이름
    • 값이 아닌 메모리 주소를 기억한다
    • 선언(declaration)으로 자바스크립트 엔진에 식별자 존재 노티
• 변수선언
  • 변수사용을 위해서는 선언필요 (const, let, var)
    • 스코프 : 변수가 유효하게 접근 가능한 코드의 범위
    • Var : 함수레벨 스코프(function-level scope) 특정 함수 단위로만 묶임
      • ES6부터는 사용지양이지만, 이전 버전도 지원하기에 사용은 가능하다.
    • Let, const : 블록레벨 스코프(block-level scope)로  중괄호 단위로 묶임

// var : 함수레벨 스코프
function test() {
  if (true) {
    var x = 10;
  }
  console.log(x); // ✅ 10 (동작함!)
}
test();

// let, const : 블록레벨 스코프
function test() {
  if (true) {
    let y = 20;
  }
  console.log(y); // ❌ ReferenceError: y is not defined
}
test();