ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript関数とは何ですか?それらの作成と使用に関する初心者ガイド。

JavaScript関数とは何ですか?それらの作成と使用に関する初心者ガイド。

DDD
リリース: 2025-01-22 16:31:10
オリジナル
467 人が閲覧しました

What are JavaScript Functions? A Beginners Guide to Writing And Using Them.

JavaScript 関数はプログラミングにおける強力なツールです。単純な電卓を構築する場合でも、複雑な Web アプリケーションを構築する場合でも、関数は不可欠です。この記事では、関数の書き方と使い方を簡単にマスターできるように、JavaScript 関数の基礎知識を段階的に説明します。

関数とは何ですか?

関数は、特定のタスクを実行するコードのブロックです。一度作成すると、必要に応じて繰り返し呼び出すことができるため、コードの再利用性が向上します。

関数の書き方は?

最初の関数を段階的に書いてみましょう:

<code class="language-javascript">function greet() {
  console.log("Hello, world!");
}
greet();</code>
ログイン後にコピー

コードの説明:

  • function: 関数を宣言するためのキーワード。
  • greet: 関数名 (任意のわかりやすい名前を使用できます)。
  • (): パラメーター リスト (ここで空は、関数が入力を必要としないことを意味します)。
  • {}: 関数本体。関数実行用のコードが含まれます。

greet() 関数を呼び出すと、コンソールに「Hello, world!」が出力されます。

パラメータとパラメータ値

パラメータを使用すると、関数がより柔軟になります。パラメータは関数の定義時に宣言される変数で、パラメータ値は関数の呼び出し時にパラメータに渡される実際の値です。

<code class="language-javascript">function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet("Majeedat");</code>
ログイン後にコピー

出力: こんにちは、Majeedat!

パラメータとパラメータ値の違い:

  • パラメータ: 関数の宣言時に定義されるプレースホルダー。
  • パラメータ値: 関数の呼び出し時にパラメータに渡される実際の値。

戻り値

関数は情報を出力するだけでなく、値を返すこともできます。

<code class="language-javascript">function add(a, b) {
  return a + b;
}
let result = add(5, 3);
console.log(result); // 输出:8</code>
ログイン後にコピー

return キーワードは、関数が呼び出された場所に計算結果を返します。

関数式

関数を定義するもう 1 つの方法は、関数式です。

<code class="language-javascript">const greet = function(name) {
  console.log(`Hi, ${name}!`);
};</code>
ログイン後にコピー

関数を変数に代入します。

アロー関数

アロー関数は、関数を定義するためのより簡潔な方法です。

<code class="language-javascript">const greet = (name) => {
  console.log(`Hey, ${name}!`);
};</code>
ログイン後にコピー

単一行関数の場合、中括弧は省略できます:

<code class="language-javascript">const add = (a, b) => a + b;
console.log(add(2, 4)); // 输出:6</code>
ログイン後にコピー

機能の利点

  1. 再利用性: 一度書いたら何度でも使えます。
  2. 可読性: コードをより明確にし、理解しやすくします。
  3. モジュール化: コードを小さく管理しやすいモジュールに分割します。

初心者が犯しやすい間違い

A. 関数の呼び出しを忘れました: 関数を定義しましたが、それを呼び出すのを忘れました。

<code class="language-javascript">function greet() {
  console.log("Oops, you forgot to call me!");
}
// 需要调用 greet();</code>
ログイン後にコピー

B. パラメータの不一致: 関数によって予期されるパラメータの数が、実際に渡されるパラメータの数と一致しません。

<code class="language-javascript">function add(a, b) {
  return a + b;
}
console.log(add(5)); // 输出:NaN (Not a Number)</code>
ログイン後にコピー

C. 無限ループ: 関数自体が無限再帰的に呼び出されます。

概要

JavaScript 関数は、動的な対話型 Web アプリケーションを構築するための基礎です。関数を使いこなせるようになると、プログラミングの効率が大幅に向上します。 今すぐ独自の関数を作成し始めてください。

作者: MJ さようなら!

以上がJavaScript関数とは何ですか?それらの作成と使用に関する初心者ガイド。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート