2018/02/22

基礎からやっていくJavaScript再入門 - #3

データ型

JavaScriptでのデータ型は7つしかないので、他のプログラミング言語よりかは少ない。 さらにJavaScriptは動的に型をつけるので、変数宣言の時には型指定は必要なし。実行時に勝手に決めてくれるのが特徴。

• 数値 (Number) - 123
• 文字列 (String) - "foobar"
• 真偽 (Boolean) - true, false
• null - JavaScriptは大文字小文字が区別されるので小文字で書く
• undefined
• シンボル(ES2015から登場) (Symbol)
• オブジェクト (Object)

これらのデータ型はプリミティブ型とオブジェクト型に分けられる。つまり、オブジェクト以外は全てプリミティブ型になる。

オブジェクト型

JavaScriptの世界はその ほとんどがオブジェクト型 である。例えば配列もオブジェクトの一種、さらにプログラミング言語でおなじみの関数でさえオブジェクト😳 typeof 演算子でデータ型を調べることが出来るので簡単にテストしてみる。

console.log(typeof { a: 123 }); // object
console.log(typeof ["foo", "bar"]); // object
console.log(typeof function test(){ }); // function

関数だけは特別扱いとして function が返ってくるものの、言い方は 関数オブジェクト 配列も 配列オブジェクト

オブジェクト値の型を調べるには他の演算子も用意されていて、そっちで違いがわかる。 だけど、このデータ型の区別や違いはオブジェクトが深く関係しているので、オブジェクトを学んだ際にはっきりと違いがわかるようになる✨

リテラル

リテラルとは、スクリプトの中に直接記述する値のこと。その記述した値はスクリプトを実行する際にその値のまま扱われる。 JavaScriptではかなりのものがリテラルで用意されている。その中でもよく使うものを調べてみた。

• 真偽値リテラル
• 配列リテラル
• 文字列リテラル
• 整数リテラル
• 浮動小数点リテラル
• オブジェクトリテラル

一つ一つ見ていく。

真偽値リテラル

これはそのまま書いている通り、true と falseである。

var flag = true;

if(flag === true) {
  console.log('It is true!');
}

配列リテラル

配列リテラルは [] で表現できる。このリテラルで配列を作成すると、指定した値で配列が初期化されてその値分の配列の長さがセットされる。

var movie = ['Star Wars', 'Kill bill'];

カンマの存在

配列リテラルで作成する場合、以下のような事も可能。

var array = ['a', , 'c'];
console.log(array); // ["a", empty, "c"]

末尾にカンマを置くと古いブラウザでエラーを起こす可能性があることと、可読性もよろしくないので末尾のカンマは書かないようにする。 また歯抜けのような配列を置きたい場合は、より明確にする為にその部分に undefined をセットする。

var array = ['a', undefined, 'c'];
console.log(array); // ["a", undefined, "c"]

文字列リテラル

文字列リテラルは、ダブルクオート "" もしくは シングルクオート '' のどちらかで囲った文字を指す。 これはJavaScriptで必ず使うものなので、特に意識せず使っているはず。

var foo = 'test';
var bar = "example";

特殊文字について

文字列リテラル内で使える特殊文字群は以下の通り。

文法とデータ型 - JavaScript | MDNより引用

具体的なコード例としてはこんな感じ。

var text = 'It\'s perfect!';
console.log(text); // It's perfect!

var breakText = "\"First\" line \n SecondLine";
console.log(breakText);
// "First" line
//  SecondLine

テンプレートリテラル

ES2015からテンプレートリテラルというものが追加された。バックチックで表現。文字列リテラルからの拡張といった感じ。 例えば、改行をそのままま表現できたり、変数の値をそのまま埋め込む事が出来る。変数を入れたい場合は ${変数名} を文字列に埋め込む。

var text = `This is
test`;
console.log(text);
// This is
// test

var a = 123;
var b = "EXAMPLE";

var withValue = `Number is ${a}, This is an ${b}.`;
console.log(withValue); // Number is 123, This is an EXAMPLE.

整数リテラル

JavaScriptでは整数を、10進数、16進数、8進数、2進数の4つを表す事が可能。

• 10進数は先頭がゼロでない一連の数字
• 16進数は先頭が 0x または 0X から始まる。0から9とaからf(大文字小文字は影響なし)までで構成させる
• 8進数は先頭が 0 または 0o (0O)から始まる。0から7までの数字で構成される
• 2進数は先頭が 0b または 0B から始まる。0と1で構成される

0, 10, 123, -615 //10進数
0xff //16進数
015, 0o77 //8進数
0b11, 0b0011 //2進数

正直、8進数と2進数を使う場面があまり出てこないのですが、16進数ならHTML/CSSでお馴染みのカラーコードを10進数に変換とかで使える。 Web系向けのサービスやアプリで8進数や2進数ならこう使う！とかこうなら使える/使ってるなどありましたらどなたか教えてください🙇🏻 @nismit_

浮動小数点リテラル

このリテラルの書き方には特徴があって、必ず1つの数字と小数点か指数が必要。

1. 整数 - ("+, -"が先についてても良い)
2. 小数点
3. 少数部 - (10進数で表す)
4. 指数部 - (e か E で表す)

指数部で e または E を使用した場合は"+, -"の符号を付けることも出来る。一応0から始まる場合は .123 のように省略は可能だけどJavaScriptの場合はオブジェクトへのアクセスで . はよく使うので0は省略せずに書いた方がミスは少なそうです。

オブジェクトリテラル

頻繁に使用するオブジェクトリテラル。{} で表すことができる。基本的な形は以下。

var obj = {
  name: 'nismit',
  age: 28
}
// -> {name: "nismit", age: 28}

オブジェクトに関しては、JavaScriptにおいて核となる部分なのでまずはさらっとしておく。後ほど何回かに分けてオブジェクトとは何かを調べて行こうと思います。また少し気になるなーと思って調べて行くと、結局オブジェクトが関係して来ることが多いです。