JavaScriptで大きく躓いた関数をミキサーで表してみた
愛と勇気のいいとこ取り
EROエンジニアのきのピーです。
この記事は、未経験からエンジニアになり、入社2年目で年収600万円を達成するまでの道を書いたブログです。
今回はJavaScriptで大きく躓いた事です。
これまでやっていたHTMLやCSSって、上から順に書いた通りに動いてたんで、書けば書くほど良かったんです。
ただ、JavaScriptになると一気に違いました。
関数とか数学用語が出て来て、意味が分からんくなりました。
そして、速攻で躓きました。
そもそも関数って何だか分かりますか?
芸術大学出身の僕には何のことかさっぱりです。
以下の記事で言ってることが分かりやすかったですが
関数とは「何かをぶち込んだら何かがでてくるマシーンみたいなもの」です。
上記の意味を意識しておくだけで全然理解が違ったと思います。
せっかくなんで「ミキサー」でミックスジュースを作る関数を作って見ようと思います。
let mixer = function(water, fruits_1, fruits_2, fruits_3,){
let mixjuice = water + fruits_1 + fruits_2 + fruits_3 + 'のミックスジュース';
return mixjuice;
}
mixer('500mlの','オレンジ', 'りんご', 'パイナップル');
かなり素人くそい関数ですけど、最初はね。こんなもんで良いと思います。
ミキサーの中に「水、フルーツ1、フルーツ2、フルーツ3」を入れると
500mlのミックスジュースが出て来る関数です。
意味を一つずつ解説して行きます。
最初に関数を書きます。
let mixer = function()
functionはミキサー本体と思ってください。
さて、ミックスジュースに必要なものは、まずは水ですよね。
let mixer = function(water)
水だけでは、ミックスジュースは出来ないから
フルーツを3つ足します。
let mixer = function(water, fruits_1, fruits_2, fruits_3)
これで、入れる物(引数)が完成です。
ミックスジュースという事なんで全て足します。
let mixer = function(water, fruits_1, fruits_2, fruits_3,){
let mixjuice = water + fruits_1 + fruits_2 + fruits_3 + 'のミックスジュース';
}
functionの後に{}が付きましたが、ミキサーを動かした時の処理を書きます。
メチャクチャ適当ですが、とりあえず全部足してます。
さて、ミックスジュースが一応出来ましたが、まだミキサーの中にミックスジュースが入ったままです。
ミキサーからミックスジュースを出す(返す)には「return」が必要です。
let mixer = function(water, fruits_1, fruits_2, fruits_3,){
let mixjuice = water + fruits_1 + fruits_2 + fruits_3 + 'のミックスジュース';
return mixjuice;
}
これでミックスジュースを出す(返す)関数が出来ました。
上記の関数の定義はマニュアルを記載したようなもので、実際には動いてません。
動かすには、実際に水と果物を入れます。それが以下です。
mixer('500mlの','オレンジ', 'りんご', 'パイナップル');
これをJavaScriptのconsole.logで見てみると
「500mlのオレンジりんごパイナップルのミックスジュース」って文言がConsoleで出て来ます。
※こんな感じ
文字列をくっつけただけの関数ですが、こんな感じで関数(何か出て来るマシーンみたいなもの)が出来ます。
僕は、超絶ハイパー頭が悪いので、returnの使い方が半年以上出来ませんでし。(アホすぎる。。)
今でも関数を使うのは、相当に悩んでいますが、昔よりかはマシになっている気がします。
次回はJavaScriptで作って遊んだソースコードを紹介します。
それでは、グッドブラック!
この記事が気に入ったらサポートをしてみませんか?