Arithmetic Operators

javascript
#Exponentiation #increment #decrement #JavaScript tutorial #JavaScript basics #arithmetic operators #addition #subtraction #multiplication #division #modulus #JavaScript math #mathematical operations #arithmetic examples #operator table

Section 2.3: Operators

Tutorial 2.3.1: Arithmetic Operators

Arithmetic Operators in JavaScript

Arithmetic operators are used to perform mathematical calculations on numeric values (literals or variables). They are fundamental for tasks ranging from simple calculations to complex algorithms.

OperatorSymbolDescriptionExampleResult
Addition+Adds two numbers5 + 38
Subtraction-Subtracts one number from another10 - 46
Multiplication*Multiplies two numbers7 * 642
Division/Divides one number by another20 / 45
Modulus%Returns the remainder of division10 % 31
Exponentiation**Raises a number to a power2 ** 38
Increment++Increases a number by 1let x = 5; x++6
Decrement--Decreases a number by 1let y = 7; y--6

List of Arithmetic Operators

  1. Addition (+):
  • Adds two numbers.
  • Example:
     let sum = 10 + 5; // 15
  1. Subtraction (-):
  • Subtracts the second number from the first.
  • Example:
     let difference = 10 - 5; // 5
  1. Multiplication (*):
  • Multiplies two numbers.
  • Example:
     let product = 10 * 5; // 50
  1. Division (/):
  • Divides the first number by the second.
  • Example:
     let quotient = 10 / 5; // 2
  1. Modulus (%):
  • Returns the remainder of the division.
  • Example:
     let remainder = 10 % 3; // 1
  1. Exponentiation (</strong>)**:
  • Raises the first operand to the power of the second operand.
  • Example:
     let power = 2 ** 3; // 8
  1. Increment (++):
  • Increases a variable by one.
  • Postfix Increment (i++):
     let i = 5;
     console.log(i++); // Outputs 5, then i becomes 6
     console.log(i);   // Outputs 6
  • Prefix Increment (++i):
     let i = 5;
     console.log(++i); // Outputs 6
  1. Decrement (--):
  • Decreases a variable by one.
  • Postfix Decrement (i--):
     let i = 5;
     console.log(i--); // Outputs 5, then i becomes 4
     console.log(i);   // Outputs 4
  • Prefix Decrement (--i):
     let i = 5;
     console.log(--i); // Outputs 4

Operator Precedence

Operator precedence determines the order in which operations are performed in an expression.

  • Order of Operations:
  1. Parentheses ()
  2. Exponentiation **
  3. Multiplication *, Division /, Modulus %
  4. Addition +, Subtraction -
  • Example:
  let result = 10 + 5 * 2; // 20
  // Multiplication happens before addition
  // 10 + (5 * 2) = 10 + 10 = 20

  let resultWithParentheses = (10 + 5) * 2; // 30
  // Parentheses alter the order
  // (10 + 5) * 2 = 15 * 2 = 30

Type Coercion with the `+` Operator

  • When adding a number and a string, JavaScript converts the number to a string and concatenates.
  let message = "The total is: " + 20; // "The total is: 20"
  • Be cautious to avoid unexpected results.
  console.log(5 + "5"); // "55"
  console.log(5 - "2"); // 3 (string "2" is coerced to number)

Unary Operators

  1. Unary Plus (+):
  • Attempts to convert the operand to a number.
  • Example:
     let x = "5";
     let num = +x; // 5 (number)
  1. Unary Negation (-):
  • Converts the operand to a number and negates it.
  • Example:
     let x = "5";
     let num = -x; // -5 (number)

Examples of Arithmetic Operations

  1. Calculating the Area of a Circle:
   const PI = 3.1416;
   let radius = 5;
   let area = PI * radius ** 2;
   console.log("Area:", area); // Area: 78.54
  1. Even or Odd Checker:
   let number = 7;
   if (number % 2 === 0) {
     console.log(number + " is even.");
   } else {
     console.log(number + " is odd."); // Outputs: 7 is odd.
   }
  1. Incrementing Values in a Loop:
   for (let i = 0; i < 5; i++) {
     console.log("Count:", i);
   }
   // Outputs:
   // Count: 0
   // Count: 1
   // Count: 2
   // Count: 3
   // Count: 4

Common Mistakes to Avoid

  • Integer Division:
  • Unlike some languages, dividing integers in JavaScript returns a floating-point number.
    console.log(5 / 2); // 2.5
  • Modulus with Negative Numbers:
  • Be cautious, as the result can be negative.
    console.log(-10 % 3); // -1

