Help us understand the problem. What is going on with this article?

JavaScriptでの関数の取扱説明書

JavaScriptでの関数使用方法

rubyではdef~endで関数を使用していましたが
JSではfunction文を用います。
以下、定義です

function 関数名(引数){処理の内容}

定義だけ示されてもよく分からないと思うので具体例を交えていきます。

具体例①

function hello() {
  console.log("hello");
}

function name() {
  console.log("name");
}

hello();
name();

これを実行した結果は以下の画面です。
JavaScript.png
これは定義が分かれば理解できると思います。
では次の具体例をみていきましょう

具体例②

function sum(num1,num2){
  num1*num2;
}

let num1 = 1;
let num2 = 2;
console.log(sum(num1,num2));

これを実行した結果は以下の画面です。
JavaScript-3.png
なぜか2という結果が出力されていません。
これはそもそもreturnが入っていないからです。
rubyの場合ではreturnがなくても自動的に返り値を設定してくれましたが
JSではreturnを明確にしないとこのようなエラーがでます。
なので以下のようなコードを書くとエラーがなくなります。

function sum(num1,num2){
  return num1*num2;
}

let num1 = 1;
let num2 = 2;
console.log(sum(num1,num2));

実行結果は以下の画面になります。
JavaScript-4.png
これで正しく表記されました。

関数の種類

実は関数には2つの種類があります
①関数宣言
②無名関数
それぞれ、どのようなコードなのか、みていきましょう

関数宣言
function hello(){
  console.log('hello');
}

無名関数
let hello = function(){
    console.log('hello');
}

違いとしては無名関数は関数自体に名前がないです。
働きの違いとしてはどういう違いがあるのかみてきます。
無名関数をみてきます。以下のように記述していきます。

hello();

let hello = function(){
    console.log('hello');
};

そして実行結果は以下のようになります。
JavaScript-5.png
エラーが出てしまいました。
ここでプログラムの原理原則を思い出してください。
上から順番に式を実行していくのが原則でした。
今回はhelloが定義されていないにもかかわらず、
helloを呼び出しているのがエラーの原因です。
これを以下のように書けばうまくいきます

let hello = function(){
    console.log('hello');
}

hello();

プログラムの原則を利用して順序を逆にしました。
余談ですが関数宣言はrubyのように先に定義しなくても大丈夫です。
無名関数だけ今までと扱いが違うので注意しておきたいです。

Nyanmaru-12
訪問いただいてありがとうございます。 元塾講師が皆さまに対して分かりやすく お役立ちする知識をドシドシ書いていきます。 まずは、JSについて書きまくります。
https://twitter.com/KqQe2PIDCAqL1dT
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした