JS学習記録第2回　関数の使い方について

こんにちは。
大阪でweb制作会社に勤務しているゆーたです。
スキルアップしたいと思い、JSの学習記録をつけています。
よろしくお願いします！

今回はJSの関数の定義についてまとめます。
JSの使い方として、一番に関数の定義ということがあるかと思います。
自分でもどう説明すれば良いか分からないので、コードを書いてみます。

let hello = 'hello yuta';
console.log(hello);

まずはこのコード。
前回の記事で学習したように、このコードは
letで変数を宣言します。
変数の名前はhelloです。
その変数helloにはhello yutaという文字を格納しています。

といった感じでしょうか。
そして出力タグconsole.log(hello);で、
変数helloの中のhello yutaを出力させる感じです。

実際にコンソールで確認しますと、

hello yutaが出ました！！
ちなみにconsole.log('hello yuta');でも同じように出力されます。
ということは変数hello=hello yutaということですね！

続いて、こういう感じの使い方もできます。

let name = 'yuta';
console.log('hello' + name);

letで変数を宣言します。
変数の名前はnameです。
その変数nameにはyutaという文字を格納しています。

そして出力タグconsole.log('hello' + name);で、
console内にあるhelloと、変数nameの中のyutaを出力させます。
結果は以下の通り。

うん、なるほどといった感じですね！

関数について

ここから本題です。
JSには使い回しが効くように関数というものがあります。
関数とは簡単にいうと、処理を１つにまとめてそれを使い回しができるようにするものだと思います！

例をみてみましょう！！
先程記述した
let name = 'yuta';
console.log('hello' + name);
こちらを参考に説明します。

例えば、こちら。

let name = 'yuta';
console.log('hello' + name);

let name2 = 'tarou';
console.log('hello' + name2);

上記の出力を見てみると、
helloyuta
hellotarou
になるかと思います。しかし、同じような記述なので１つにまとめられそうですね！

そこで関数の登場です！
関数の書き方は以下の通り。

function hello(name){
   console.log('hello' + name);

};
hello('yuta');
hello('tarou');

んー少しややこしくなってきました。。。。
関数の書き方としてfunctionを使って書きます。(JQueryで見たことある！)
上記のコードの説明として、
functionで関数宣言をする。
関数名はhello。
関数helloの中にconsole.log('hello' + name);の出力タグが入っている。
関数helloの()の中にnameが入っており、引数の役割を果たしている。
という感じです。

functionで関数helloを設定後、
関数helloを使用して、
hello('yuta');　関数helloの中身console.log('hello' + name);を出力。
hello('tarou');　関数helloの中身console.log('hello' + name);を出力。
を使用しています。
helloの()内は引数の役割を果たしています。
んー。うまくまとめることができているのだろうか。。。

出力を見てみると以下のような感じです。
うまく出力されていますね！

また関数には２つ３つと引数を追加することも可能です。

function hello(Firstname, Lastname){
   console.log('hello' + Firstname + Lastname);

};

hello('山田','太郎');

少し慣れるまで時間がかかりそうですね_:(´ཀ`」 ∠):

twitterやっています！
よろしければフォローよろしくお願いします＾＾

twitter
https://twitter.com/trizolyuta