러닝 자바스크립트 서적을 통해 공부한 내용을 정리하는 포스팅 시리즈

데이터를 자바스크립트가 이해할 수 있는 형식으로 바꾸는 법을 배우고 정리했습니다.

프로그램을 배울 때 용어의 중요성을 느끼게 되는 내용으로,
리터럴과 value가 어떻게 다른지 expression과 statement이 어떻게 다른지 이해하지 못하면 프로그램 언어를 배우는 데 장애가 될 수 있다. 이런 용어는 자바스크립트는 물론 컴퓨터 과학 전반에서 사용하는 용어이기 때문에 개념을 잘 이해하는 것도 중요하지만, 용어에 관심을 가지면 배운 언어에 관한 지식을 다른 언어에도 적용할 수 있고 더 많은 소스에서 배울 수 있다.

let & const


let

변수 (variable)란 간단히 말하면 이름이 붙은 값으로, 값이 언제든 바뀔 수 있다. let은 변수 선언에만 쓰이고, 각 변수는 한 번만 선언할 수 있다.

변수 선언 시 초기값을 지정하지 않으면 암시적으로 undefined가 할당된다.

let target; = undefinded

let 문 하나에서 변수 여러개를 선언할 수 있다.

let target = "room1", place = "lobby";

const

상수 constant 변수와 마찬가지로 값을 할당받을 수 있고, 값은 바꿀 수 없다.

const target = "room1"

변수와 상수 중 어떤 것을 써야할까

될 수 있으면 변수보다 상수를 써야 한다. 데이터의 값이 아무 때나 바뀌는 것보다는, 고정된 값이 이해하기 쉽고 에러를 일으키는 상황을 줄일 수 있기 때문이다.

식별자 이름

변수와 상수, 함수 이름을 식별자 (identifier)라 부른다.
자바스크립트 식별자 표기법으로 가장 널리 쓰는 두 가지로 단어의 중간중간 대문자로 표기한 카멜 케이스 (camelCase) 와 언더바를 사용한 표기 스네이크 케이스 (snake_case)가 있고 카멜 케이스가 비교적 많이 쓰인다.

리터럴

리터럴 (literal)이라는 단어는 값을 프로그램 안에서 직접 지정한다는 의미로 값을 만드는 방법이다.

원시 타입과 객체


자바스크립트의 값은 원시 값 (primitive) 또는 객체 (object)이다.
문자열과 숫자 같은 원시 타입은 불변이다. 숫자 5는 항상 숫자 5이고 문자열 "alpha" 도 항상 문자열 "alpha"이다. 문자열을 병합한 경우 수정한 것이 아니라 서로 다른 문자열을 병합했을 뿐이다.

원시타입

  • Number
  • Sting
  • Boolean
  • null
  • undefined
  • Symbol

6가지 원시타입 외에 객체가 있다. 원시 값과는 달리 객체는 여러 가지 형태와 값을 가질 수 있다.
객체의 유연한 성질 때문에 커스텀 데이터 타입을 만들 때 객체를 많이 사용하고 자바스크립트에는 몇 가지 내장된 객체 타입이 있다.

내장객체

  • Array
  • Date
  • RegExp
  • Map과 WeekMap
  • Set과 WeekSet

Object


객체는 여러 가지 값이나 복잡한 값을 나타낼 수 있으며, 변할 수도 있다.
객체의 콘텐츠는 프로퍼티 (property) 또는 멤버 (member)라고 부르며, 프로퍼티는 이름(key)과 값으로 구성된다. 프로퍼티의 이름은 반드시 문자열 또는 심볼이어야 하며, 다른 객체를 프로퍼티로 지정할 수도 있다. 중괄호 안에서 각 프로퍼티를 쉼표로 구분하고, 이름과 값은 콜론으로 구분한다.

const sam1 = {
    name: 'Sam',
    age: 4,
};

const sam2 = { name: 'Sam', age: 4 }; // 한 줄 선언방식

const sam3 = {                         
    name: 'Sam',
    familly: {            // 프로퍼티 값도 객체가 될 수 있다. 
         mom: 'July',
        dad: 'Jon',
        dog: 'Page'
    }
}

