0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptの関数(基本中の基本)

Posted at

##はじめに
脱初心者にむけてアウトプットをしていこうと思って記事を書いております。
私は、まだ現場に出たことのない完全にど素人です。
間違ったことがありましたら、ぜひコメントいただけると幸いです。

##対象読者
JavaScriptの関数を学習している方が対象です!
関数の基本的な機能や使い方をざっくりと紹介しているので、ぜひ復習にお使いください。

##JavaScriptにおける関数とは
一つの目的のために、文がまとまったものです。
他の言語を学んだことがある方なら理解が早いと思いますが、簡単にいうと、メソッドです。

.js
function sayHello() {  //宣言始まり

  console.log("Hello world");
  console.log("こんにちは、世界!");

}  //宣言終わり

sayHello();  //関数が呼び出され、本文が実行される

このプログラムの**「{」から「}」**までが関数の宣言になります。
これにより関数seyHello()が定義されます。

最後のsayHello( )で関数の呼び出しを行います。
呼び出しが行われると、宣言内に書かれたコードが実行され、コンソール上に結果が出力されます。

##関数の戻り値

戻り値とは値を呼び出し側に戻すことです。
下記のプログラムの場合、returnに書かれたHello world が値を返ます。

.js
function getGreeting() {

  return "Hello world!";  //値(戻り値)を返す

}
const message = getGreeting(); //関数が呼び出され。戻り値が代入される
console.log(message);

この場合関数が呼び出された後に、定数messageに代入され、結果として出力される戻り値は、関数getGreeting()に記述された戻り値、
**Hello world!**になるのです。

##呼び出しと参照
呼び出しと参照の違いについて、
違いは簡単です

.js
function getGreeting() {

  return "Hello world!";

}

console.log(getGreeting()); //Hello world!         呼び出し
console.log(getGreeting);   //function getGreeting()  参照

()をつけるか付けないかで、呼び出しか参照を区別することができるのです。

##関数の引数について、
上記で説明した、呼び出しや、参照などは関数から値を受け取る方法でした。
逆に関数に情報を渡すには、引数を使います。

.js
function avg(a,b) {  //関数宣言においてaとbは「仮引数」と呼ばれる
  return (a + b)/2;
}
console.log(avg(5, 10));  //7.5

function avg(a,b) に書かれた(a, b)は仮引数と呼ばれます。
関数が呼び出された時に、呼び出し側で渡された値が代入され、本体が実行さえる。
そして出力される、戻り値は7.5になる。

##無名関数について、
その名の通り、関数名をしてしない書き方です。

.js
const f = function() {
//
};

このように書くことで実質的な効果としては関数宣言と変わらないが省略することができます。
呼び出し、参照するときも、変わらず

.js
console.log(f());  //呼び出し
console.log(f);    //参照

##アロー関数
アロー関数とは省略できる書き方です。
関数の定義と違う点が三つあります。

  1. functionが省略できる
  2. 引数が一つならば「()」を省略できる
  3. 関数本体が一つの式からなる場合、「{}」とreturn文を省略できる

.js
const f1 = function() { return "Hello!";} // 関数
const f1 = () => "hello!";

このアロー関数はES2015から導入された便利な記法です

##まとめ
今回は関数についてざっっくりと説明してみました。
ここの説明間違ってる!!とかありましたら、ぜひお声かけください🙇‍♀️
最後までご覧いただきありがとうございました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?