자바스크립트가 처음이라구요?

자바스크립트 시작하기

기초 지식 한 스푼

시작하기

여러분은 혹시 프로그래밍을 가장 빨리 배울 수 있는 방법을 알고 계신가요?

제가 생각하는 프로그래밍을 가장 빨리 배울 수 있는 방법은 바로 그냥 해보는 겁니다. 사실 대부분의 우리들은 잘 모르는 것을 접했을 때의 익숙하지 않은 느낌을 싫어하죠. ^^;

제 경우도 마찬가지였습니다. 프로그래밍을 처음 접했을 때의 그 낯선 느낌이란.. 과연 내가 이걸 배울 수 있을까? 이거 외계인이 쓰는 언어아냐? 하는 느낌이었죠. 게다가 오직 순수한 디자이너의 삶(?)만을 원하던 제게 프로그래밍이란 것은 너무나 낯설고 어렵게만 느껴졌었죠.

하지만 다행스럽게도 우리에게는 그런 혼란스러움과 낯설음을 어떻게든 극복할 수 있는 힘이 있습니다. 코딩이 뭔지도 몰랐던 저조차도 결국은 어느 정도의 간단한 프로그래밍은 직접 작성 할 수 있게 되었으니까요! ^^

여전히 프로그래밍이 낯설고 두렵게 느껴지시나요? 그렇다면 학습을 시작하기 전에 이것 하나만 기억하세요.

자신이 모르는 모든 것을 완벽하게 다 이해해야 할 필요는 없습니다.프로그래밍에서 이런 관점은 특히 중요해요. 프로그래밍의 세계에서는 오히려 단순한 흥미나 취미로 간단한 코드를 직접 짜보고 코딩을 꾸준히 즐기는 사람이 더 뛰어난 프로그래머가 되는 경우가 많거든요. 꾸준히 즐기다 보면 모르는 것도 결국 알게 됩니다. 노력하는 사람은 즐기는 사람을 이길 수 없다고 하잖아요. ^^

여러분도 강좌를 보다가 잘 이해가 되지 않거나 모르는 것을 완전히 이해하려고 하지 말고 하나씩 하나씩 꾸준히 공부해보세요. 사실 완전히 이해하는 것보다 꾸준히 하는 것이 더 중요합니다.

그럼 일단 무작정 시작해볼까요? 생각보다 별거 아니라는 것을 느끼실꺼예요. 우선 모든 프로그래밍의 고전인 “Hello, World”를 출력하는 자바스크립트 코드를 작성해보겠습니다. 먼저 크롬 브라우저를 띄워주세요. 그리고 키보드의 F12를 누르면 개발자 도구라는 것이 열립니다. 개발자 도구가 열리면 하단에 콘솔창이라는 것이 보이는데요, 이 창은 앞으로 자바스크립트를 공부하면서 자주 사용하게 될 테니 익숙해지셔야 합니다!

아래 쪽의 노란 바탕에 알 수 없는 메시지들이 출력되어 있는 곳이 바로 크롬 개발자 도구의 콘솔창이예요.

만약 콘솔 창이 보이지 않는다면 우측 상단의 더보기 아이콘을 눌러 Show console drawer를 선택해주세요. 그러면 화면의 하단에 콘솔창이 열립니다. 열렸나요? 그럼 콘솔에 커서를 이동시키고 아래와 같이 코드를 입력하고 엔터를 눌러보세요.

console.log("Hello, World");
Hello, World

입력된 코드를 실행한 결과가 아래처럼 콘솔창에 잘 출력되었나요?

콘솔창에서 간단한 코드를 작성하고 엔터를 누르면 바로 결과가 출력되요.

여담이지만 이 “Hello, World” 를 출력하는 기본 예제는 아마도 앞으로 여러분이 배우게 될 대부분의 프로그래밍 언어에서 가장 처음 배우게 될 예제이자 가장 많이 만나게 될 세상에서 가장 유명한 예제예요. 이 유명한 예제는 벨 연구소의 컴퓨터 과학자 브라이언 커니핸 이라는 사람이 1972년에 처음으로 사용했다고 하네요.

어떤 위대한 프로젝트라도 처음에는 이 Hello, World 처럼 아주 간단하고 쉬운 아이디어에서 출발했겠죠? 아주 복잡하고 아름다운 건물도 처음에는 기초를 다지고 벽돌을 하나하나 쌓아나가야 완성되는 것처럼 말이예요.

Hello, World를 프로그래밍이라는 광활한 바다를 항해하는 우리의 위대한 여정의 시작을 알리는 출사표라고 생각하세요. 자꾸 이야기가 딴데로 샜는데요, 지금부터는 정말로 본격적인 자바스크립트의 세계로 뛰어들어가 보겠습니다. 같이 가실꺼죠? ^^

자바스크립트의 개발환경

자바스크립트는 현재 서버, 스크립트, 데스크톱, 브라우저 등 다양한 분야에서 활용되는 팔방미인 언어입니다. 물론 이미 알고 계실지도 모르지만 전통적으로는 웹에서 가장 많이 사용되던 언어였어요.

자바스크립트 프로그래밍을 위해서는 웹 브라우저와 효율적인 코딩 작업 환경을 만들어주는 텍스트 에디터가 필요합니다.

크롬, 엣지, 파이어폭스, 오페라와 같은 웹 브라우저들은 모두 ES6 자바스크립트를 훌륭하게 지원합니다. 즉 앞에서 이야기한 어떤 브라우저에서라도 여러분이 작성하는 자바스크립트 코드를 테스트하고 확인 할 수 있습니다. 아쉽지만 IE는 예외예요. 혹시라도 IE11 이하의 웹 브라우저를 사용하고 계시다면.. 다른 브라우저를 이용해주세요. 본 클래스에서는 가장 대중적인 웹 브라우저인 크롬을 기본 브라우저로 사용하겠습니다.

