Git Product home page Git Product logo

fewpjs-js-fundamentals-comparisons's Introduction

JavaScript Fundamentals: Comparisons

Learning Goals

  • Identify equality operators
  • Compare numbers using relational operators

Introduction

By now in JavaScript, we should be able to perform basic mathematical functions and assign values to variables, but how do we check to see if a value is what we're expecting? In addition to the operators we use to perform arithmetic and assign values to variables, JavaScript also has operators for comparing values. The value returned by a comparison is always true or false.

Note: JavaScript includes both strict and loose comparison operators. When writing JavaScript, you should strongly prefer the strict operators. The reason for this is the loose operators will return true even if the data types aren't the same, which can result in unexpected behavior and bugs that can be difficult to track down. Even if you find you need to compare two values of different data types, you should avoid using loose operators. You will be better off converting one of the variables to the other's data type first, then comparing them using a strict operator.

Identify equality operators

JavaScript includes four equality operators:

  • strict equality operator (===)
  • strict inequality operator (!==)
  • loose equality operator (==)
  • loose inequality operator (!=)

These operators allow us to compare values and determine whether they are the same.

Strict Equality Operator === and Strict Inequality Operator !==

The strict equality operator returns true if two values are equal without performing type conversions. Even if the values on both sides of the operator look similar (e.g., '42' === 42), the === operator will only return true if the data types also match:

42 === 42
// => true

42 === '42'
// => false

true === 1
// => false

'0' === false
// => false

null === undefined
// => false

' ' === 0
// => false

This is logical and accurate!

The strict inequality operator returns true if two values are not equal without performing type conversions:

9000 !== 9001
// => true

9001 !== '9001'
// => true

[] !== ''
// => true

You should prefer === and !== for comparisons.

Loose Equality Operator == and Loose Inequality Operator !=

The loose equality operator returns true if two values are equal:

42 == 42
// => true

However, it will also return true if it can perform a type conversion (e.g., changing the string '42' into the number 42) that makes the two values equal:

42 == '42'
// => true

true == 1
// => true

'0' == false
// => true

null == undefined
// => true

' ' == 0
// => true

The loose inequality operator is the opposite of ==. It returns true if two values are not equal, performing type conversions as necessary:

9000 != 9001
// => true

9001 != '9001'
// => false

[] != ''
// => false

This is confusing and inaccurate! It makes no sense that the string '0' is equal to the boolean false or that null and undefined — two completely different data types — are equivalent.

You should prefer === and !== for comparisons.

Compare Numbers with Relational Operators

JavaScript includes four relational operators:

  • greater than (>)
  • greater than or equals (>=)
  • less than (<)
  • less than or equals (<=)

The behavior of these operators is consistent with the meaning of the corresponding symbols in mathematics:

88 > 9
// => true

88 >= 88
// => true

88 < 9
// => false

However, beware of type conversion when comparing non-numbers against numbers. For instance, when a string is compared with a number, the JavaScript engine tries to convert the string to a number:

88 > '9'
// => true

If the engine can't convert the string into a number, the comparison will always return false:

88 >= 'hello'
// => false

88 <= 'hello'
// => false

Strings are compared with other strings lexicographically, meaning character-by-character from left-to-right. The following returns false because the Unicode value of 8, the first character in 88, is less than the Unicode value of 9.

'88' > '9'
// => false

If you aren't sure what data type you are going to be receiving, but you still need to compare them, make sure that you tell JavaScript to convert the string to a number first, and then compare.

Top Tip: Stick to comparing numerical values with the relational operators and you'll be golden.

Conclusion

JavaScript contains both equality and comparison operators that assist us in writing functional code. Make sure you're preferring the strict equality operators, and only comparing numerical values using the relational operators, and you'll avoid annoying errors that can be time consuming to troubleshoot!

Resources

fewpjs-js-fundamentals-comparisons's People

Contributors

drakeltheryuujin avatar lizbur10 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fewpjs-js-fundamentals-comparisons's Issues

This needs to be moved to earlier in the JavaScript section

This lab is very helpful, however, it needs to be moved to earlier in the JS section. I had to look up a lot of this info in order to do previous JS labs before this one and since it is just now being presented in the curriculum it's not as helpful. It would be much more helpful if it was delivered earlier in the section.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.