【javascript】関数について勉強し直した時の備忘録

個人的にjavascriptの勉強をし直してて関数周りで知らなかったことの備忘録

戻り値のreturnは処理を中断する

戻り値とは関数内でうんぬんかんぬん処理をした後に戻す値
returnで返す

function test(name) {
	if(name == "田中"){
		return "僕は田中です";
	}
	return "僕は田中じゃない！";
}
console.log(test("田中"));// 僕は田中です

returnってループ処理を中断するbreakみたいに、関数内で使うと次に処理があっても実行しないみたいね

else書く必要ないんだ、へーって思ったので備忘録

return falseはブラウザ標準のイベントを中断できる

aタグにリンクは貼るけどクリックさせたくないっていう時に使えるみたい

<a href="https://twotone.me/" target="_blank" onclick="return false">リンク</a>

または、

<a href="https://twotone.me/" target="_blank" id="btn">リンク</a>
<script>
document.getElementById("btn").onclick = function() {
	return false;
};
</script>

void(0)を使ってリンクをさせない方法

ちなみにvoid(0)を使った書き方も乗っけておく
処理の中断としてはreturn falseと一緒みたいね

<a href="javascript:void(0)">リンク</a>

こっちはhrefに指定をするみたいね
また、void()って引数に何を入れてもundefinedを返すみたい

undefinedって変数みたいで、中に何か入れられるから毎回undefinedである保証がないみたいでvoid()だったら毎回undefinedをきっちり返すみたい
よくわからないから記事貼っとく

それと、単純にリンクにクリックされたくない時はCSSでcursor:pointer;使ってるからあまり使わないけど、マウスをホバーさせた時にjavascript:void(0)って表示がでるのがださいって意見もあって使われないってどっかにか書いてあった

戻りに値にオブジェクトやら配列を指定できるみたい

単純に値を返す方法でしか使ったことがなくて、へーって思ったから備忘録

function testFunc(value){
	let testObj = {
		// プロパティ名 : 値
		name : value,
		func :  function() {
			console.log(this.name+"です。");
		}
	}
	return testObj;
}
// 使い方
console.log(testFunc("佐藤"));// オブジェクト返す
console.log(testFunc("鈴木").name);// 鈴木
console.log(testFunc("鈴木")["name"]);// 鈴木(こういう書き方もできるというメモ)
testFunc("田中").func();// 田中です。

こんな感じでオブジェクトを返すこともできるよってお話

似たような感じで配列なんかもできる

function testFunc(value){
	let array =[0,1,2];
	array.push(value);
	return array;
}
console.log(testFunc(3));// (4) [0, 1, 2, 3]

20201012追記:戻り値に真偽値を持たせることができる

へーって思ったので追記

function testFunc(num){
	return num % 3 === 0;
}
console.log(testFunc(12));// true