텍스트 에디터의 경우 매우 다양하고 훌륭한 제품이 존재합니다. 물론 자바스크립트는 어떤 텍스트 에디터를 사용해도 상관이 없습니다. 심지어 메모장으로도 코딩이 가능하죠. 그런데 왜 굳이 텍스트 에디터를 사용해야 하냐구요? 전문적인 텍스트 에디터는 코드 하이라이트, 코드 자동 완성 등의 다양하고 편리한 기능을 제공해주어 보다 빠르고 효율적으로 코딩을 할 수 있기 때문입니다. 가능하다면 자신에게 잘 맞는 텍스트 에디터를 선택하여 사용하는 것이 좋습니다.

대표적인 텍스트 에디터로는 아톰, 서브라임 텍스트, 비주얼 스튜디오 코드, 노트패드++등이 있습니다. 본 클래스에서는 무료이지만 강력한 기능을 제공해주는 비주얼 스튜디오 코드를 사용하도록 하겠습니다.

자바스크립트에 주석달기

주석은 코드를 작성하는 사람이나 함께 작업하는 다른 사람들을 위해 달아 놓는 일종의 설명 글이라고 할 수 있습니다. 프로젝트의 규모가 커지면 코드만 봐서는 어떤 동작을 하는 것인지 파악하는 것이 어려울 수 있기 때문에 주석을 참고하여 작업 할 수 있도록 최대한 자세하게 주석을 달아 놓는 것이 좋습니다. 특히 본인이 작성한 코드라도 시간이 지난 후에는 쉽게 이해가 되지 않는 경우도 많기 때문에 자세한 주석을 습관화하는 것을 추천드립니다. ^^

