JavaScript 4장 - 딥 다이브 (1)

JavaScript

변수 34p~

변수

• 컴퓨터는 10 + 20에 대해 10,20.+ 기호의 의미를 알고 있어야 한다.
• 자바스크립트 엔진이 위 코드를 계산하려면 리터럴과 연산자의 의미를 알고 있어야 하며 표현식의 의미도 해석할 수 있어야 한다.
• 컴퓨터가 CPU를 사용해 연산하고 메모리를 사용해 데이터를 기억한다.
• 메모리는 셀의 집합체이며, 셀 하나의 크기는 1바이트(8비트)이다.
  • 1바이트 단위로 데이터를 저장하거나 읽어들인다.
• 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.
  • 하나의 값을 저장하기 위한 것이 변수이지만, 배열이나 객체 같은 자료구조를 사용하여 하나의 값처럼 사용할 수 있다.
• 변수에 값을 저장하는 것을 할당이라하고 값을 불러오는 것을 참조라고 한다.

식별자

• 변수 이름을 식별자라 하고, 어떤 값을 구별하는 고유한 이름이다.
• 식별자는 값이 아니라 메모리 주소를 기억하고 있다.

변수 선언

• 변수를 선언하는 키워드는 var,let,const가 있다.
  • var는 전역 변수로 적용되어 잘 사용하지 않는다.
• 초기화란, 변수가 선언된 이후 최초로 값을 할당하는 것인데, 값을 할당하지 않으면 undefined가 암묵적으로 초깃값으로 수행된다.
• 만약 선언하지 않은 식별자에 접근하면 참조에러가 발생한다.
  • 식별자를 찾을 수 없을 때 발생하는 에러다.

실행 시점과 변수 호이스팅

• 자바스크립트는 인터프리터에 의해 한 줄씩 순차적으로 실행되어, 변수 선언보다 변수를 참조하는 코드가 먼저 쓰이면 참조에러가 발생해야 하지만, 변수 선언이 한 줄씩 실행되는 시점에서,런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문에 변수를 인식한다.
• 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징인 변수 호이스팅이다.

값의 할당

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

• 변수 선언은 런타임 이전에 먼저 실행되지만, 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에서 실행되기 때문에 주의해야 한다.

  console.log(score); // undefined
  
  var score; // 변수 선언
  score = 100; // 값의 할당
  
  console.log(score); // 100
  

• 예시

  • 호이스팅이 먼저 실행되서 초기화가 이루어지지 않고 score = 100이 실행된다.

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

걊의 재할당

• 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수라고 한다.
  • const

식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함할 수 있다.
• 특수문자를 사용할 때는 언더스코어와 달러 기호로 시작해야한다.
• 숫자로 시작할 순 없다.
• 예약어를 사용할 수 없다.
  • await,break,continue,case,default 등
• 쉼표로 구분해 하나의 문에서 여러 개를 한번에 선언할 수 있다.
  • 가독성이 나빠져 권장하지 않는다.

var first-name; // SyntaxError: Unexpected token -
var 1st; // SyntaxError: Invalid or unexpected token
var this; // SyntaxError: Unexpected token this

var firstsname = 1; // 1
var firstName = 2; // 2
var FIRSTNAME = 3; // 3

var x = 3; // 의미하는 바를 알 수 있어야 한다.

var firstName; // 카멜케이스(camelCase)
var first_name; // 스네이크 케이스(snake_case)
var FirstName; // 파스칼 케이스(PascalCase)
var strFirstName; // 헝가리언 케이스(typeHungarianCase) type + identifier
var $ele = document.getElementById('firstName'); // DOM 노드
var observalble$ = fromEvent(document, 'click'); // RxJs 옵져버블

표현식과 문 50p~

값

• 값은 식이 평가되어 생성된 결과를 말한다.

var sum = 10 + 20;
// sum은 30이 할당된다.

리터럴

• 사람이 이해할 수 있는 문자 또는 기호를 사용해 값을 생성하는 표기법을 말한다.
• 문자 그대로가 곧 값이 된다.
• 숫자는 숫자 리터럴, 문자열 리터럴, 불리언 리터럴, 객체 리터럴, 정규 표현식 리터럴 등

표현식

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

var x = 1 + 2;

x + 3; // 6
// 식별자 표현식 x는 3으로 평기된다.

문

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

var sum = 1 + 2;
// var, sum, =, 1, +, 2, ; 모두 토큰이다.

var x; // 변수 선언문
x = 5; // 할당문
function sum (){} // 함수 선언문
if(x>1){...} // 조건문
for(...){...} // 반복문

세미콜론과 세미콜론 자동 삽입 기능

• 세미콜론(;)은 문의 종료를 나타낸다.
• 문을 끝낼 때는 새미콜론을 붙여야 하며, 문을 중괄호로 묶은 코드 블록({…})에는 새미콜론을 붙이지 않는다.
• if, for, 함수 등의 코드 블록 뒤에는 새미콜론을 붙이지 않는다.
  • 코드 블록은 스스로 자체 종결성을 가져서 ( 문의 종료를 의미한다.

• 새미콜론은 생략이 가능하다.

  • 자바스크립트 ㅇㄴ진이 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에 새미콜론을 자동으로 붙여주는 새미콜론 자동 삽입 기능(ASI)이 암묵적으로 수행된다.

  function foo() {
    return;
    {
    }
    // ASI의 결과 => return; {};
    // 개발자의 예측 => return {};
  }
  
  var bar = (function () {})(function () {})();
  // ASI 결과 => function(){}(function(){});
  // 개발자의 예측 => function(){};(function(){});
  

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

• 표현식은 값처럼 사용할 수 있다.
• 선언문은 값처럼 사용할 수 없다.

var x;
x = 1 + 2
// x = 1 + 2는 표현식이면서 완전한 문이기도 하다.

var foo = var x; // SyntaxError: Unexpected token var
// 표현식이 아닌 문은 값처럼 사용할 수 없다.

var x; // 변수 선언문은 표현식이 아닌 문이다.
x = 100; // 할당문은 그 자체가 표현식이지만 완전한 문이기도 하다.

var foo = x = 100; // 표현식인 문은 값처럼 사용할 수 있다.