This section highlights typical errors made in JavaScript.
Accidentally Using the Assignment Operator
JavaScript code could give wrong results if a developer mistakenly uses = instead of == in an if statement.
The if statement checks if x is not equal to 10, and it returns false, which is the expected result.
This if statement shows true due to the value 10 being considered true.
This if statement shows false as the result, possibly unexpected, since 0 means false:
A task consistently provides the outcome of the task.
Expecting Loose Comparison
In a standard comparison, the type of data doesn't affect the result. The following if statement will be true:
In a direct comparison, the type of data is important. The following if statement will result in a false outcome:
People often overlook that switch statements require precise comparison.
This case switch will show a message:
The case switch mentioned won't show an alert.
Confusing Addition & Concatenation
Addition involves combining numbers by adding them together.
Concatenation means joining strings together.
In JavaScript, both actions utilize the + operator.
Due to this, when you add a numerical value as a number, the outcome will be different compared to adding the same value as a string.
When you add two numbers together, it can be tricky to predict the outcome.
Misunderstanding Floats
All JavaScript numbers are saved as 64-bit Floating point numbers (Floats).
Every programming language, including JavaScript, faces challenges when dealing with exact decimal values:
To address the issue mentioned, it is beneficial to use multiplication and division.
Breaking a JavaScript String
JavaScript lets you split a statement into two lines.
However, splitting a statement in the middle of a string won't function as intended.
To break a statement within a string, you should use a "backslash."
Misplacing Semicolon
Due to an incorrectly placed semicolon, this code block will run no matter what the value of x is.
Breaking a Return Statement
By default, in JavaScript, a statement is automatically completed at the end of a line.
Due to this, both of these instances will produce identical outcomes.
You can use JavaScript to split a statement into two lines.
Due to this, example 3 will yield the identical outcome.
But what occurs if you split the return statement into two lines, as demonstrated:
The function will give back undefined!
Why? Because JavaScript believed you intended:
Explanation
If a statement lacks information, for example:
JavaScript attempts to finish the statement by examining the following line.
But as this statement is finished:
JavaScript will close it automatically in this manner:
In JavaScript, you don't have to use a semicolon at the end of statements if you don't want to.
In JavaScript, the return statement should be concluded at the end of the line, as it forms a complete statement.
Don't ever interrupt a return statement.
Accessing Arrays with Named Indexes
Several programming languages allow the use of arrays with named indexes.
Arrays with named indexes are known as associative arrays or hashes.
JavaScript doesnot allow arrays to have named indexes.
In JavaScript, arrays are organized with numbered indexes:
In JavaScript, objects rely on named indexes.
When you use a named index to access an array in JavaScript, the array will be redefined as a regular object.
After the automatic update, the functions and characteristics of arrays may give unclear or wrong outcomes:
Ending Definitions with a Comma
In ECMAScript 5, it's okay to use commas at the end when defining objects or arrays.
Object Example:
person = {firstName:"John", lastName:"Doe", age:46,}
Object Example:
">
Array Example:
points = [40, 100, 1, 5, 25, 10,];
WARNING !!
Internet Explorer 8 will stop working.
JSON doesn't permit commas at the end.
JSON:
person = {"firstName":"John", "lastName":"Doe", "age":46}
JSON:
points = [40, 100, 1, 5, 25, 10];
Undefined is Not Null
In JavaScript, things like objects, variables, properties, and actions can be set as undefined.
Moreover, blank JavaScript objects can contain the value null.
Testing if an object is empty can become challenging due to this.
To check if an object exists, you can verify its type using the code snippet: undefined.
You can't check if an object is null because it'll cause an error if the object is undefined.
Incorrect:
if (myObj === null)
To fix this issue, check if an object is neither null nor undefined.
However, this might still result in an error:
Incorrect:
if (myObj !== null && typeof myObj
!== "undefined")
You need to check if something is not undefined before checking if it's not null.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparisons</h2>
<p>This returns false (as expected) because x is not equal to 10:</p>
<p id="demo"></p>
<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x == 10);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>This returns true (maybe not as expected), because 10 is true:</p>
<p id="demo"></p>
<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 10);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>This 'if' check gives back 'false' (which might not be what you anticipated), because when the value is 0, it's considered false:</p>
<p id="demo"></p>
<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 0);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>In normal comparisons, the type of data doesn't matter. This 'if' statement will be true:</p>
<p id="demo"></p>
<script>
let x = 10;
let y = "10";
document.getElementById("demo").innerHTML = Boolean(x == y);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>In a strict comparison, the type of data is important. This 'if' statement will not be true:</p>
<p id="demo"></p>
<script>
let x = 10;
let y = "10";
document.getElementById("demo").innerHTML = Boolean(x === y);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>Sometimes people forget that switch statements require exact matches.</p>
<p>This will work:</p>
<p id="demo"></p>
<script>
let x = 10;
switch (x) {
case 10:
document.getElementById("demo").innerHTML = "Hello";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>Sometimes people forget that switch statements require exact matches when comparing values.</p>
<p>This will not work:</p>
<p id="demo"></p>
<script>
let x = 10;
switch (x) {
case "10":
document.getElementById("demo").innerHTML = "Hello";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>When you add a number to another number, it gives a different answer than when you add a number to a word.</p>
<p id="demo"></p>
<script>
let y = 10
y += "5";
document.getElementById("demo").innerHTML = y;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>When you add a number to another number, the outcome is different from adding a number to a string.</p>
<p id="demo"></p>
<script>
let x = 10;
let y = "5";
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>Programming languages like JavaScript struggle with accurately representing decimal numbers.</p>
<p id="demo"></p>
<script>
let x = 0.1;
let y = 0.2;
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>All programming languages, like JavaScript, struggle with exact decimal values.</p>
<p>To solve the problem, it helps to multiply and divide:</p>
<p id="demo"></p>
<script>
let x = 0.1;
let y = 0.2;
let z = (x * 10 + y * 10) / 10;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Breaking a JavaScript Statement</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>Splitting a sentence halfway through won't function properly.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello
World!";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>To split a statement within a string, you need to use a "backslash."</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello \
World!";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p id="demo"></p>
<script>
let x = 5;
if (x == 19); {
document.getElementById("demo").innerHTML = "Hello";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>This example will return a correct result:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
let power = 10
return a * power
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>This example will return a correct result:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
let power = 10;
return a * power;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>This example will return a correct result:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
let power = 10;
return a * power;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>This example will return undefined:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
let power = 10;
return
a * power;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>This example will return undefined:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
let power = 10;
return;
a * power;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
document.getElementById("demo").innerHTML = person[0] + " " + person.length;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>When you try to access an array using a specific name, JavaScript might treat the array as a regular object instead. This can cause certain methods and properties of the array to not work properly, giving undefined or wrong outcomes.</p>
<p id="demo"></p>
<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
document.getElementById("demo").innerHTML = person[0] + " " + person.length;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>To check if something doesn't exist, see if its type is undefined.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = typeof myObj === "undefined";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>If you want to check if something exists, first check if it's not undefined.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = typeof myObj !== "undefined" && myObj !== null;
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery