모던 자바스크립트] 문 / 데이터 타입(상)

문

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위입니다.

문의 집합으로 이뤄진 것이 프로그램이며, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍입니다.

문을 명령문이라고도 부릅니다.

문은 선언문, 할당 문, 조건문, 반복문 등으로 구분할 수 있습니다.

// 변수 선언문
let x;

// 할당문
x = 5;

// 함수 선언문
function foo () {}

// 조건문
if(x > 1) console.log(x);

// 반복문
for(let i=0; i < 2; i++){
  console.log(i)
}

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

표현식은 문의 일부일 수 있고 그 자체로 문이 될 수도 있습니다.

// 변수 선언문은 값으로 평가될 수 없으므로 표현식이 아닙니다.
let x;
// 1, 2, 1 + 2, x = 1 + 2는 모두 표현식입니다.

표현식인 문은 값으로 평가될 수 있는 문이며, 표현식이 아닌 문은 값으로 평가될 수 없는 문을 말합니다.

// 표현식이 아닌 문은 값처럼 사용할 수 없습니다.
let foo = let x; // SyntaxError

위 예제의 변수 선언문은 표현식이 아닌 문입니다.

변수 선언문은 값처럼 사용할 수 없습니다.

// 변수 선언문은 표현식이 아닌 문입니다.
let x;

// 할당문은 그 자체가 표현식이지만 완전한 문이기도 합니다. 할당문은 표현식인 문입니다.
x = 100;

// 표현식인 문은 값처럼 사용할 수 있습니다.
let foo = x = 100;
console.log(foo) // 100

---

데이터 타입

데이터 타입은 값의 종류를 말합니다.

자바스크립트는 7개의 데이터 타입을 제공합니다.

7개의 데이터 타입은 원시 타입과 객체 타입으로 분류할 수 있습니다.

원시 타입

1. 숫자 타입 : 숫자) 정수와 실수 구분 없이 하나의 숫자 타입만 존재합니다.
2. 문자열 타입 : 문자열
3. bool 타입 : 참과 거짓
4. undefined타입 : var 키워드로 선언된 변수에 암묵적으로 할당되는 값
5. null 타입 : 값이 없다는 것을 의도적으로 명시할 때 사용하는 값
6. 심벌 타입 : ES6에서 추가된 7번째 타입

객체 타입

1. 객체
2. 함수
3. 배열

타입은 왜 중요할까요?

숫자 타입의 1과 문자열 타입의 값 '1'은 비슷해 보이지만 전혀 다른 값입니다.

숫자 타입의 값 1과 문자열 타입의 값 '1'은 값을 생성한 목적과 용도가 다르기 때문입니다.

숫자 타입의 값은 주로 산술 연산을 위해 생성하지만 문자열 타입의 값은 주로 텍스트를 화면에 출력하기 위해 생성합니다.

숫자 타입

자바스크립트에서는 모든 수를 실수로 처리합니다.

// 모두 숫자 타입입니다.
let integer = 10; // 정수
let double = 10.12; // 실수
let nagative = -20; // 음의 정수

// 숫자 타입의 세 가지 특별한 값
console.log(10 / 0); // Infinity
console.log(10 / -0); // -Infinity
console.log(1 * 'string); // NaN

문자열 타입

문자열 타입은 텍스트 데이터를 나타내는 데 사용합니다.

문자열은 작은따옴표 혹은 큰따옴표 또는 백 틱으로 텍스트를 감쌉니다.

// 문자열 타입
let string;
string = '문자열';
string = "문자열";
string = `문자열`;

템플릿 리터럴

템플릿 리터럴은 멀티라인 문자열, 표현식 삽입, 태그도 템플릿 등 편리한 문자열 처리 기능을 제공합니다.

템플릿 리터럴은 런타임에 일반 문자열로 변환되어 처리됩니다.

템플릿 리터럴은 백 틱을 사용해 표현합니다.

let template = `<ul>\n\t<li><a href="#">Home</a></li>\n</ul>`

console.log(template);

// 출력 결과
<ul>
  <li><a href="#">Home</a></li>
</ul>

위와 같이 표현할 수 있지만 일반 문자열과 달리 줄 바꿈이 허용 되며 모든 공백도 있는 대로 적용됩니다.

let template = `<ul>
  <li><a href="#">Home</a></li>
</ul>`

console.log(template);
// 출력 결과

<ul>
  <li><a href="#">Home</a></li>
</ul>

표현식 삽입

let first = 'woo';
let last = 'dong';

console.log('My name is ' + first + ' ' + last + '.')
// My name is woo dong.

// 템플릿 리터럴 이용하기
console.log(`My name is ${first} ${last}.`);
// My name is woo dong.

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