러닝 자바스크립트 서적을 통해 공부한 내용을 정리하는 포스팅 시리즈
데이터를 자바스크립트가 이해할 수 있는 형식으로 바꾸는 법을 배우고 정리했습니다.
프로그램을 배울 때 용어의 중요성을 느끼게 되는 내용으로,
리터럴과 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