# JavaScriptとは

- jsはウェブブラウザで動くプログラミング言語
- 型の位置づけとしては動的型付け言語
動的型付け言語って？
**動的にデータ型が設定される言語**

let sample = 100;　//Number型
sample = "文字列"　//String型

特徴:
- 型の宣言をしなくてもjsが実行されたタイミングでデータがきまる
- 途中で変数のデータ型が変わることが許容されている

静的型付け言語

int num;
num = 5;

## JavaScriptとECMAScript
- JavaScriptはECMAScriptという仕様によって動作が決められている。
- ブラウザで動くjs、サーバーサイド側で動くnode.js各実行環境毎に仕様が決められている。
- ECMAScriptという仕様（共通の部分）も毎年アップデートされている。
ECMAScript1 1997年6月
ECMAScript2 1998年6月
2015年よりES2015(ES6)西暦が使われるようになった。

## 大文字と小文字を区別する
jsでは大文字小文字を区別する

// `name`という名前の変数を宣言
const name = "azu";
// `NAME`という名前の変数を宣言
const NAME = "azu";

## 予約語をもつ
あらかじめjsで決まったキーワードが存在し、それらは変数や関数の名前として定義できない

let const ＝ 1 //SyntaxError: Unexpected token 'const'

function const(name) {
    console.log("こんにちは" + name + "さん");
}

const("名前"); //SyntaxError: Unexpected token 'const'

ECMAScript 2020現在で主な予約語
- await
- break
- case
- catch
- class
- const
etc...

## 文はセミコロンで区切られる
文はセミコロン（;）によって区切られる
意図しない挙動が起こる可能性があるため基本的にはつける

// 式や文の間にスペースがいくつあっても同じ意味となる
1 + 1;
1   +   1;

[面白い記事](https://pisuke-code.com/js-when-do-you-need-semicolon/)

セミコロンがある場合とない場合の子挙動について

正しい書き方

let y = 0;

let func = function hoge(x) {
  return x;
}; 

(function fuga(x) {
  console.log("x : ", x);
  y = x;
  return x;
})(100);

console.log("func : ", func);
console.log("y : ", y);

//x :  100
//func :  func :  ƒ hoge(x) {
// return x;
// }
//y :  100

セミコロンがない場合

let y = 0
 
let func = function hoge(x){ 
    return x 
}
    
(function fuga(x){
    console.log('x : ', x)
    y = x
    return x
})(100)
 
console.log('func : ', func)
console.log('y : ', y)

関数のあとにセミコロンなしで () で囲まれた値・関数がある場合、それは直前の関数の引数として解釈される。

以下の用に解釈する

let y = 0;

let func = (function hoge(x) {
  return x;
})(function fuga(x) {
  console.log("x : ", x);
  y = x;
  return x;
})(100);

console.log("func : ", func);
console.log("y : ", y);

//x :  100
//func :  100
//y :  100

▼ やってることは次と同じになる

hoge関数にfuga関数を丸ごと渡す
hoge関数内でfuga関数を返す
最後にそれに100を渡して実行

## strict mode
名前のとおり厳格な実行モードで、古く安全でない構文や機能が一部禁止されている。
使い方

"use strict";

letやconstなどの変数の宣言をしてあげないとエラーになる

"use strict";

x = 3;
console.log(x);

// => ReferenceError

//一番上に記載を行うとトップレベルで適応される。

{
  "user strict" //適応される
}

//ここは適応されない

https://www.sejuku.net/blog/58342

</br>

**皆さんも何があれば！！！**

---
### 動的型付け言語
JavaScript, Ruby, PHP, Pythonなど

**メリット**
* 記述量が少ない

**デメリット**
* プログラムを実行しないとバグが分からない
* 無駄なメモリが発生する

<br/>

### 静的型付け言語
TypeScript, Java, Go, C言語など

**メリット**
* コンパイル時にエラーが発生する
（コンパイル・・・ソースコードを解析し、コンピュータが直接実行可能な形式のプログラムに変換すること。[参考リンク](https://e-words.jp/w/%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB.html)）
* メモリの最適化が行える
* パフォーマンスの向上が狙える

**デメリット**
* 記述量が多い

> コンパイラも決して全知全能ではありません。ちゃんと型を教えてあげなければ、いいコンパイラに成長しません。逆に型注釈をちゃんとしていけば、多くの問題に気がつく賢いコンパイラに育っていきます。この観点に立つと、型注釈はコストではなく、コンパイラを正しく育て、バグを未然に防ぐための「投資」と考えることができるのではないでしょうか。

<br/>

**参考リンク**
[動的型付けと静的型付け](https://qiita.com/toryuneko/items/c023031b61886cae2a99)
[動的言語と静的言語の違い](https://qiita.com/wann/items/16920b070dc0483f152a)
[動的型付けと静的型付けの違い](https://zenn.dev/kousei_089/articles/quiet_dynamic)
[サバイバルTypeScript](https://typescriptbook.jp/overview/static-type)

---
### リンター/フォーマッター

* ESlint
* Prettier

2つ合わせて導入するケースが多い。やや設定が必要。
VSCodeの拡張機能もある。

[eslintとprettierの組み合わせ](https://zenn.dev/kohski/articles/eslint-prettier-integration)