Javascript 基礎 基本文法について

Javascript 基礎 基本文法について:

学習で学んだことを自分なりに整理してみました。間違っている部分や追記した方が良いなどアドバイスがあれば教えていただけたら幸いです。

実行方法

Webブラウザのデペロッパーツールに入力する。

ファイルに記述するほどでもないけど何か試してみたい時などに使う。

htmlタグに直接入力する。

以下のタグの間に入力する。

<script>入力する</script> 

Javascript(.js)ファイルを作成し、htmlタグで読み込む。

以下のタグを記入する。

<script src="jsファイルのパス"></script> 

---

Javascriptのデータ型

プリミティブ型とオブジェクト型に別れる

プリミティブ型

Number

数字を表す。整数だけでなく小数、また正数負数もまとめてNumberとなる。

Number同士で四則演算をすることが可能

String

文字列(テキストデータ)を表す。

シングルクオーテーション

'' 

ダブルクオーテーション

"" 

で囲む必要がある。

また+を使用して文字列同士を連結したり、.lengthと末尾に記入することで文字列の長さを確認したりすることができる

Boolean

真偽値(true,false)を表す。

ループ処理や分岐処理などで使われる。

Null

値が存在しないことを表す、値自体がnullである。

Undefind

値が定義されていないことを表す。値がないことを示しているわけではないのでNullとは違う。

Symbol

Symbolという組み込み関数でのみ作れる。オブジェクトのプロパティ名(キー)を文字列に変換することなくSymbolのまま使うことができる。ES6で導入された新しいプリミティブで、活用する機会は今の所少ない。

---

変数

変数とは

「値を収納する箱」のようなもの

a = 1; //aの中に1という数値が入っている 
 
b = 'hello' //bの中に'hello'という文字列が入っている 
 
c = true //cの中にtrueという真偽値が入っている 

変数のルール

変数名のはアルファベット、アンダーバー(_)、$記号から始めないとならない

name ○ 
_name ○ 
$name ○ 
-name × 
1name × 
@name × 

また、大文字と小文字は別の変数として扱われる(nameとNameはそれぞれ違う変数名)

変数宣言時に使うキーワード

const

変数に値を再代入することはできず、再宣言もできない。

再代入できない変数のことを定数と呼ぶ

let

変数に値を再代入することができる。

var

letと同じように変数に値を再代入することができる。

しかしvarを使うとスコープの問題が発生するので、基本的にvarは使用しない。

スコープ

変数名や関数名が有効とされる範囲のこと。スコープを意識することで同名の変数を別のものとして使いまわすことができる。

function test(){ 
  let x = 1; 
  console.log(x); // x=1 
  { 
    let x = 2; 
    console.log(x) // このブロックはx=2となる 
  } 
  console.log(x); // このブロックはx=2ブロックの外でありx=1ブロックの中なのでx=1となる 
} 

varによって発生するスコープ問題

varはブロックレベルではなく関数でのスコープとなるため、ブロック内外問わずスコープするので同名の変数が全て変更されてしまう

function test(){ 
  var x = 1; 
  console.log(x); // x=1 
  { 
    var x = 2; 
    console.log(x) // このブロックはx=2となる 
  } 
  console.log(x); // varを使うことでブロック関係なく直前の変数をスコープしてしまうのでx=2となる 
} 

よって、現在はlet,constを使うのが主流になっている。

追記

@hogefuga さんから

function文もvarと同様に、使うべきではありません(残念ながら入門サイト等では頻繁に使われていますが)。function文には宣言の巻き上げ(ホイスティング)という厄介な機能が絡んでいるからです。

といったアドバイスをいただきました、また、基本的にはアロー関数を使用した方が良いということも教えていただきました、ありがとうございます！

アロー関数に関してはまだ詳しく学習していないので、学習次第修正していければと思います。

デバッグ

値を確認する作業は意図しない挙動（バグ）があった時のデバッグ作業に必須。

プログラムの不具合を解決するスキルはエンジニアにとって非常に重要であり、開発、学習スピードにも大きな差が出る。

値の確認方法

alert

Webページ上に値の内容が含まれている「アラートダイアログ」を表示する。

alert(文字や変数を入力) 

cosole.log

デペロッパーツール上に「値の内容」を表示する。複数の値や詳細な値を確認できるためデバッグ時にはこちらの方がおすすめ。

console.log(文字や変数を入力する)