【JavaScript】関数とオブジェクト①

#はじめに

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

前回の記事

#目的

• 関数とオブジェクトについての理解を深める

#本題
###1.関数
####関数の特徴

#####JavaScriptでは、引数の順番が重要

// 関数を定義
function fn(a,b) {
  console.log(a,b);
}
// bの引数だけ渡したいと思っても,順番に出力されるからできない
// もし、0を消した場合はundefinedとb側に出力される
fn(0,1);

bの値だけを渡したい場合どうすればいいのか

// 関数を定義
function fn(a,b) {
  console.log(a,b);
}
// もしbの値だけ出力したい場合は、下記のようにaの値の場所にNULLと記述
fn(null,1);

#####JavaScriptの関数名が重複していた場合、後から定義した関数名が有効になる

// 関数を定義
function fn(a,b) {
  console.log(a,b);
}
// 同じ名前の関数を用意
function fn(a,b) {
  console.log(2);
}
// この場合、実行結果は2と出力される
fn(1)

// javascriptでは引数が違くても関数で判断されるので注意
// エラーも発生しない

関数の重複を避けたい場合はどのようにするべきか

// 下記のように関数式で定義すると
// constによってsyntax errorが発生する
// 基本的には無名関数で書くのでfunctionの後ろのfnは削除（あっても動く）
const fn = function (a,b) {
  console.log(a,b);
}

function fn(a,b) {
  console.log(2);
}

fn(1)

#####default値について

// bに予め値を渡しておく　＝＞　default値
function fn(a,b = 1) {
  console.log(a,b);
}
// 実行結果はaで引数の1が、bではdefault値の1が渡ってくる
fn(1);

// もし実行結果の値がundefinedやnullだったら
// nullだと「null」で返ってくる
fn(1, null);
// undefinedだとそのままdefault値が返ってくる
fn(1,undefined);

// 意図的に値を空にしたい場合はnullを使用する
// 下記の書き方は基本的にしない
let c = undefined;
fn(1,c);
// こっちが一般的
let d = null;
fn(1,d);

• Argumentsについて

関数コンテキストによって自動生成される

function fn() {
  console.log(arguments);
  console.log(a,b);
}
fn(1, undefined)

上記のようにargumentsを出力すると実行結果は下記の通り

console.

Arguments(2) [1, undefined, callee: (...), Symbol(Symbol.iterator): ƒ]
0: 1
1: undefined
callee: (...)
length: 2
Symbol(Symbol.iterator): ƒ values()
get callee: ƒ ()
set callee: ƒ ()
[[Prototype]]: Object

0番目に1,1番目にundefinedと出力されている
（配列、、、、？）

function fn() {
  console.log(arguments);
  console.log(a,b);
}
// 実引数がargumentsに格納されて出力された
fn(1, undefined)

// 仮引数がなくてもargumentsの値は出力される

例

function fn() {
  // 下記のように変数a,bにargumentsの番号を代入
  const a = arguments[0];
  const b = arguments[1];
  // このようにすることで、argumentsが引数の役割をargumentsが果たしていることになる
  console.log(arguments);
  console.log(a,b);
}
fn(1, undefined)

// 引数の数が決まっていない場合（ループなど）で使用する

しかし最近ではES6から導入されたレストパラメーターを使用する

// ３つのドットとargsという値で表す
function fn(...args) {
  // argsを出力すると配列として出力される
  console.log(args)
}
// ３つ目の引数を増やしたとしても対応できる
fn(1, undefined,3)

#####returnについて

function fn() {
  const a = arguments[0];
  const b = arguments[1];
  // このようにaという値を呼び出し元関数fnに戻す
  return a;
}
// 下記でcに関数を渡す
let c = fn(1, undefined);
// returnによりfnにはaが入っているので、下記の実行結果は1になる
console.log(c);

今日はここまで！

#参考にさせて頂いた記事

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