[ Learning Javascript ] - 리터럴과 변수, 상수, 데이터 타입

smooth97·2019년 9월 21일
0

Learning Javascript

목록 보기
1/12
post-thumbnail

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

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

프로그램을 배울 때 용어의 중요성을 느끼게 되는 내용으로,
리터럴과 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)과 값으로 구성된다. 프로퍼티의 이름은 반드시 문자열 또는 심볼이어야 하며, 다른 객체를 프로퍼티로 지정할 수도 있다. 중괄호 안에서 각 프로퍼티를 쉼표로 구분하고, 이름과 값은 콜론으로 구분한다.

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

Array


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

배열의 특징

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

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

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

Date


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

데이터 타입 변환


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

숫자로 변환

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

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

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

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

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

문자열로 변환

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

Boolean으로 변환

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

profile
Front-end 개발 공부일지

0개의 댓글