JavaエンジニアによるJavaScript入門3(関数、アロー関数、無名関数、コールバック関数)

関数

関数	説明
ユーザ定義関数	自分で自由に作れる関数
組み込み関数	準備されてる関数

---

ユーザ定義関数

引数の書き方はJavaもJavaScriptも同じ。
戻り値がある場合、JavaScriptは関数の処理の最後に「return」を書くだけ。
Javaと違い関数名の前に戻り値の型の宣言はいらない。

Javascript（引数：なし,戻り値：なし）

引数	戻り値
なし	なし

function test(){
    console.log('test');
}
test();

【コンソール出力結果】

test

Java（引数：なし,戻り値：なし）

引数	戻り値
なし	なし

public static void main(String[] args) {
	test();
}

public static void test() {
	System.out.println("test");
}

【コンソール出力結果】

test

---

Javascript（引数：あり,戻り値：なし）

引数	戻り値
あり	なし

function getComment(str){
    console.log(str);
}
getComment('コメントをとるよ');

【コンソール出力結果】

コメントをとるよ

Java（引数：あり,戻り値：なし）

引数	戻り値
あり	なし

public static void main(String[] args) {
	getComment("コメントをとるよ");
}

public static void getComment(String str) {
	System.out.println(str);
}

【コンソール出力結果】

コメントをとるよ

---

Javascript（引数：なし,戻り値：あり）

引数	戻り値
なし	あり

function getCommentOfNumber(){
    return 5;
}
const commentNum = getCommentOfNumber();
console.log(commentNum);

【コンソール出力結果】

5

Java（引数：なし,戻り値：あり）

引数	戻り値
なし	あり

public static void main(String[] args) {
	int commentNum  = getCommentOfNumber();
	System.out.println(commentNum);
}

public static int getCommentOfNumber() {
	return 5;
}

【コンソール出力結果】

5

---

Javascript（引数：あり,戻り値：あり）

引数	戻り値
あり	あり

function sum(num1,num2){
    return num1 + num2;
}
console.log(sum(1,2));

【コンソール出力結果】

3

Java（引数：あり,戻り値：あり）

引数	戻り値
あり	あり

public static void main(String[] args) {
	System.out.println(sum(1,2));
}
	
public static int sum(int num1,int  num2) {
	return num1 + num2;
}

【コンソール出力結果】

3

---

組み込み関数

Javascript

• Stringオブジェクト concatメソッド(文字列結合)

//JavaScript
const str = 'a';
const str2 = 'b';
const str3 = 'c';
console.log(str.concat(str2,str3));

【コンソール出力結果】

abc

Java

• String型 concatメソッド(文字列結合)

String str =  "a";
String str2 =  "b";
String str3 =  "c";
System.out.println(str.concat(str2).concat(str3));

【コンソール出力結果】

abc

『Java,JavaScriptとの差分』
言語によってメソッドで書き方は異なるが、基本的にメソッドの呼び出し方はJava,JavaScriptで変わらない

---

Javascript

• Arrayオブジェクト

const fruits = new Array();
fruits.push('リンゴ');
fruits.push('バナナ');
console.log(fruits);

//シンタックスシュガー（簡単に書く方法）
//上記と同じ結果になる
const fruits2 = [
    'リンゴ', 'バナナ'
];
console.log(fruits2);

【コンソール出力結果】

(2) ['リンゴ', 'バナナ']
(2) ['リンゴ', 'バナナ']

注意
const（定数）でも後からpushで値の追加をすることができる!

//JavaScript
const fruits3 = [
    'リンゴ', 'バナナ'
];
console.log(fruits3);
fruits3.push('メロン');
console.log(fruits3);

【コンソール出力結果】

(2) ['リンゴ', 'バナナ']
(3) ['リンゴ', 'バナナ', 'メロン']

Java

• ArrayListクラス

// ArrayListを宣言
ArrayList<String> fruits = new ArrayList<String>();
// 2つ追加
fruits.add("りんご");
fruits.add("バナナ");
for (String str : fruits) {
	System.out.println(str);
}
//1つ追加
fruits.add("メロン");
System.out.println("ーー追加後ーー");
for (String str : fruits) {
	System.out.println(str);
}

【コンソール出力結果】

りんご
バナナ
ーー追加後ーー
りんご
バナナ
メロン

注意！
以下記事からはJavascriptのみの説明となる
Javaの記載はない

Javascript関数(補足)

ユーザ定義関数の定義の仕方（2パターン）

Javascript

①一般的なユーザ定義関数

//一般的なユーザ定義関数
function test1(){
    console.log('test1です');
}
test1();

【コンソール出力結果】

test1です

②変数・定数に関数を入れて定義する

//変数・定数に関数を入れる
const test2 = function(){
    console.log('test2です');
}
test2();

【コンソール出力結果】

test2です

※変数・定数に関数を入れて定義する場合アロー関数を使用することができる
（詳細は下にアロー関数について記載してあるのでそちらを参照）

//変数・定数に関数を入れる(アロー関数)
const test3 = () => {
    console.log('test3です');
}
test3();

【コンソール出力結果】

test3です

無名関数・匿名関数

他の場所から呼び出されることがない関数は名前をつけない。だから無名関数。
その場限りでしか使用しないことを想定しているため。（1回しか使用されないことが想定されている関数）

コールバック関数

関数の引数の中に関数設定されているもののこと
コールバック関数を使用できるメソッドは決まっている。
サンプルではforEachメソッドを使用。

Javascript

// 一般的な関数
function getSampleItem(){};

// コールバック関数
fruits.forEach(function(input){
    console.log(input);
});

アロー関数

Javascript

ES6から使用できる
「function」の代わりに「=>」を使用する

【名前がある関数の場合】

//functionを使用した書き方
const getItem = function() {
    console.log('アロー');
};
getItem();

//アロー関数を使用した書き方
const getItemArrow = () => {
  console.log('アロー');
};
getItemArrow();

【コンソール出力結果】

アロー
アロー

【名前がない関数　コールバック関数】

//名前がない関数　コールバック関数
//functionを使用した書き方
const fruits = ['りんご', 'バナナ', 'スイカ'];
fruits.forEach(function(input) {
  console.log(input);
});

//アロー関数を使用した書き方
fruits.forEach((input) => {
  console.log(input);
});

【コンソール出力結果】

りんご
バナナ
スイカ
りんご
バナナ
スイカ

上記だけではアロー関数の利点がほぼ無いように見えるが、
アロー関数は省略する書き方ができ、スッキリした書き方ができる

アロー関数の省略

//通常のアロー関数
const getComment = ((comment) => {
    console.log(comment);
});
getComment('通常のアロー関数');

//省略したアロー関数 引数が１個の場合()が不要
const getComment2 = comment => {
  console.log(comment);
};
getComment2('アロー関数　引数が１個の場合()が不要');

//省略したアロー関数　処理が１行なら{}も不要。
const getComment3 = comment => console.log(comment);
getComment3('アロー関数　処理が１行なら{}も不要。');

【コンソール出力結果】

通常のアロー関数
アロー関数　引数が１個の場合()が不要
アロー関数　処理が１行なら{}も不要。