불리언 (boolean)

boolean은 true와 false 밖에 존재 하지 않습니다. C 같은 일부 언어에서는 boolean 대신 숫자를 사용합니다.
0 은 false 이고, 다른 숫자는 모두 true 입니다. 자바스크립트에서도 비슷한 방식을 사용합니다.

모든 값을 참 같은 값(truthy), 거짓 같은 값(falsy) 으로 나눌 수 있습니다.

boolean을 작성 할때 문자열로 작성해서는 안됩니다. boolean 리터널은 다음과 같이 작성 해야합니다.

let heating = true;
let cooling = false;

심볼(symbol)

심볼(symbol)은 유일한 토큰을 나타내기 위해 ES6에서 도입한 새 데이터 타입입니다.

심볼은 다른 어떤 심볼과도 일치하지 않는 고유의 값입니다. 이런 면에서는 심볼은 객체와 유사합니다.

심볼은 Symbol() 생성자로 만듭니다. 원한다면 생성자에 간단한 설명을 추가할 수 있습니다.

const RED = Symbol("The color of a sunset!");
const ORANGE = Symbol("The color of a sunset!");
RED === ORANGE // false: 심볼은 모두 서로 다릅니다.

다른 식별자와 혼동해서는 안 되는 고유 식별자가 필요하다면 심볼을 사용하면 됩니다.

  • 객체지향 프로그래밍 처럼 심볼을 만들 때 new 키워드는 사용 할 수 없습니다.
  • 대문자로 시작하는 식별자는 new와 함께 쓴다는 불문율의 예외임을 새로 기억해야합니다.

null 과 undefined

null 과 undefined는 자바스크립트의 특별한 타입입니다.

null 이 가질수 있는 값은 null 하나 뿐이며, undefined가 가질 수 있는 값도 undefined 하나 뿐입니다.

두개의 의미는 모두 존재 하지 않는것 을 의미합니다. 이 두개의 타입은 같은 의미이지만 서로 다른 데이터 타입입니다.

null 은 프로그래머에게 허용된 데이터 타입이며 undefined는 자바스크립트 자체에서 사용한다는 부분이 중요합니다. 강제적인 규칙은 아니지만, undefined 값을 사용 할때는 꼭 필요할 때만 사용하도록 주의해야합니다.

사용 할때는 아직 값이 주어지지 않은 변수의 동작을 고의로 흉내 내야 할때만 사용하도록 주의합니다.

변수값을 아직 모르거나 적용할수 없는 경우 null 이 더 좋은 선택이 될수 있습니다.

let nullTmp = null;
let undefinedTmp_1;
let undefieedTmp_2 = undefined;

템플릿 문자열

템플릿 문자열은 ES6 (ES2015)에서 문자열을 템플릿 처럼 쓸 수 있게 만든 기능입니다.

ES6 이전에는 문자열에 함수를 작성 할 때는 다음과 같이 작성 했습니다.

const porfile = {
 name : "chaser";
 job : "student"
}
let str = profile.name + "의 직업은 " + profile.job + "입니다.";

여러 변수를 합쳐 문자열을 만들려니 띄어쓰기도 고려해야하고, + 와 따옴표로 인해 종종 오타를 범할 수 있습니다.(경험담)

이를 템플릿 문자열을 사용 할 경우 다음과 같이 작성 할 수 있습니다.

const porfile = {
 name : "chaser";
 job : "student"
}
let str = `${profile.name}의 직업은 ${profile.job}입니다.`;

+와 따옴표만 사라졌는데 개인적으로는 코드의 가독성이 확실히 좋다 생각이 듭니다.

여러 줄 문자열

const multiline1 = "line1\nline2";
const multiline2 = `line1
line2
line3`;

//Error
const multiline3 = "line1\
line2";
                         //    multiline1       multiline2
console.log(multiline1)  // return line1     return line1 
console.log(multiline2)  //        line2            line2 
                                                 //                         line3 
console.log(multiline3)  // return line1line2