세 가지 객체를 만들었는데 sam1과 sam2의 프로퍼티는 같지만, 서로 다른 객체이다.
객체의 프로퍼티에 접근하는 방식은 멤버 접근 연산자 (.) 또는 []를 써야 한다.

sam.familly.mom;      // 'July' 
sam.familly[mom];    // 'July' 

Array


자바스크립트의 배열은 특수한 객체이다. 배열 콘텐츠에는 항상 순서가 있고, 키는 순차적인 숫자이다. 유용한 메서드를 가진 강력한 데이터 타입이다.

배열의 특징

  • 배열의 크기는 고정되지 않고 언제든 요소를 추가하거나 제거할 수 있다.
  • 요소의 데이터 타입을 가리지 않는다.
  • 배열의 요소는 0으로 시작한다.

자바스크립트의 배열 리터럴은 [ ] 대괄호 안에 배열 요소를 쉼표로 구분해서 쓴다.

const array1 = [ 1, 2, 3, 4 ];

const array2 = [ 1, 'two', 3, null];    // 여러가지 타입으로 구성된 배열

const array3 = [                
    {name: 'Ruby', age: 11},     // 객체가 들어있는 배열
    {name: 'Dia', age: 5},
    {name: 'Topaz', age: 17},
];

const array4 = [            // 배열이 들어있는 배열
    [ 1, 5, 19 ],
    [ 43, 8, 34 ],
];

배열 요소에 접근할 때는 대괄호 안에 요소의 인덱스 숫자를 쓴다.

array1[0]  // 1
array3[1] // {name: 'Dia', age: 5}

Date


자바스크립트의 날짜와 시간은 내장된 Date 객체에서 담당한다.
현재 날짜와 시간을 나타내는 객체를 만들 때는 new Date() 를 사용하고 객체의 필요한 부분을 가져 올 수 있다.

const now = new Date();
now; // Sat Sep 21 2019 13:08:19 GMT+0900 (한국 표준시)

    now.getFullYear(); // 2019
    now.getMonth(); // 8
    now.getDate(); // 21
    now.getDay(); // 6
    now.getHours(); // 13
    now.getMinutes(); // 12
    now.getSeconds(); // 58
    now.getMilliseconds(); // 589

데이터 타입 변환


데이터 타입을 다른 타입으로 바꾸는 일은 매우 자주 하는 작업이다. 사용자 입력이나 다른 시스템에서 가져온 데이터를 그대로 쓸 수 있는 경우는 별로 없고, 대개 변환해야 하기 때문이다.

숫자로 변환

자바스크립트에서 문자열을 숫자로 바꾸는 방법엔 몇 가지 있습니다.

  • Number 객체 생성자를 사용하는 방법

    const numStr = '33.3';
    const num = Number(numStr) // 33.3

    숫자로 바꿀 수 없는 문자열에서는 NaN이 반환됩니다.

  • parseInt 또는 parseFloat 함수를 사용하는 방법

Number 생성자와 비슷하게 동작하지만 몇 가지 다른 점이 있다.
숫자로 판단할 수 있는 부분까지만 변환하고, 그 뒤에 있는 문자열은 무시한다.
parseInt를 사용할 때는 기수 (radix)를 넘길 수 있다. 기수는 변환할 문자열이 몇 진수 표현인지 지정한다.

const a = parseInt("16 volts", 10);  //volts는 무시 값은 16
const b = parseFloat("15.5 kph")    //parseFloat의 기수는 항상 10 값은 15.5

문자열로 변환

자바스크립트의 모든 객체에서는 문자열 표현을 반환하는 toString() 메서드가 있다. 문자열 병합에서 자동으로 숫자를 문자열로 변환하므로, 숫자를 문자열로 바꿀 일은 많지 않다.

const a = 33.5;   // 33.5 
const b = a.toString();  // '33.5'

Boolean으로 변환

부정 연산자 ! 를 사용해서 모든 값을 불리언으로 바꿀 수 있다.
한 번 사용하면 '참 같은 값'은 false 로 바꾸고 한번 더 쓰면 true를 얻을 수 있다.

const n = 0;    // 거짓 같은 값
const b1 = !n;    // true
const b2 = !!n;    // false