모던 자바스크립트 Deep Dive 스터디 5일차

5일차 주요 내용 정리

---

💡 5장 표현식과 문

값

• 값(value)은 식(표현식expression)이 평가(evaluate)되어생성된 결과를 말한다.

리터럴

• 리터럴(literal)은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(notation)을 말한다.

표현식

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

  // 숫자 리터럴 3이자 리터럴 표현식
  3
  
  // 리터럴 표현식
  10
  'hello'
  
  // 식별자 표현식(선언이 이미 존재한다고 가정)
  sum
  person.name
  arr[1]
  
  // 연산자 표현식
  10 + 20
  sum = 10
  sum !== 10
  
  // 함수/메서드 호출 표현식(선언이 이미 존재한다고 가정)
  square()
  person.getName()

문

• 문(statement)은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다.*(문은 여러개의 토큰으로 구성된다.)*
• 문은 아래와 같이 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다.

  // 변수 선언문
  var x;
  
  // 할당문
  x = 5;
  
  // 함수 선언문
  function foo () {}
  
  // 조건문
  if (x > 1) { console.log(x); }
  
  // 반복문
  for (var i = 0; i < 2; i++) { console.log(i); }

---

💡 6장 데이터 타입

데이터 타입 값의 종류

• 구분	데이터 타입	설명
  원시 타입	number	숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재
  	string	문자열
  	boolean	논리적 참(true)과 거짓(false)
  	undefined	var 키워드로 선언된 변수에 암묵적으로 할당되는 값
  	null	값이 없다는 것을 의도적으로 명시할 때 사용하는 값
  	symbol	ES6에서 추가된 7번째 타입
  객체 타입		객체, 함수, 배열 등

숫자 타입

• C나 Java 의 경우, 정수(소수점 이하가 없는 숫자)와 실수(소수점 이하가 있는 숫자)를 구분해서 int, long, float, double 등과 같은 다양한 숫자 타입을 제공한다. 하지만 자바스크립트는 하나의 숫자 타입만 존재한다.
• ECMAScript 사양에 따르면 숫자 타입의 값은 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다.

  // 숫자 타입은 모두 실수로 처리된다.
  console.log(1 === 1.0); // true
  
  // 정수만을 위한 타입이 없고 모든 수를 실수로 처리한다.
  // 그러므로 정수로 표시된다 해도 사실은 실수라는 것을 의미한다.
  console.log(4 / 2); // 2
  console.log(3 / 2); // 1.5

• 숫자 타입은 추가적으로 세 가지 특별한 값도 표현할 수 있다.

  • Infinity : 양의 무한대

  • -Infinity : 음의 무한대

  • NaN : 산술 연산 불가(not-a-number)

    // 숫자 타입의 세 가지 특별한 값
    console.log(10 / 0); // Infinity
    console.log(10 / -0); // -Infinity
    console.log(1 * 'String'); // NaN
    
    // 자바스크립트는 대소문자를 구별하므로 NaN을 NAN, Nan, nan과 같이 표현하면 에러가 발생하므로 주의

템플릿 리터럴

• ES6부터 템플릿 리터럴 이라고 하는 새로운 문자열 표기법이 도입되었다. 템플릿 리터럴은 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능을 제공한다. 템플릿 리터럴은 런타임에 일반 문자열로 변환되어 처리된다.
• 템플릿 리터럴은 백틱(``)을 사용해 표현한다.
• 일반 문자열과 달리 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄바꿈이 허용되며, 모든 공백도 있는 그대로 적용된다.

  // 1.이스케이프 시퀀스(escape sequence) 사용시
  var template = '<ul>\n\t<li><a href="#">Home</a></li>\n</ul>';
  console.log(template);
  
  // 2.템플릿 리터럴(template literal) 사용시
  var template = `<ul>
  	<li><a href="#">Home</a></li>
  </ul>`;
  console.log(template);
  
  // 1,2 출력 결과
  <ul>
  	<li><a href="#">Home</a></li>
  </ul>

표현식 삽입

• 문자열은 문자열 연산자 +를 사용해 연결할 수 있다. +연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. 그 외의 경우는 덧셈 연산자로 동작한다.

  var first = 'Neighbor';
  var last = 'Kim';
  
  // ES5:문자열 연결 (싱글쿼트)
  console.log('My name is ' + first + ' ' + last + '.'); // My name is Neighbor Kim.
  // ES6:표현식 삽입 (백틱)
  console.log(`My name is ${first} ${last}.`); // My name is Neighbor Kim.

  • 표현식을 삽입하려면 ${ }으로 표현식을 감싼다. 이때 표현식의 평가 결과가 문자열이 아니더라도 문자열로 타입이 강제로 변환되어 삽입된다.

    console.log(`1 + 2 = ${1 + 2}`); // 1 + 2 = 3
    console.log('1 + 2 = ${1 + 2}'); // 1 + 2 = ${1 + 2}

  • 템플릿 리터럴이 아닌 일반 문자열에서의 표현식 삽입은 문자열로 취급된다.