줄 바꿈 특수문자 (\n) 를 사용 할 경우와 백틱( ` )을 사용 하면 정상적으로 new line에 글을 작성 할 수 있습니다.
코드의 결과 문자열에 줄바꿈 문자가 들어가지만 , 원하지 않는 공백이 line2 와 line3에 들어 간 것을 확인 할 수 있습니다.

책에서는 여러 줄 문자열을 권하지 않습니다. 여러 줄 문자열을 쓰려면 코드를 읽기 쉽게 만드는 들여쓰기를 포기하거나, 결과 문자열에 원하지 않는 공백이 들어가거나 둘중 하나 입니다.

소스 코드에서 문자열을 여러 행에 나눠 써야 할 때 필자는 보통 문자열 병합을 사용합니다.

const multiline = "line1\n" + 
   "line2\n" +
   "line3";

숫자와 문자열

const result1 = 3 + '30'; // 3이 문자열 바뀝니다. return '330'
const result2 = 3 * '30'; // '30' 이 숫자로 바뀝니다 return 90

문자열 병합 ( + ) 을 사용 할 경우에는 앞의 숫자가 문자열로 변경이 되고 result1 의 값은 '330' 이 됩니다.
(Number → String) + (String)

곱셈 ( * ) 을 할 경우 뒤의 문자열이 숫자로 변경 되며 result2 의 값은 90이 됩니다.
(Number) * (String → Number)

특수문자

역슬래스 ( \ ) 는 이스케이프 할때만 사용 하는 것이 아닌 특수문자나 임의의 유니코드 문자를 나타날 때도 역슬래시를 사용합니다.

코드 설명
\n 줄바꿈 문자(Newline)
ASCII / UniCode 10인 라인 피드(line feed)[U+000A]
\r 캐리지 리턴(Carriage return) / 엔터 ( )
ASCII / UniCode U+000D
\t 탭  (Tab)
ASCII / UniCode U+009
\' 이스케이프를 할 필요가 없어도 이스케이프 한 작은 따옴표를 쓸 수 있습니다.
\" 이스케이프를 할 필요가 없어도 이스케이프 한 큰 따옴표를 쓸 수 있습니다.
\` 이스케이프를 할 필요가 없어도 이스케이프 한 백틱을 쓸 수 있습니다.
\$ 이스케이프를 할 필요가 없어도 이스케이프 한 달러 기호를 쓸 수 있습니다.
\\ 이스케이프를 할 필요가 없어도 이스케이프 한 역슬레시를 쓸 수 있습니다.
\uXXXX 임의의 유니코드 코드포인트 ISO/IEC 10646
XXXX는 16진수 코드 포인트 입니다.
\xXX 라틴-1 문자 ISO/IEC 8859-1
XX는 16진수 라틴-1 코드 포인트입니다.

\n 과 \r 의 차이는 다음과 같습니다.

console.log("Carriage Return test\r");
console.log("Carriage Return test");
console.log("New Line test\n");
console.log("New Line test");
/*
Carriage Return test
Carriage Return test
New Line test

New Line test
*/

유니코드와 라틴-1의 차이는 다음과 같습니다.

console.log("UniCode \u00e1");
console.log("Latin-1 \xE1");
/*
UniCode á
Latin-1 á
*/

유니코드 문자 코드를 이스케이프 하지 않고 에디터에 직접 입력할 수도 있습니다. 이는 에디터와 운영체제에 따라 입력 방법이 다릅니다.

아래의 특수문자는 자주 쓰이지 않는 특수문자 입니다.

코드 설명
\0 NUL 문자
ASCII/UniCode 0
\v 세로 텝 (Vertical tab)
ASCII/ UniCode 11
\b 백스페이스
ASCII/ UniCode 8
\f 폼 피드(Form feed)
ASCII/ UniCode 12

숫자(Number)

3 , 5.5 , 1,000,000 처럼 컴퓨터가 정확히 나타낼 수 있는 숫자도 있지만, 근사치로만 표현할 수 있는 숫자도 많습니다. 예를 들어 𝞹 는 절대 컴퓨터로 표현 할 수 없다. 원주율을 구성하는 숫자는 무한하고 반복되지도 않기 때문이죠. 10/3 같은 숫자는 특별한 테크닉을 써서 나타낼 수 있긴 하지만, 소수점 아래 자리가 무한히 반복 되므로 (3.333⋯) 일반적으로 근사치로만 나타냅니다.

JS도 다른 프로그래밍 언어와 마찬가지로 실제 숫자의 근사치를 저장할 때 IEEE-764 배정도(double-precision) 부동소수점 숫자 형식을 사용한다. 이 형식을 '더블' 이라 지칭합니다.

JS는 정수형 데이터 타입을 하나만 사용한다.

대부분의 프로그래밍 언어는 여러 가지 정수 타입(int short, long)을 사용하며 부동소수점 숫자 타입도 두가지 이상(double , floot)을 사용합니다. 하지만 JS 는 숫자형 데이터 타입이 하나 밖에 없습니다..

장점

  • 숫자 데이터에 사용용도에 따라 데이터 타입을 지정할 필요가 없기 때문에 코딩작성이 간결하고 쉬워진다.
  • 초보자에게 부담이 없다.

단점

  • 고성능 정수 연산이나 정밀한 소수점 연산이 필요한 애플리케이션에서 쓸 수 없다.

JS는 10,2,8,16 진수의 네 가지 숫자형 리터널을 인식한다.

let count = 10;          // 숫자 리터널. count는 더블입니다.
const blue = 0x0000ff;   // 16진수. 16진수 ff는 10진수 255와 같습니다.
const umask = 0o0022;    // 8진수. 8진수 22는 십진수 18과 같습니다.
const roomTmp = 21.5     // 십진수
const c = 3.0e6;         // 지수 (3.0 x 10^6 = 3,000,000)
const e = -1.6e-19;      // 지수 (-1.6 x 10^-19 = 0.00000000000000000016)

JS는 무한대, 음의 무한대, '숫자가 아님' 을 나타내는 특별한 값이 있다.

const inf = Infinity;
const ninf = -Infinity;
const nan = NaN;

이들은 숫자형 값이지만, 계산에 사용하는 숫자라기보다 일종의 플레이스 홀더(placeholder)입니다.

Number 객체 유용한 프로퍼티

const small = Number.EPSILON; // 1에 더했을 때 1과 구분되는 결과를 만들 수 있는 가장 작은 값
                                                            // 근사치는 2.2e-16 입니다.
const bigInt = Number.MAX_SAFE_INTEGER; // 표현할 수 있는 큰 정수
const max = Number.MAX_VALUE;              // 표현할 수 있는 큰 숫자
const minInt = Number.MIN_SAFE_INTEGER;       // 표현할 수 있는 작은 정수
const min = Number.MIN_VALUE;              // 표현할 수 있는 작은 숫자
const nInf = Number.NEGATIVE_INFINITY;      // -Infinity
const nan = Number.NaN;                    // NaN
const inf = Number.POSITIVE_INFINITY;      // Infinity

문자열(String)

String 이라는 단어는 string of characters에서 나왔습니다. 이 표현은 1800년대 후반 식자공들이 일정한 순서로 배열된 심볼을 가리킬 때 썻던 표현이며 나중에는 수학들이 사용했다네요.

String은 텍스트 데이터입니다. JavaScript 문자열은 Unicode 텍스트 기반입니다.

Unicode란 ?

  • 텍스트 데이터에 관한 표준이다. 다른 이름으로는 국제 문자 세트(UCS) 라고도 표기한다.
  • 사람이 사용하는 언어 대부분의 글자(이모티콘 포함)와 심볼에 해당하는 코드 포인트(code point)를 포함하고 있다.
  • 모든 언어의 텍스트를 나타낼수 있지만, 모든 코드 포인트를 정확히 렌더링 한다는 보장은 없다.

JavaScript 문자열 리터널은 작은 따옴표, 큰 따옴표, 백틱(backtick)을 사용합니다.

const extraQuotes = 'extra';
const doubleQuotes = "double";
const backticks = `backtick`;

문자열 이스케이프(Escape)

문자열의 리터널은 따옴표를 사용하든 백틱을 사용하든 시작과 끝을 작성합니다.

                  StartPoint                       EndPoint
const apostrophe  =  '           안녕하세요           '   
const doubleQuotes =  "           안녕하세요           "
const backticks    =  `           안녕하세요           `

이때 StartPoint와 같은 따옴표 혹은 백틱을 사용 하고 싶을 경우 다음과 같이 에러를 발생 할 수 있습니다.

// Error!!
                  StartPoint   EndPoint|StartPoint   EndPoint
const apostrophe   =  '           '안녕하세요'           '
const doubleQuotes =  "           "안녕하세요"           "
const backticks    =  `           `안녕하세요`           `

이를 방지 하기 위해서 역슬래시( \ ) 을 써서 이스케이프 하면 문자열이 여기서 끝나지 않았다고 JS 에 알릴 수 있습니다.

                  StartPoint                           EndPoint
const apostrophe   =  '           \'안녕하세요\'           '
const doubleQuotes =  "           \"안녕하세요\"           "
const backticks    =  `           \`안녕하세요\`           `

역슬래시를 사용 해야 할 경우에도 역슬래시를 이용하여 이스케이프를 할 수 있습니다.

const backSlash = '\\'; // return : \

그렇다면 ' , " , ` 중 무엇을 써야 할까?

책의 저자는 다음과 같이 작성 했습니다.

  • 스스로 정하면 된다.
  • 사용자에게 표시될 텍스트에는 보통 큰따옴표를 사용한다.
  • 따옴표보다 don't 등 아포스트로피를 더 많이 쓰는 편이므로, 큰 따옴표를 쓰는게 필자에게 편하다.
  • 자바스크립트 문자열 안에 HTML을 쓸때는 반대로 작은 따옴표를 쓴다.
  • HTMl 문자열을 작은 따옴표로 감싸면 속성값에 큰 따옴표를 쓸 수 없이 때문이다.

저는 문자 하나 일 경우에는 외 따옴표, 문자열일 경우에는 큰 따옴표를 사용하고 있었습니다.

다른 언어만을 거진 사용하다 보니 그러한 습관이 생겼던 것 같습니다. 책을 보고 난 뒤에는 나도 사용용도를 언어에 맞게 다시 한번 생각해봐야 겠다 라는 생각이 들었습니다.

변수(variable)

이름이 붙은 값으로, 변수라는 이름이 암시하듯 언제든 값이 변할 수 있습니다.

ES5 버전 이하 부터는 var 키워드만 사용할 수 있었는데, ES6 이후 부터는 let(변수) 과 const(상수)를 사용합니다.

var varTmp = 'varVariable';
let letTmp = 'letValue';
const CONST_TMP = 'constVariable';

변수에 따로 초깃값을 지정하지 않을 경우 'undefined' 값이 할 당 됩니다. 상수 값인 const 경우 네이밍을 대문자와 밑줄만을 사용하는 관례가 있습니다. 상수에 비해 변수는 생각의외로 꼭 필요한 상황이 적습니다.

  • 변수보다 상수를 자주 사용하는 습관을 가지는 것이 좋습니다.
  • 바뀌는 값보단 고정된 값이 제어하기 편하고 에러를 방지할 수 있기 때문입니다.

식별자(identifier)

변수와 상수, 함수 이름을 식별자(identifier)라 부릅니다. 그리고 식별자에는 규칙이 존재합니다.

  • 반드시 글자나 달러 기호($), 밑줄(_)로 시작해야 한다.
  • 글자와 숫자, 달러기호, 밑줄만 쓸 수 있다.
  • 유니코드 식별자도 가능하다.
  • 예약어는 식별자로 사용이 불가능 하다.

식별자 표기법

카멜 케이스(camel case)

varTmp, letTmp 등 카멜 케이스는 띄어쓰기를 대문자로 작성하여 표기합니다.

스네이크 케이스(snake case)

var_tmp, let_tmp 등 띄어쓰기를 밑줄(_) 로 작성하여 표기합니다.

식별자 표기 방침

  • 식별자는 대문자로 시작해서는 안된다. 예외의 경우는 존재한다.
  • 밑줄 한 개 또는 두 개 시작하는 식별자는 아주 특별한 상황, 또는 '내부' 변수에서만 사용한다.
  • 제이쿼리를 사용할 경우, 달러 기호로 시작하는 식별자는 보통 제이쿼리 객체라는 의미이다.

리터널(literal)

리터널이라는 단어는 값을 프로그램 안에서 직접 지정한다는 의미를 가지고 있습니다.
리터럴은 값을 만드는 방법 이며, 자바스크립트는 작성자가 제공한 리터널 값을 받아 데이터를 생성합니다.

let identifier_1 = "literal_1"

위의 코드를 보면 identifier_1 은 변수를 가리키는 식별자이며,
그 옆에 "literal_1"은 문자열 리터널인 동시에 identifier_1에 할당하는 값입니다.

원시 타입(Primitive Type)

원시 값(primitive)이란 객체가 아니면서 메서드도 가지지 않는 데이터입니다. 원시 값은 하나의 값만 나타낼 수 있는 '불변성'을 가지고 있으며, 새로운 값을 직접 할당 하기 전까지는 이미 생성한 원시 값은 객체,배열,함수와는 달리 변형 할수 없습니다.

// 원시 값
let foo = 5;

// 원시 값을 변경해야 하는 함수 정의
function addTwo(num) {
   num += 2;
  console.log("1# num: " + num); // #1
}
// 같은 작업을 시도하는 다른 함수
function addTwo_v2(foo) {
   foo += 2;
  console.log("2# foo: " + foo); // #2
}

// 원시 값을 인수로 전달해 첫 번째 함수를 호출
addTwo(foo);
// 현재 원시 값 반환
console.log("3# : " + foo);   // #3

// 두 번째 함수로 다시 시도
addTwo_v2(foo);
console.log("4# : " + foo);   // #4

// 원시 값에 직접 할당
foo = 8;
console.log("5# : " + foo);   // #5

// return 
1# num: 7   3# : 5   2# foo: 7   4# : 5   5# : 8

원시 타입은 다음과 같이 6가지가 존재합니다.

  • 숫자(Number)
  • 문자열(String)
  • 불리언(boolean)
  • null
  • undefined
  • 심볼(Symbol) - ES6

블로그의 시작글을 책을 소개 하는 글로 시작하네요 :)

사실 블로그는 처음이라 글을 잘 작성할 수 있을지 잘 모르겠지만... 

이번에 JavaScript에 대해서 자세히 공부 하기 위해서 JavaScript의 기본 서적으로 알려져 있는

코끼리 책을 구매하게 되었습니다! 

 

공부하는 내용들을 Notion으로 정리를 하고 있긴 하지만,

블로깅을 통해서도 글을 올리는것도 좋을거 같아 시작하게 되었습니다.

꾸준히 글을 올릴 수 있도록 다짐하며!

시작을 알리는 글은 이만 줄이겠습니다!

 

+ Recent posts