자바스크립트에서는 두 가지 방법으로 주석을 사용할 수 있습니다. 하나는 두 개의 슬래시( //)를 사용하여 표시하는 인라인 주석이고 다른 하나는 /*로 시작해서 */로 끝나는 블록 주석입니다.

/**
 * 이것은 블록 주석입니다.
 * 이렇게 여러 줄로도 작성할 수 있죠.
 * 자바스크립트는 인라인 주석과 블록 주석의 내용을 무시합니다.
 * 주석을 다는 것은 좋은 습관이예요.
 */
console.log("Hello, World"); // 이것은 인라인 주석입니다.
Hello, World

변수와 상수 그리고 리터럴

변수와 상수

컴퓨터는 모든 데이터를 0과 1로 처리합니다. 하지만 컴퓨터가 아닌 인간이 직접 모든 데이터를 0과 1로 처리하는 것은 불가능한 일이겠죠? 그래서 우리는 데이터를 0과 1이 아닌 우리에게 익숙한 숫자, 날짜, 텍스트 등의 형태로 다룹니다.

자바스크립트에서는 숫자와 날짜, 텍스트 처럼 우리가 실제로 다루는 데이터의 형태를 데이터 타입이라고 합니다. 그리고 이런 데이터 타입을 처리하기 위해 변수와 상수 그리고 리터럴이라고 하는 데이터 메커니즘을 사용합니다.

변수상수는 데이터를 담는 일종의 그릇이라고 할 수 있습니다. 변수는 언제든 값을 바꿀 수 있지만 상수는 한번 담아놓은 값을 바꿀 수 없는 그릇입니다. 그래서 변수와 상수는 각각 다른 키워드를 사용하여 선언을 합니다.

변수는 아래와 같이 let이라는 키워드를 사용하여 선언할 수 있습니다.

let berkshire = "버크셔 헤서웨이";

위와 같이 변수를 선언하고 초기값을 할당하거나, 변수만 선언해놓고 나중에 변수에 값을 담을 수도 있습니다. 만약 초기값을 할당하지 않고 선언만 해놓으면 선언된 변수에는 undefined라는 특별한 데이터가 할당됩니다.

let berkshire; // 이 변수에는 undefined가 할당됩니다.
console.log(berkshire);
berkshire = "버크셔 헤서웨이";
console.log(berkshire);
undefined
버크셔 헤서웨이

상수는 아래와 같이 const라는 키워드를 사용합니다.

const BERKSHIRE = "버크셔 헤서웨이";

상수는 한번 할당한 값을 다시 바꿀 수 없다고 했죠? 그래서 보통의 변수와 구분하기 위해 대문자를 사용하여 선언하는 것이 좋습니다. 물론 꼭 대문자만을 사용해야 한다는 규칙이 있는 것은 아니예요. ^^;

사실 ES6 이전의 자바스크립트에서는 var라는 키워드를 공통으로 사용했기 때문에 변수와 상수를 구분할 필요가 없었습니다. 하지만 ES6부터는 letconst라는 키워드가 생겼기 때문에 데이터의 사용 목적에 따라 적합한 키워드를 사용하는 것이 좋습니다. 사실 코드를 작성하다 보면 let보다는 const키워드를 사용할 일이 더 많습니다. 변수를 꼭 사용해야 하는 경우가 생각보다 많지 않다는 것은 적절한 키워드를 사용함으로써 메모리를 보다 효율적으로 관리할 수 있다는 뜻이겠죠?

변수와 상수의 이름처럼 절대적인 것은 아니지만 프로그래머들에게는 코드를 작성할 때 고려하는 몇몇 규칙들이 있습니다. 왜 규칙에 따라 코드를 작성하는 것이 좋을까요? 규칙에 따라 작성된 코드는 더 쉽게 이해할 수 있기 때문에 향후에 유지보수가 쉽고 다른 사람들과 협업을 해야하는 경우에도 큰 도움이 됩니다. 때문에 어느 정도 규모가 있는 프로젝트라면 미리 코드의 작성 규칙을 정하고 문서화하는 것이 중요한 과정이 되기도 합니다. 이 때 변수나 상수 키워드와 함께 조합한 것을 우리는 ‘식별자’라고 합니다. ‘식별자’를 작성할 때도 몇 가지 간단한 규칙들이 있는데요 이에 대해서도 조금 더 알아보겠습니다.

식별자

변수상수, 함수의 이름을 식별자라고 합니다. 앞에서 상수와 함수의 이름으로 사용했던 berkshireBERKSHIR가 바로 식별자인 것이죠. 일반적으로 자바스크립트의 식별자는 다음과 같은 규칙을 사용하여 작성합니다.

  • 식별자는 반드시 글자달러 기호 $, 밑줄 _로 시작해야 합니다.
  • 식별자에는 글자숫자, 달러 기호 $, 밑줄 _만 사용할 수 있습니다.
  • 키워드예약어는 식별자로 사용할 수 없습니다.

키워드예약어는 자바스크립트의 내장 함수 등에서 이미 사용하고 있거나 사용할 예정인 단어를 말합니다.

키워드 및 예약어 확인하기

식별자 표기법

대부분의 프로그래밍 언어에서 식별자 표기법은 다음의 두 가지 방식을 따릅니다.

카멜 케이스

카멜 케이스는 camelCase, berkshireHathaway같이 각 단어와 단어를 연결할 때 각 단어의 첫 번째 글자를 대문자로 작성하는 방식입니다.

스네이크 케이스

스네이크 케이스는 snake_case, berkshire_hathaway같이 각 단어를 언더바 _로 연결해주는 방식입니다.

위의 두 가지 방식 모두 많이 사용되는 방식으로 어떤 표기법을 사용해도 상관없지만, 한 프로젝트에서 하나의 방식을 사용했다면 그 방식의 표기법을 계속 사용하는 것이 좋습니다. 특히 팀이나 프로젝트에 속해서 작업을 하고 있다면 해당 팀이나 프로젝트에서 사용하는 방식을 따르는 것이 좋습니다.

식별자를 만들 때는 일반적으로 따라야 하는 규칙이 있습니다. 혼자서 코딩을 하는 경우라면 반드시 지킬 필요는 없지만 팀에 속해서 협업을 하는 경우라면 반드시 지켜주는 것이 좋습니다.

  • 식별자는 클래스를 제외하고 대문자로 시작하면 안됩니다.
  • _identifier, __identifier처럼 언더바 _로 시작하는 식별자는 내부 변수와 같은 아주 특별한 경우에만 사용하는 것이 좋습니다.
  • 자바스크립트의 라이브러리는 $와 같은 특수 기호를 사용하는 경우가 많습니다. 특수 기호로 시작되는 식별자는 가급적 사용하지 않는 것이 좋습니다.

리터럴

리터럴은 값을 프로그램 안에서 직접 지정한다는 의미로 아래와 같이 변수 또는 상수에 할당하는 값을 말합니다.

let berkshire = "버크셔 헤서웨이"; // "버크셔 헤서웨이"가 바로 리터럴입니다.

위의 코드에서 berkshire는 변수를 가리키는 식별자이고 “버크셔 헤서웨이”는 문자열 리터럴이면서 동시에 berkshire의 값이기도 합니다.

참고로 리터럴은 반드시 데이터 타입이나 변수의 형태로 할당되어야 합니다. 만약 지정되지 않은 타입의 데이터가 할당되면 오류가 발생합니다.

let time = "12시 55분"; // "12시 55분"이라는 문자열 리터럴을 할당합니다.
let currentTime = time; // currentTime에 변수 time을 할당하기 때문에 오류가 발생되지 않습니다.
currentTime = 12시 55분; // 문자열도 아니고 변수도 아니기 때문에 오류가 발생됩니다.

데이터 타입

자바스크립트에서 값은 문자열과 숫자 같은 원시 값또는 객체로 표현됩니다. 이 중에서 원시 값은 다음과 같이 6가지가 있습니다.

  • 숫자
  • 문자열
  • 불리언
  • null
  • undefined
  • 심볼

객체는 여러 가지 형태와 값을 가질 수 있는 데이터 타입이며 자바스크립트에서는 다음과 같은 내장 객체 타입을 사용할 수 있습니다.

  • Array
  • Date
  • RegExp
  • Map
  • Set

숫자

자바스크립트는 10진수, 2진수, 8진수, 16진수의 4가지 숫자형 데이터를 인식할 수 있으며 소수점이 없는 정수와 소수점이 있는 실수, 지수 표기법을 사용 할 수 있고, 추가적으로 무한대와 음의 무한대, ‘숫자가 아님’을 나타내는 특수한 값을 사용할 수 있습니다.

그런데 다른 프로그래밍 언어들의 경우에는 여러 가지의 정수 타입을 갖고 있어 보다 정밀한 연산을 수행 할 수 있지만 자바스크립트는 더블형의 숫자형 데이터 타입 하나만을 사용하기 때문에 고성능이 필요한 정수 연산이나 정밀한 소수점 연산을 해야하는 애플리케이션을 만드는 것은 어렵습니다.

다음은 숫자형 데이터의 예입니다.

let count = 10;           // 10진수
const blue = 0x0000ff;    // 16진수
const umask = 0o0022;     // 8진수
const temperature = 21.5; // 소수점 있는 십진수
const c = 3.0e6;          // 지수
const e = -1.6e-19;       // 지수 계산
const inf = Infinity;     // 무한대
const nInf = -Infinity;   // 음의 무한대
const nan = NaN;          // 숫자 아님

자바스크립트는 앞에서 살펴본 것 처럼 숫자를 다양한 형식으로 표현할 수 있지만 모든 숫자형 데이터는 최종적으로 더블 형식의 데이터로 저장됩니다. 때문에 정밀한 연산이 필요한 애플리케이션을 개발하고자 하는 프로그래머라면 자바스크립트가 표시할 수 있는 숫자 형식에는 제한이 있음을 확실히 인지하고 있어야 합니다.

Number 객체 프로퍼티

자바스크립트의 Number 객체는 다음과 같이 숫자형 데이터에 해당하는 유용한 프로퍼티를 제공합니다.

const small = Number.EPSILON;           // 1에 더했을 때 1과 구분되는 결과를 만들 수 있는 가장 작은 값
const big = Number.MAX_SAFE_INTEGER;    // 표현할 수 있는 가장 큰 정수
const max = Number.MAX_VALUE;           // 표현할 수 있는 가장 큰 숫자
const min = Number.MIN_SAFE_INTEGER;    // 표현할 수 있는 가장 작은 정수
const minNum = Number.MIN_VALUE;        // 표현할 수 있는 가장 작은 숫자
const nInf = Number.NEGATIVE_INFINITY;  // -Infinity
const nan = Number.NaN;                 // NaN
const inf = Number.POSITIVE_INFINITY;   // Infinity

문자열

문자열은 말 그대로 텍스트 데이터를 말합니다. 자바스크립트의 문자열은 유니코드텍스트로 이모티콘을 포함한 언어 대부분의 글자와 심볼을 사용할 수 있습니다.

자바스크립트에서 문자열은 작은 따옴표 , 큰 따옴표 “”로 감싸서 표현하며, 백틱 으로 감싸주면 템플릿 문자열을 사용할 수 있습니다.

특수 문자와 이스케이프

이스케이프는 문자열 주위에 쓰는 부호가 아님을 나타내는 규칙입니다. 예를 들어 문자열의 내부에 동일한 따옴표를 사용하면 프로그램이 에러가 납니다. 이런 경우에는 아래와 같이 문자열을 감싼 따옴표와 다른 따옴표로 감싸거나 역슬래시 를 써서 따옴표를 이스케이프 하는 방법이 있습니다.

// 서로 다른 따옴표를 사용하는 예
const buffett1 = "'추측'에 의존하는 것은 그이 투자 철학에 정면으로 배치된다.";
const buffett2 = '투자자들은 주식 투자를 "모 아니면 도"식으로 양단 간으로 생각하는 경향이 있다.';
const warning = "Don't stop.";

// 이스케이프를 사용하는 예
const buffett1 = '\'추측\'에 의존하는 것은 그이 투자 철학에 정면으로 배치된다.';
const buffett2 = "투자자들은 주식 투자를 \"모 아니면 도\"식으로 양단 간으로 생각하는 경향이 있다.";
const warning = 'Don\'t stop.';
const path = 'c:\\MyFolder\\';

이스케이프는 따옴표를 이스케이프하는 경우 외에도 줄 바꿈이나 탭 혹은 임의의 유니코드 문자를 나타내는 경우에도 사용됩니다. 자주 사용되는 특수 문자는 다음과 같습니다.

특수 문자 설명
\n 줄 바꿈 “Line1\nLine2”
\r 캐리지 리턴 “Line1\r\nLine1”
\t “시속:\t60km/h”
\’ 작은 따옴표 ‘Don\’t’
\” 큰 따옴표 “He said \”Hi\””
\` 백틱(ES6) `ES6: \` 백틱.`
\$ 달러 기호(ES6) `가격: \$${interpolation}`
\\ 역 슬래시 ‘c:\\MyFolder\\’
\uXXXX 유니코드 포인트(XXXX는 16진수) “\u2310, \u21d4”

템플릿 문자열

템플릿 문자열은 ES6부터 지원되며 문자열 병합을 통해 변수나 상수를 문자열 안에 쓸 수 있어 매우 유용하게 사용되는 기능입니다.

우선 이전의 자바스크립트 코딩에서 문자열에 변수를 병합하기 위해 사용되던 조금 불편한 방법을 살펴보겠습니다.

const word = '추측';
const buffett = word + '에 의존하는 것은 그이 투자 철학에 정면으로 배치된다.';
console.log(buffett);
추측에 의존하는 것은 그이 투자 철학에 정면으로 배치된다.

하지만 ES6에서는 템플릿 문자열을 도입하여 보다 직관적인 방법으로 쉽게 문자열과 변수를 병합 할 수 있습니다. 템플릿 문자열은 따옴표가 아닌 백틱 `${..}를 사용합니다.

const word = '추측';
const buffett = `${word}에 의존하는 것은 그이 투자 철학에 정면으로 배치된다.`;
console.log(buffett);
추측에 의존하는 것은 그이 투자 철학에 정면으로 배치된다.

한가지 팁을 드리자면 문자열을 여러줄로 나누어서 표현할 때 백틱을 사용하면 편리합니다. 기존에는 코드를 여러 줄로 나눠서 표현할 때 \를 추가하거나 + 를 사용하여 문자열과 문자열을 연결하는 방법을 사용했었죠? 하지만 백틱 `을 사용하면 정말 편리하게 문자열을 여러 줄로 표현할 수 있습니다.

// 기존에 여러줄로 문자열을 만들 때 사용하던 방법
const value1 = '가치투자가 어려워진 이유\n'
+ '1. 저렴한 주식을 보유하는 추가의 위험에 보상이 있어야 한다.\n'
+ '2. 저렴한 주식은 일반적으로 문제가 있는 기업이다.';
console.log('[value1]\n',value1);

// 템플릿 문자열을 이용한 방법
const value2 = `가치투자가 어려워진 이유
1. 저렴한 주식을 보유하는 추가의 위험에 보상이 있어야 한다.
2. 저렴한 주식은 일반적으로 문제가 있는 기업이다.`;
console.log('[value2]\n', value2);
[value1]
 가치투자가 어려워진 이유
1. 저렴한 주식을 보유하는 추가의 위험에 보상이 있어야 한다.
2. 저렴한 주식은 일반적으로 문제가 있는 기업이다.

[value2]
 가치투자가 어려워진 이유
1. 저렴한 주식을 보유하는 추가의 위험에 보상이 있어야 한다.
2. 저렴한 주식은 일반적으로 문제가 있는 기업이다.

쉽죠? 그냥 백틱으로 문자열을 감싸주기만 하면 됩니다. ^^

문자열 연산

자바스크립트는 따옴표 안에 들어있는 데이터는 문자열로 인식합니다. 즉 따옴표 안에 숫자가 있다면 그 숫자는 문자열로 인식되는 거죠. 만약 숫자와 숫자 문자열을 곱하게 되면 어떻게 될까요? 자바스크립트는 숫자로 이루어진 문자열을 숫자로 변환하여 자동으로 계산을 합니다.

그런데 더하기의 경우에는 조금 다른 방식으로 연산이 이루어집니다. 숫자로 이루어진 두 개의 문자열을 더하면 각각의 데이터는 그냥 문자열로 인식되어 문자열 병합이 이루어집니다. 이 때문에 가끔 오류를 찾기 위해 엉뚱한 곳에서 고민을 하게 되는 경우가 생깁니다. 각각의 연산 방식을 알고 있다면 이런 오류 때문에 고민할 필요는 없겠죠?

const multiply = 1 * '100'; // 문자열 '30'이 숫자로 변환되어 연산됩니다. 결과는 100입니다.
const plus = 1 + '100';     // 숫자 30이 문자로 변환되어 연산됩니다. 결과는 문자열 '1100'이 됩니다.
console.log('multiply:', multiply);
console.log('plus:', plus);
multiply: 100
plus: 1100

물론 가장 좋은 것은 불필요한 오류를 방지하는 것입니다. 숫자가 필요한 경우에는 숫자만, 문자열이 필요한 경우에는 문자열만 사용하는 것이 좋습니다.

불리언

불리언은 truefalse의 두 가지 값, 즉 거짓으로 표현되는 데이터 타입입니다. 참과 거짓은 숫자로도 표현될 수 있는데 0은 false이고 다른 숫자들은 모두 true입니다. “false”는 false일까요? 문자열로 된 “false”는 참입니다. false와 “false”도 자주 헷갈리는 부분입니다. 이런 사소한 오류 때문에 한참을 고민하는 경우도 생기게 되죠. false와 “false”는 항상 정확하게 구분하여 사용하시기 바랍니다.

let momentum = true;
if( momentum ) {
    console.log("저는 모멘텀 투자자입니다."); // true일 경우
} else {
    console.log("저는 가치 투자자입니다.");   // false일 경우
}
저는 모멘텀 투자자입니다.

null과 undefined

nullundefined는 자바스크립트의 특별한 데이터 타입으로 null은 null값만 undefined는 undefined값만 가질 수 있습니다. null과 undefined는 모두 존재 하지 않음을 나타내기 때문에 부의 값, 즉 false로 인식됩니다.

nullundefined는 어떤 경우에 사용해야 할까요? null과 undefined는 사실 사용을 구분할 필요는 없습니다. 하지만 일반적으로 null은 프로그래머에게 허용된 데이터 타입이고, undefined는 자바스크립트 자체에서 사용하는 데이터 타입이라고 하네요. 그래서 만약 프로그래머가 직접 변수에 “알 수 없는 데이터”를 할당해야 하는 경우에는 null 값을 할당하는 것을 권장한다고 합니다.

undefined는 시스템에서 할당되지 않은 변수에 할당하는 값으로 굳이 시스템의 동작을 흉내내려는 것이 아니라면 undefined를 사용해야 하는 경우는 사실상 없다고 볼 수 있습니다.

const word;             // 아무것도 할당하지 않은 변수의 값은 undefined입니다.
const word = null;      // 어떤 데이터가 들어올지 모를 경우에는 null을 할당하면 됩니다.
const word = undefined; // 특수한 경우가 아니라면 직접 undefined를 할당하는 것은 권장되지 않습니다.

심볼

심볼은 ES6에서부터 사용할 수 있는 새로운 데이터 타입으로 유일한 토큰을 나타내기 위한 데이터 타입입니다. 심볼은 항상 유일하고 다른 어떤 심볼과도 일치하지 않습니다. 이는 객체와 유사한 특징이지만 항상 유일하다는 점을 제외하면 원시 값을 특징을 모두 가지고 있기 때문에 확장성 있는 코드를 만들 수 있습니다.

심볼은 Symbol()생성자로 만들 수 있으며, 필요할 경우 생성자에 간단한 설명을 추가할 수 있습니다.

const warrenBuffett = Symbol("value investor");
const charlieMunger = Symbol("value investor");
console.log(warrenBuffett === charlieMunger); // 심볼은 모두 유일한 특성을 갖기 때문에 false입니다.
false

객체

원시 타입은 단 하나의 값만 나타낼 수 있고 불변입니다. 하지만 객체는 여러 가지의 값을 나타내거나 복잡한 값을 나타낼 수 있고 변경될 수도 있습니다. 즉 객체는 모든 형태의 데이터 타입을 담을 수 있는 일종의 컨테이너라고 할 수 있습니다. 객체는 다음과 같이 중괄호 {..}를 사용하여 생성합니다.

const obj = {};

객체의 콘텐츠는 프로퍼티또는 멤버라고 부릅니다. 객체의 프로퍼티는 이름으로 구성되며 프로퍼티의 이름은 반드시 문자열 또는 심볼이어야 합니다. 프로퍼티에는 모든 형태의 데이터 타입이 들어갈 수 있고, 심지어 다른 객체가 들어갈 수도 있습니다.

객체의 프로퍼티를 조작하려면 어떻게 해야 할까요? 객체의 프로퍼티는 다음과 같이 멤버 접근 연산자 .를 사용하거나 대괄호 []를 사용하여 데이터를 추가하거나 접근할 수 있습니다.

const obj = {};
obj.warrenBuffett = "investor";
obj["value investor"] = "warren buffett";
console.log(obj["value investor"]);  // "warren buffett"
console.log(obj["warrenBuffett"]);   // "investor"
warren buffett
investor

객체의 프로퍼티에 심볼을 사용했을 경우에는 어떻게 접근할 수 있을까요? 대괄호를 사용하면 됩니다. 단 이때는 따옴표를 사용하지 않도록 주의해야 합니다.

const obj = {};
const BUFFETT = Symbol();
obj[BUFFETT] = "investor";
console.log(obj[BUFFETT]); // "investor"
investor

객체의 프로퍼티에 심볼을 사용한 경우에는 객체의 프로퍼티로 나열되지 않습니다. 위의 예제에서 console.log(BUFFETT);를 입력해보면 심볼 프로퍼티가 표시되지 않을 겁니다. 하지만 console.log(obj[BUFFETT]);를 입력해보면 BUFFETTobj의 프로퍼티인 것을 확인할 수 있습니다.

심볼 프로퍼티는 문자열 프로퍼티와는 다르게 처리됩니다. obj.BUFFETT = "value investor"를 입력하고 obj[BUFFETT]obj.BUFFETT또는 obj["BUFFETT"]을 입력해보면 두 개의 데이터가 서로 다른 것을 확인할 수 있습니다.

일반적으로 객체는 생성과 동시에 프로퍼티를 만들어 사용하며 생성된 객체에 각 프로퍼티는 쉼표 ,로 구분합니다. 그리고 각 프로퍼티의 이름과 값은 콜론 :으로 구분합니다.

const BUFFETT = {
    name: 'warren buffett',
    type: 'value investor'
}

const investor = {
    type: 'value investor',
    person: {  // 프로퍼티의 값에 객체를 할당
        investor1: 'warren buffett',
        investor2: 'charlieMunger'
    }
}

객체의 프로퍼티에 담긴 객체에 접근하려면 어떻게 해야 할까요? 객체의 프로퍼티에 접근하는 방법과 같이 멤버 접근 연산자나 대괄호를 사용하여 다양한 방법으로 접근할 수 있습니다.

investor.person.investor1;       // 가장 일반적인 접근 방법
investor.person["investor1"];    // 멤버 접근자와 대괄호를 사용하는 방법
investor["person"].investor1;    // 대괄호와 멤버 접근자를 사용하는 방법
investor["person"]["investor1"]; // 대괄호만을 이용하는 방법

객체에는 데이터 타입만 담을 수 있는 것은 아닙니다. 객체는 데이터 타입 뿐만 아니라 함수도 담을 수 있는 만능 컨테이너입니다.

warrenBuffett.say = function(){
    const s = '투자자들은 주식 투자를 "모 아니면 도"식으로 양단 간으로 생각하는 경향이 있다.';
    return s;
};

객체의 내부에 담긴 함수를 호출 할 때는 괄호를 붙여서 사용합니다.

const warrenBuffett = {};
warrenBuffett.say = function(){
    const s = '투자자들은 주식 투자를 "모 아니면 도"식으로 양단 간으로 생각하는 경향이 있다.';
    return s;
};
console.log(warrenBuffett.say());
투자자들은 주식 투자를 "모 아니면 도"식으로 양단 간으로 생각하는 경향이 있다.

때로는 객체의 내부에 담긴 특정 프로퍼티를 동적으로 삭제해야 하는 경우가 있을 수 있습니다. 이런 경우에는 delete를 사용합니다.

delete investor.person;   // investor 객체의 person 객체 전체가 삭제됩니다.
delete warrenBuffett.say; // warrenBuffett 객체의 say라는 함수가 삭제됩니다.

Number, String, Boolean 객체

숫자문자열, 불리언데이터 타입에는 각각에 대응하는 객체 타입이 있습니다. 바로 Number, String, Boolean입니다. 이 각각의 객체는 각 데이터 타입에 따른 특별한 값을 저장하거나 함수 형태의 기능을 제공합니다.

String 객체의 경우 아래 예제에서 처럼 문자열 데이터임에도 불구하고 함수 프로퍼티를 내장하고 있는 것처럼 동작하는 것을 확인할 수 있습니다.

const BUFFETT = "investor";
console.log(BUFFETT.toUpperCase()); // "INVESTOR"
INVESTOR

예제의 변수 BUFFETT은 단순한 문자열 데이터임에도 불구하고 함수 프로퍼티를 내장하고 있는 것처럼 동작합니다. 이는 자바스크립트가 일시적으로 임시 String 객체를 생성하고 이 객체가 가지고 있는 toUpperCase 함수를 호출하기 때문입니다.

자바스크립트는 이 경우 함수를 호출하는 즉시 생성된 임시 객체를 삭제해버립니다. 아래와 같이 테스트를 해보면 임시로 생성된 객체의 프로퍼티에 값을 직접 할당할 수 없다는 것을 알 수 있습니다.

const BUFFETT = "investor";
BUFFETT.type = "value investor";
console.log(BUFFETT.type); // 에러는 나지 않지만 존재하지 않기 때문에 undefined를 출력합니다.
undefined

배열

배열은 순서가 있는 특수한 객체입니다. 일반적으로 객체는 순서가 보장되지 않지만 배열은 숫자, 즉 인덱스를 키로 가지는 객체이기 때문에 언제나 일정한 순서를 보장합니다. 배열은 객체와 함께 자주 사용되는 매우 강력한 데이터 타입으로 유용한 메서드를 많이 포함하고 있으며 다음과 같은 특징을 갖습니다.

  • 크기가 고정되지 않고 언제라도 새로운 요소를 추가하거나 제거할 수 있습니다.
  • 배열의 요소는 객체와 같이 데이터 타입을 가리지 않습니다. 즉 모든 형태의 데이터 타입이 하나의 배열에 포함될 수 있습니다.
  • 배열 요소의 인덱스는 0부터 시작합니다.

배열은 아래와 같이 대괄호 안에 각각의 요소를 쉼표로 구분하고 있는 형태입니다.

const a1 = [1, 2, 3, 4];
const a2 = [1, "two", 3, null];
const a3 = ['warren buffett', 'charlieMunger']
const a4 = [
    {name: 'warren buffett', job: 'investor'},
    {name: 'charlieMunger', job: 'investor'}
];
const a5 = [
    [1, 2, 3],
    [4, 5, 6]
];

배열의 길이는 해당 배열 요소의 숫자를 반환하는 length프로퍼티를 사용하여 알아낼 수 있습니다.

const a1 = [1, 2, 3, 4];
console.log(a1.length); // 4
4

배열의 요소에는 접근하는 방법은 대괄호를 사용하여 객체의 요소에 접근하는 방법과 비슷한데 아래와 같이 대괄호 안에 해당 요소의 인덱스 숫자를 넣으면 됩니다. 참고로 배열의 인덱스는 0부터 시작합니다.

const a1 = [1, 2, 3, 4];
console.log(arr[0]);              // 배열의 첫 번째 요소를 가져옵니다.
console.log(arr[arr.length - 1]); // 배열의 가장 마지막 요소를 가져옵니다.
1
4

만약 배열의 특정 요소에 값을 할당하면 해당 요소에 값이 있을 경우 할당된 새로운 값으로 변경됩니다. 만약 해당 배열에 새로운 요소를 추가하면 배열은 해당 요소만큼 늘어나고 대괄호의 인덱스에 기존의 배열 길이보다 큰 값을 사용하면 해당 인덱스만큼 배열의 길이가 늘어납니다.

const a1 = [1, 'b', 3, 4];
a1[1] = 2;
console.log(a1); // [1, 2, 3, 4]
a1[6] = 7;
console.log(a1); // [1, 2, 3, 4 , , , 7]
(4) [1, 2, 3, 4]
(7) [1, 2, 3, 4, empty × 2, 7]

날짜

자바스크립트는 내장된 Date 객체를 통해 날짜와 시간을 표시합니다. 현재 날짜와 시간을 나타내는 객체를 만들 때는 아래와 같이 new Date()를 사용합니다.

const now = new Date();
console.log(now);
Tue Jun 02 2020 17:10:43 GMT+0900 (대한민국 표준시)

만약 특정 날짜에 해당하는 객체를 만들고 싶다면 어떻게 해야 할까요? 다음과 같이 괄호 안에 추가적인 파라미터를 넣어주면 됩니다.

const time = new Date(2020, 5, 2);
console.log(time);
Tue Jun 02 2020 00:00:00 GMT+0900 (대한민국 표준시)

한 가지 주의해야 할 것은 월의 경우에는 인덱스가 0부터 시작합니다. 즉 원하는 달을 표시하기 위해서는 해당 월에 1을 더해주어야 한다는 뜻입니다. 또는 아래와 같이 프로그램에서 자주 사용하는 형태로 날짜 옵션을 지정할 수도 있습니다.

new Date("2020-06-02T13:30:00");   // Tue Jun 26 2020 13:30:00 GMT+0900 (대한민국 표준시)
new Date("2020-06-02UTC13:30:00"); // Tue Jun 26 2020 22:30:00 GMT+0900 (대한민국 표준시)
new Date("2020-06-02GMT13:30:00"); // Tue Jun 26 2020 22:30:00 GMT+0900 (대한민국 표준시)
new Date("2020-06-02");            // 시간이 생략되면 자동으로 09:00:00으로 설정됨.
new Date("2020-06");               // 일이 생략되면 자동으로 1일로 설정됨.
new Date("2020");                  // 월이 생략되면 자동으로 1월로 설정됨.

그렇다면 특정한 날짜와 시간에 해당하는 객체도 만들 수 있겠죠?

const time = new Date(2020, 5, 2, 19, 0); // 19:00은 PM 7:00을 의미합니다.
console.log(time);
Tue Jun 02 2020 19:00:00 GMT+0900 (대한민국 표준시)

날짜 객체를 생성하면 각각의 Date 객체의 메소드를 사용하여 원하는 날짜와 시간을 가져올 수 있습니다.

const time = new Date();
console.log(time.getFullYear());     // 연도를 정수로 반환합니다.
console.log(time.getMonth());        // 월을 정수로 반환합니다.
console.log(time.getDate());         // 날짜를 정수로 반환합니다.
console.log(time.getDay());          // 요일을 정수로 반환합니다.
console.log(time.getHours());        // 시간을 정수로 반환합니다.
console.log(time.getMinutes());      // 분을 정수로 반환합니다.
console.log(time.getSeconds());      // 초를 정수로 반환합니다.
console.log(time.getMilliseconds()); // 밀리초를 정수로 반환합니다.
2020
5
2
2
17
25
48
758

정규표현식

정규표현식은 유용하게 사용되는 기능으로 자바스크립트의 서브 언어에 가까운 강력한 기능을 제공합니다. 정규표현식은 다른 많은 프로그래밍 언어에서도 기본 또는 확장의 형태로 제공되어 강력한 문자열 편집, 검색 등의 기능을 제공하고 있습니다.

자바스크립트에서는 정규표현식을 위해 RegExp라는 객체를 제공하며 아래와 같이 한 쌍의 슬래시 /../사이에 정규표현식을 위한 심볼을 넣는 리터럴 문법을 사용합니다.

// 이메일 정규식
const emailExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

// 핸드폰번호 정규식
const phoneExp = /^\d{3}-\d{3,4}-\d{4}$/;

ES6에서부터 제공되는 새로운 데이터 타입으로 MapSet, 그리고 ‘성능을 위해 일부 기능을 제거한’ WeakMap, WeakSet을 사용할 수 있습니다.

맵은 객체와 마찬가지로 키와 값을 연결합니다. 하지만 특정한 상황에서 객체보다 유리하게 사용될 수 있습니다.

셋은 배열과 비슷합니다. 하지만 배열과는 달리 중복이 허용되지 않습니다.

WeakMapWeakSet은 Map, Set과 같지만 특정한 상황에서 더 높은 성능을 낼 수 있도록 일부 기능을 제거한 버전입니다.

데이터의 타입 변환

데이터의 타입 변환은 프로그래밍에서 매우 자주하는 작업 중에 하나입니다. 그 이유는 사용자의 입력이나 다른 시스템에서 가져온 데이터를 그대로 사용할 수 있는 경우가 별로 없기 때문입니다. 이런 경우에 프로그래머는 외부에서 받아온 데이터를 적합한 형태의 데이터로 변환하여 사용하게 됩니다.

숫자 변환

사용자에게 입력을 받는 경우에는 보통 문자열로 저장됩니다. 숫자를 입력받는 경우에도 문자열로 저장이 되기 때문에 프로그래머는 문자열을 숫자 데이터로 바꿔서 사용해야 하는 경우가 많습니다. 이런 경우라면 Number 객체 생성자를 사용하여 문자열 데이터를 숫자 데이터로 쉽게 변환할 수 있습니다.

const num = "123";
const num = Number(num); // 문자열이 숫자 데이터로 바뀝니다.

만약 숫자로 바꿀 수 없는 문자열이라면 어떨까요? 이런 경우에는 숫자가 아님을 뜻하는 NaN이 반환됩니다. Number 객체 생성자를 사용하는 방법 이외에 다른 방법으로 자바스크립트의 내장 함수인 parseIntparseFloat함수를 사용하는 방법이 있습니다.

parseInt는 파라미터를 넘겨 변환할 문자열이 몇 진수로 표현될 것인지를 지정할 수 있습니다. 예를들어 기본 값은 10으로 파라미터를 넘기지 않으면 10진수로 변환이 되지만, 16진수를 의미하는 16을 파라미터로 넘기면 16진수로 변환한 값을 반환합니다.

자바스크립트의 내장함수인 parseIntparseFloat은 모두 숫자로 판단할 수 있는 부분까지만 변환하고, 그 나머지 문자열은 무시합니다.

const num1 = parseInt('16Hz', 10);    // 16
const num2 = parseInt('3a', 16);      // 58. 16진수인 3a를 10진수로 변환하여 반환합니다.
const num3 = parseFloat('15.5 Km/h'); // 15.5

Date 객체의 경우 valueof()메서드를 사용하여 숫자로 변환할 수 있습니다. 변환된 숫자는 UTC 1970년 1월 1일 자정을 기준으로 이로부터 몇 밀리초가 지났는지를 나타냅니다.

const d = new Date();
const ms = d.valueOf(); // 해당 기준 날짜로부터 몇 밀리초가 지났는지를 나타내는 숫자 반환
console.log(ms);
1591086790903

문자열 변환

숫자를 문자열로 표현하는 경우에는 toString()메서드를 사용합니다. 자바스크립트의 모든 객체에는 문자열을 반환하는 toString()메서드가 있습니다. 하지만 위에서도 살펴보았듯이 문자열과 숫자를 연산하는 경우에는 자동으로 숫자를 문자열로 변환하거나 문자열을 숫자로 변환하여 연산을 수행하기 때문에 toSting()메서드를 사용할 일은 생각보다 많지는 않습니다.

const num = 123;
console.log(typeof(num)); // number
const s = num.toString();
console.log(typeof(s));   // string
number
string

toString() 메서드를 객체에 사용하면 어떨까요? “[object Object]”라는 문자열을 반환합니다. 이런 형태의 데이터는 사실상 아무짝에도 소용이 없는 데이터라고 할 수 있습니다. 객체의 경우에는 obj.property의 형태로 내부 프로퍼티의 값을 직접 반환받아야 합니다.

배열의 경우는 어떨까요? 배열의 toString() 메서드는 각 요소를 문자열로 바꾸고 쉼표로 연결한 문자열을 반환하기 때문에 상대적으로 쓸모가 있는 데이터라고 할 수 있습니다.

const a1 = [1, true, 'invest'];
console.log(a1.toString()); // "1, true, invest"
1,true,invest

불리언 변환

데이터를 불리언 타입으로 변환하는 것은 매우 간단합니다. 모든 값에 부정 연산자(!)를 붙여주면 됩니다. 데이터에 부정 연산자를 사용하면 ‘참’과 같은 값은 false가 되고, ‘거짓’과 같은 값은 true가 됩니다.

Boolean 생성자를 사용하는 방법도 있습니다. Boolean 생성자를 사용하는 경우 ‘참’같은 값은 true를 반환하고 ‘거짓’같은 값은 false를 반환합니다.

const num = 0;                // 숫자 0은 '거짓'같은 값입니다.
const bool1 = !num;           // true
const bool2 = !!num;          // false
const bool3 = Boolean(num);   // false
const bool4 = Boolean(!num);  // true

댓글 남기기