Exercise

  1. Simple Calculator:
  • Create variables a and b with values 12 and 4.
  • Perform all arithmetic operations and log the results.
     let a = 12;
     let b = 4;
     console.log("Addition:", a + b);        // 16
     console.log("Subtraction:", a - b);     // 8
     console.log("Multiplication:", a * b);  // 48
     console.log("Division:", a / b);        // 3
     console.log("Modulus:", a % b);         // 0
  1. Increment and Decrement Practice:
  • Initialize counter to 10.
  • Use both prefix and postfix increment/decrement operators and observe the outputs.
     let counter = 10;
     console.log(counter++); // 10
     console.log(counter);   // 11
     console.log(++counter); // 12
     console.log(counter--); // 12
     console.log(counter);   // 11
     console.log(--counter); // 10

Continue Reading

Handpicked posts just for you — based on your current read.

Comparison and Logical Operators

Comparison and logical operators allow you to compare values and perform logical operations. They are fundamental for decision-making in JavaScript, such as in if statements and loops.

Comparison operators compare two values and return a boolean (true or false).

Dec 11, 2024 Tutorial

Non-Primitive Data Types (Objects, Arrays, and Functions) 

  fruits.pop(); // Removes the last element
  fruits.shift(); // Removes the first element
  console.log(fruits);
  • Iterating Over Arrays:
Dec 11, 2024 Tutorial

Primitive Data Types

Primitive data types represent single values (as opposed to complex objects). JavaScript has the following primitive types:

A string is used to represent text.

Dec 11, 2024 Tutorial

Variables and Constants

  • Use let for variables whose value may change.
  • Example:
     let score = 10;
     score += 5; // score is now 15
Dec 10, 2024 Tutorial

Hello World and Comments

  • What happens?
  • The console.log() function outputs text to the console.
  • "Hello, World!" is a string (text) enclosed in double quotes.
  • In a browser:
  • Open the console (Ctrl+Shift+J or Cmd+Option+J) and type the code.
  • In Node.js:
  • Save the code in a file (e.g., hello.js) and run it using:
Dec 10, 2024 Tutorial

How to Create a Chrome Extension for Automating Tweets on X (Twitter) 

console.log("[content.js] Script loaded and running...");

chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  if (request.action === "postTweet") {
    try {
      const tweetBox = document.querySelector('div[data-testid="tweetTextarea_0"]');
      if (!tweetBox) throw new Error("Tweet input field not found.");

      tweetBox.focus();
      document.execCommand("insertText", false, request.tweet);

      const tweetButton = document.evaluate(
        '//*[@data-testid="tweetButton"]',
        document,
        null,
        XPathResult.FIRST_ORDERED_NODE_TYPE,
        null
      ).singleNodeValue;

      if (!tweetButton) throw new Error("Tweet button not found.");
      tweetButton.click();

      sendResponse({ success: true });
    } catch (error) {
      sendResponse({ success: false, error: error.message });
    }
  }
});

The popup.html file provides a simple UI for users to control the extension. Add this HTML code:

Dec 10, 2024 Tutorial

Easy JavaScript Tutorial for Beginners

In the external script.js file:

document.getElementById('myButton').addEventListener('click', function() {
    alert('Hello from external JavaScript!');
});
Sep 18, 2024 Tutorial

JavaScript Tutorial for Absolute Beginners 

console.log("Hello, World!");
  • Open index.html in your web browser.
  • Right-click and select "Inspect" or press Ctrl + Shift + I to open the Developer Tools.
  • Go to the "Console" tab to see the message.
Sep 02, 2024 Tutorial

Creating a Dropdown Menu with JavaScript

  • Experiment with adding more features to your dropdown, such as nested menus or hover effects.
  • Consider how you can make your dropdown menus responsive for mobile devices.
  • Explore JavaScript libraries like jQuery or Bootstrap that offer built-in support for dropdowns if you need more complex functionality.

This tutorial provides a comprehensive guide to creating a functional and accessible dropdown menu. By understanding these principles, you’ll be well-equipped to implement dropdowns in your web projects, enhancing both usability and design.

Sep 02, 2024 Tutorial

Understanding JavaScript Classes 

class Animal {
  constructor(type, name) {
    this.type = type;
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super('Dog', name);
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // Output: Buddy barks.

The super keyword is used to call the constructor or methods of the parent class. This is particularly useful when you need to add functionality to a subclass while still retaining the behavior of the parent class.

Sep 02, 2024 Tutorial

Asynchronous JavaScript: A Beginner's Guide

Handling Errors with Async/Await:

You can use try and catch blocks to handle errors in async/await code.

Aug 30, 2024 Tutorial

Understanding the DOM in JavaScript: A Comprehensive Guide 

const parentElement = document.getElementById('parent');
const firstChild = parentElement.firstChild;
console.log(firstChild); // Logs the first child of parentElement

Understanding the DOM is essential for anyone looking to develop dynamic, interactive web applications with JavaScript. The DOM provides a powerful API to manipulate the structure, style, and content of web pages. By mastering DOM manipulation, you can create responsive and engaging user experiences.

Aug 30, 2024 Tutorial

Exponentiation

No preview available for this content.

Jan 26, 2024 Code

Discussion 0

Please sign in to join the discussion.

No comments yet. Start the discussion!