【JavaScript】変数と参照の振り返り⑦ 参照とconst・引数

はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

目的

• 変数についての理解を深める

本題

1.参照とconst

// constを使った再代入
// プリミティブ値
const a = "Hello";
// constで定義した場合、再代入できない　→　エラーになる
a = "bye";

// オブジェクト
const b = {
  prop: "hello"
}
// 新しいオブジェクトを代入しようとするとエラーになる
// constで変数宣言しているため、再代入不可
b = {};

// オブジェクト
const b = {
  prop: "hello"
}
// プロパティに対して変更を加えようとした場合はエラーにならない
b.prop = "bye";
console.log(b);

// constをオブジェクトで使用した際には、
// オブジェクトの再代入はできないが、
// プロパティの変更は可能

2.参照と引数

let a = 0;

// 関数の引数としてaを渡したい
function fn1(arg1){
  arg1 = 1;
  console.log(a, arg1);
}
// 引数aを入れて実行すると,(0,1)と出力される
fn1(a);

これは下記の書き方と結果が同じ

let arg1 = a;
arg1 = 1;
console.log(a,arg1)
fn1(a);

プリミティブ型を関数の引数として渡す場合には
値はそれぞれ独立しているので互いに影響は受けない

let b = {
  prop: 0
}

function fn2(arg2){
  arg2.prop = 1;
  console.log(b, arg2);
}
// 実行結果は{prop: 1}になる
fn2(b);
// つまり引数に渡したbというオブジェクトの参照が
// arg2にコピーされ、bと同じオブジェクトへの実体への参照を保持しているため
// プロパティの値を変更するとbの値にも影響が出る

// 中でarg2にオブジェクトを渡すと
function fn3(arg2){
  arg2 = {};
  console.log(b, arg2);
}
// この結果は{prop: 0} {}となる
fn3(b);

// この場合、bに影響は出ないがarg2だけ変更される
// 値がコピーされているのか、参照がコピーされるかで結果が変わる

今日はここまで！

参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム