はじめに
初学者です。
基本は備忘録
間違っていたら教えてくださると助かります。
変数の違い
| タイプ | 再宣言 | 再代入 | スコープ | 初期化(ホイスティング) |
|---|---|---|---|---|
| let | x | ○ | ブロック | x |
| const | x | x | ブロック | x |
| var | ○ | ○ | 関数 | undefined |
暗黙的な型変換
状況によって型が自動で変更される
動的型付け言語 →自動で型が変更される
静的片付け言語 →宣言時に型を指定する
厳格な等価性 a === b 型が一致しているかまで比較する
抽象的な等価性 a == b 型はあっている必要がない
抽象的な等価性では比較時にどちらかの型に合わせる
console.log(true == 1)//処理結果 true
//1がtrueに変換されて比較
falsyとtruthy
falsy
false
0
0n
''
null
undefined //変数を代入なしで宣言した等
Nan //期待->数値 数値として処理できなかった時
truthy→それ以外全て
AND条件とOR条件
const a = 0
const b = 1
const c = 3
const d = 2
console.log(a && b)//結果： 0
console.log(a || b)//結果: 1
console.log((a || b) && (c || d))//結果: 3
//&&は左から順にtrueの限り判定を繰り返す
//falseが出た時点でその値を返し、出なければ最後を返す
//&&は左から順にfalseの限り判定を繰り返す
//trueが出た時点でその値を返し、出なければ最後を返す
AND条件とOR条件の応用
ORの応用
function hello(name) {
name = name || 'Ren';
console.log('Hello' + name);
}
hello()
//値に何も渡されなければ(false)Renをnameにセットする
ANDの応用
function hello(name) {
name = name || 'Ren';
console.log('Hello' + name);
}
let name;
name && hello(name);
//nameがtrueなら関数を実行する
プリミティブ型とオブジェクト
データ型
JavaScriptには8種類ある
8種類を大きく分けて二つに分けることができる
プリミティブ型
- String
- Number
- Boolean
- Undefined
- Null
- Symbol
- BigInt
オブジェクト型(プリミティブ型以外の全て)
- object
プリミティブ型
変数には値が格納される
一度作成するとその値を変更することはできない(immutable)
let a = 'いちご'
//メモリの、異なるaddress2つに「いちご」と変数aが保存される
//変数aはいちごへの参照を保持する
a = 'ぶどう'
//いちごとは異なるaddresにぶどうが保存される
//変数aの参照先をぶどうに書き換える
//プリミティブ型(String)のいちごが変更されたわけではない
//再代入は変数の参照先を変えている
オブジェクト型
変数には参照が格納される。
値を更新できる(mutable)
let a = {
name: 'いちご'
}
//参照の流れ
//変数a→オブジェクトへの参照{...}→オブジェクトの実態{name}→nameの参照先{いちご}
//オブジェクトの実態が変わっても変数aの参照先は変わらない(mutable)
//オブジェクトは名前{プロパティー}付きの参照を管理する入れ物
プリミティブ型のコピー
let a = 'いちご';
let b = a;
b = 'ぶどう'
//値を新しいaddressにコピーするので、コピー元に影響はない
| let a = いちご | a = b | b = ぶどう |
|---|---|---|
| いちご | coppied,いちご | - |
| a ↑ | b↑ | →ぶどう |
| - | - | aの参照先がぶどうを向く |
オブジェクトのコピー
let a = {
name: 'いちご'
};
let b = a;
b.name = 'ぶどう'
//値をコピーするのではなく参照先をコピーするので、
//bのnameを変更するとコピー元(a)の値にも影響する
| let a = {name: いちご} | b = a | b.name = ぶどう |
|---|---|---|
| いちご | - | - |
| {name}↑ | ←copyied {...}への参照 | - |
| {...}への参照↑ | b↑ | - |
| a↑ | - | aもbもぶどうに変わる |
実際の挙動
//プリミティブ型のコピー
let a = 'いちご'
let b = a;
b = bye;
console.log(a, b) //結果 いちご ぶどう
//参照先の値がコピーされる。
//オブジェクト型のコピー
let c = {
name: 'いちご'
}
let d = c
d.name = 'ぶどう'
console.log(c, d)//結果 ぶどう ぶどう
//オブジェクトへの参照がコピーされる
d = {}
//のように新しいオブジェクトを生成するとcとdの参照しているオブジェクトは別々のものになるので、dに変更を加えてもcに影響はない
参照とconst
プリミティブ型
const a = 'いちご'
a = 'ぶどう';
console.log(a)//結果 エラー
//constによりa→「いちご」の参照が固定されているため変更不可
オブジェクト
const b {
name: 'いちご'
}
//b = {} x constによりオブジェクトへの参照が固定されているため変更不可
b.name = 'ぶどう';
console.log(b); //結果 ぶどう
//constで固定されているのはオブジェクトへの参照の固定のみ
//オブジェクト内の値については何も制限を受けていないので変更可能
関数の引数に値を渡す
プリミティブ型
let a = 0;
function fn1(arg1) {
arg = 1;
console.log(a, arg1);//結果 0 1
}
fn1(a);
//プリミティブ型を関数の引数に渡す場合は値が別々に存在しているため
//変更がコピー元に影響しない
オブジェクト型
let b = {
name : 'いちご'
}
function fn2(arg2) {
arg2.name = 'ぶどう'
console.log(b, arg2);//結果 ぶどう ぶどう
}
fn2(b);
//オブジェクトを関数の引数に渡す場合はオブジェクトへの参照がコピーされる
//参照しているオブジェクトは同じなので、コピー元に影響がある
分割代入
オブジェクトから特定のプロパティーを抽出して宣言を行う。
const a = {
name: 'いちご'
}
let { name } = a;
name = 'パンダ';
console.log(a.name, name);//いちご ぱんだ
//a.nameの値をコピーする
//オブジェクトとは切り離され、変数nameと値の「いちご」が生成される
//分割代入を行う場合：変数とkeyの名前は合わせる
let {name: animal} = a;//変数名を変更したい場合
関数と分割代入
const a = {
name: 'いちご'
}
function fn(obj) {
let { name } = a;
name = 'ぶどう'
console.log(a, name);//いちご ぶどう
}
fn(a);
//元のオブジェクトへの影響はない
//簡略化できる
function fn2({ name }) {
name = 'ぶどう'
console.log(a, name);//いちご ぶどう
}
fn2(a);
//関数の引数にオブジェクトが入る際分割代入で引数nameが使える状態になる
多階層のオブジェクトから分割代入で宣言した変数が、オブジェクトだった場合値を変更すると分割代入元の値にも影響がある
オブジェクトの比較
const a {
name: 'いちご'
}
const b {
name: 'いちご'
}
console.log(a === b)//結果 false
console.log(a == b)//結果 false
//オブジェクトの格納されている変数はオブジェクトへの参照を保持している
//参照しているオブジェクトが違うためfalseになる
console.log(a.name === b.name)//結果 true
//オブジェクトの値を比較するとtrueになる