BETA

【要約-改訂新版JavaScript本格入門】関数について①

投稿日:2019-07-04
最終更新:2019-08-23

以下の書籍の要約。

対象書籍

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
(対象箇所)
Chapter4.1~4.3

要約

Chapter4 くり返し利用するコードを1箇所にまとめる - 関数 -

4.1 関数について

関数とは、入力値(パラメータ)に対して何らかの処理を行い、その結果を返す仕組みのこと。
JavaScriptはデフォルトで多くの関数が提供されている。
(※参考: http://alphasis.info/javascript/built-in-functions/

また、デフォルトで用意されている関数以外でも開発者が自分で用意することができる。
この関数を「ユーザ定義関数」という。

ユーザ定義関数を定義するには、大きく以下4つの方法がある。

  1. function命令で定義
  2. Functionコンストラクタ経由で定義
  3. 関数リテラル表現で定義
  4. アロー関数で定義

以下、それぞれのアプローチで見ていく。

4.1.1 function命令で定義

関数を定義する場合の最も基本的なアプローチ。
関数名は「その関数がどのような処理を担っているか」がすぐわかるようにする。また「動詞+名詞」のcamelCace記法で書くのが一般的である。

// function命令の構文  
function 関数名(仮引数, ...) {  
    // 処理...  
    // 処理...  
    // 処理...  

    return 戻り値;  
}  

戻り値のない関数の場合、return命令は省略可能。
省略された場合、関数はデフォルトでundefinedを返す。

関数の呼び出し方法は、以下のように関数名(仮引数,...)で呼び出すことができる。

function showMessage(str) {  
    return `メッセージは${str}です。`;  
}  

// 関数呼び出し  
showMessage("Hello, World.");  


4.1.2 Functionコンストラクタ経由で定義

JavaScriptでは組み込みオブジェクトとしてFunctionオブジェクトが用意されており、このオブジェクトのコンストラクタを利用して、関数が定義できる。

// functionコンストラクタの構文  
// new演算子は省略可  
const 変数名 = new Function(仮引数,..., 関数の本体);  

ex.

let param = 'num1, num2';  
let processing = 'return num1 + num2;';  
const add = new Function(param, processing);  

console.log(add(2, 6)); // 8  


/********************************/   
// 作られる関数は以下と同じ  
function add(num1, num2) {  
    return num1 + num2;  
}  
/********************************/   

ただし、Functionコンストラクターは以下の理由で基本的に使用しないこと。

  • 可読性が低い
  • セキュリティに問題
    外部入力から関数を生成した場合、任意のコードの実行を許してしまう危険性がある
  • パフォーマンスの低下の危険性
    コンストラクターが呼びだされる度にコード解析から関数オブジェクトの生成まで行うため、ループ内で使用したりするとパフォーマンス低下をまねく


4.1.3 関数リテラル表現で定義

JavaScriptの関数はデータ型の一種。
リテラルとして表現できるし、変数に代入したり、引数として渡したり、戻り値として返したりすることができる。

// 関数リテラル表現の構文  
const 変数名 = function(仮引数, ...)  {  
    // 処理...  
    // 処理...  
    // 処理...  

    return 戻り値;  
}  

ex.

// 変数addに関数を格納  
const add = function(num1, num2) {  
    return num1 + num2;  
}  

// 関数呼び出し  
console.log(add(5, 10)); // 15  

関数リテラルは宣言した時点では名前を持たないため「匿名関数」または「無名関数」と呼ばれる。


4.1.4 アロー関数

ES2015で新たに追加されたアロー関数を利用することにより、関数リテラルをよりシンプルに記述することができる。

// アロー関数の基本的な構文  
(仮引数,...) => {...関数の本体...}  

アロー関数はfunctionキーワードを書かずに、=>を使用する。

記述化の簡素化が可能な条件は以下3つである。

  • functionキーワードは常に省略できる
  • 仮引数がひとつならば、仮引数をくくる丸括弧は省略できる
  • 関数本体がひとつの式からなる場合、ブロックを表す{...}、およびreturn文を省略できる

以下、いくつかのパターンを見ていく。

// ①引数がひとつ、関数本体がひとつの式  
// Notアロー関数  
function showMessage(str) {  
    return `メッセージは${str}です。`;      
}  
// アロー関数  
const showMessage_arrow = str => `メッセージは${str}です。`;  
// 結果  
console.log(showMessage("Hello, World.")); // メッセージはHello, World.です。  
console.log(showMessage_arrow("Hello, World.")); // メッセージはHello, World.です。  


// ②引数がひとつ、関数本体がひとつの式ではない  
// Notアロー関数  
function showMessage(str) {  
    let message = `メッセージは${str}です。`;  
    return message;      
}  
// アロー関数  
const showMessage_arrow = str => {  
    let message = `メッセージは${str}です。`;  
    return message;  
};  
// 結果  
console.log(showMessage("Hello, World.")); // メッセージはHello, World.です。  
console.log(showMessage_arrow("Hello, World.")); // メッセージはHello, World.です。  


// ③引数がひとつではない、関数本体がひとつの式  
// Notアロー関数  
function add(num1, num2) {  
    return num1 + num2;      
}  
// アロー関数  
const add_arrow = (num1, num2) => num1 + num2;  
// 結果  
console.log(add(100, 200)); // 300  
console.log(add_arrow (100, 200)); // 300  


// ④引数がひとつではない、関数本体がひとつの式ではない  
// Notアロー関数  
function add(num1, num2) {  
    let sum = num1 + num2;  
    return sum;      
}  
// アロー関数`  
const add_arrow = (num1, num2) => {  
    let sum = num1 + num2;  
    return sum;  
}  
// 結果  
console.log(add(100, 200)); // 300  
console.log(add_arrow (100, 200)); // 300  

注意点として、仮引数がない場合は仮引数をくくる丸括弧を省略することはできない。

const logOutput_arrow = () => console.log("ログを出力します。");  
logOutput_arrow(); // ログを出力します。  

また、オブジェクトリテラルを返す場合は、リテラル全体を丸括弧でくくらなければいけない。

// 予期せぬ値が返ってくる  
// {...}が関数ブロックとして、messageがラベルとして認識されるためundefinedが返ってくる  
const getObject_arrow = () => {message: "Hello, World."};  
console.log(getObject_arrow()); // undefined  

// 括弧でくくると正常な値が返ってくる  
const getObject_arrow = () => ({message: "Hello, World."});  
console.log(getObject_arrow().message); // Hello, World.  

以上のような構文の違いのほか、アロー関数には「thisの固定」という機能がある。
それについては6.7.4項で別途解説がある。


この記事の続きはこちら↓
【要約-改訂新版JavaScript本格入門】関数について②

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

funacchiの技術ブログ。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!