• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ

プログラミング学習初心者のための情報メディア by Proglus(プログラス)

You are here: Home / プログラミング入門 / 前置演算と後置演算の違いについて!変数へ代入した結果が異なる理由を徹底解説!

前置演算と後置演算の違いについて!変数へ代入した結果が異なる理由を徹底解説!

2020-09-30 By プログラミング入門ナビ編集部

Tweet
このエントリーをはてなブックマークに追加
Pocket

目次

  • 1 はじめに
  • 2 前置演算・後置演算とは
    • 2.1 インクリメント・デクリメント
    • 2.2 前置演算の場合
    • 2.3 後置演算の場合
    • 2.4 変数単体の演算では同じ結果になる
  • 3 変数への代入結果
  • 4 前置演算と後置演算の違い
    • 4.1 前置演算で実際に起きていること
    • 4.2 後置演算で実際に起きていること
  • 5 まとめ
  • 6 今すぐメルマガ登録!
  • 7 動画で学ぶプログラミング入門

はじめに

電卓と赤いペン

JavaScriptで演算を行う時、予想と違う結果になって悩んだことはありませんか?

バグのもとにもなりますし、理由がわからないと修正方法もわからず困ってしまいますよね。

この記事では、よくある原因の1つである前置演算・後置演算の挙動の違いについて解説します。

意外に正しく理解できていないことも多いので、自信のない方はぜひこの機会に学習してくださいね。

前置演算・後置演算とは

まず、前置演算・後置演算とは何かについて説明します。

インクリメント・デクリメント

JavaScriptに限らず、多くのプログラミング言語に存在する演算方法としてインクリメント・デクリメントがあります。

前置演算と後置演算はこの演算に関わるトピックであるため、先にこの内容について理解しておきましょう。

インクリメント(increment)は英語で増加の意味で、値を1増やすことです。

下記のように変数の横にプラスを2回書くとインクリメントされて値が1増えます。

var x = 10;
x++;  //インクリメント
console.log(x);  //11

デクリメント(decrement)は英語で減少の意味で、値を1減らすことです。

下記のように変数の横にマイナスを2回書くとデクリメントされて値が1減ります。

var x = 10;
x--;  //デクリメント
console.log(x);  //9

前置演算・後置演算とは、このインクリメント・デクリメントを変数の前に書くか(前置)、後に書くか(後置)のことを指します。

前置演算の場合

前置演算では、変数の前に演算子を書きます。

例えばインクリメントする場合は下記のようになります。

var x = 10;
++x;  //前置演算
console.log(x);  //11

後置演算の場合

後置演算では、変数の後に演算子を書きます。

例えばインクリメントする場合は下記のようになります。

var x = 10;
x++;  //後置演算
console.log(x);  //11

変数単体の演算では同じ結果になる

上記のように、変数x(初期値:10)について、前置・後置に関わらず演算後の変数の値は同じ(11)です。

この通り、変数単体で演算を行う場合の結果は前置演算・後置演算とも同じとなります。

変数への代入結果

前置演算・後置演算で挙動が異なるのは別の変数への代入時です。

下記の例を見てください。

var x = 10;
var y;

var a = 10;
var b;

var y = ++x;  //前置演算
var b = a++;  //後置演算

console.log(x);  //11
console.log(y);  //11
console.log(a);  //11
console.log(b);  //10

このように、前置演算と後置演算で代入先の変数の値が異なっていますね。

一体なぜなのでしょうか。

前置演算と後置演算の違い

実は、前置演算では先にインクリメント(またはデクリメント)を行ってから他の処理を行い、後置演算では先に他の処理を行ってから最後にインクリメント(またはデクリメント)を行うという挙動の違いがあります。

文章では理解しづらいため、実際にインクリメントするときに起きていることをコードを見ながら確認しましょう。

前置演算で実際に起きていること

前置演算では先にxをインクリメントした後、yにxを代入します。

var x = 10;
var y;

y = ++x;  //「++x; の後に y = x;」と同じ

console.log(x); //11
console.log(y); //11

そのため、前置演算での代入の後、yは1増えた後のx(つまり11)、xはインクリメントされた値(つまり11)となる訳です。

後置演算で実際に起きていること

後置演算では先にbにaを代入した後、aをインクリメントします。

var a = 10;
var b;

b = a++;  //「b = a; の後に a++;」と同じ

console.log(a); //11
console.log(b); //10

そのため、後置演算での代入の後、bは1増える前のa(つまり10)のまま、aはインクリメントされた値(つまり11)となる訳です。

まとめ

パソコンの前で計算する男性

JavaScriptでの前置演算・後置演算の違いについて解説しました。

実はJavaScriptに限らず、C言語やJava等の一般的なプログラミング言語でも同じ違いがあります。

慣れるまではややこしいですが「前置演算は(代入の)前に演算」「後置演算は(代入の)後に演算」と語呂合わせで覚えるのがおすすめです。

正しく理解し使い分けて、バグを未然に防ぎましょう!

動画で学ぶプログラミング入門

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Tweet
このエントリーをはてなブックマークに追加
Pocket

Filed Under: プログラミング入門 Tagged With: JavaScript, インクリメント, デクリメント, 前置演算, 後置演算

Primary Sidebar

Proglus

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • MySQL WorkbenchをMacにインストールする方法
  • 無料のSSL証明書Let’s Encryptを設定・更新・自動更新する方法(CentOS7, Apache2.4対応)
  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法
  • AWS Cloud9のプレビューが上手く表示されない時の対処法
  • よくあるSQLのエラーの種類と自力でエラーを取り除く方法について説明します
  • VSCodeで画像が表示されない場合の対処法
  • MySQL 5.7 for Windowsのアンインストール方法
  • macOSで2つのファイルの差分を確認するには?便利なdiffツールを紹介

最近の投稿

  • 【04/02更新】Udemyプログラミング入門講座等の割引クーポン配布
  • Cloud9が容量不足? EBSボリュームを拡張する方法を解説します!
  • Linuxの標準エディタvi(vim)の超基本的な使い方!動画で初心者にもわかりやすく解説!
  • swpファイルが作成されてvimでファイルが編集できない時の対処法とは?
  • 【無料モニター(2期生)募集!】「就職活動用のポートフォリオ制作講座」

カテゴリー

  • AWS
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門

タグクラウド

AI AWS AWS Cloud9 Bootstrap Cloud9 CodeWing CSS Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy vscode Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 改行 未経験 機械学習 開発環境構築

アーカイブ

  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2021 · programmingnavi.com ・About・プライバシーポリシー