This article has been compiled to demonstrate basic javascript syntax, concepts, and examples.
Without further ado, let's get started.
Variables are containers for storing data values.
In this example 🐰 bunny is a variable, "bunny" is the value of the variable, and "string" is the data type.
var bunny = 'lucy';
var dog = 'Tom';
var cat = 'Molly';
console.log(bunny, dog, cat);
Variable Naming Rules
JavaScript variables must be identified with unique names.
JavaScript uses the keyword var to declare variables.
The equal sign is used to assign values to variables.
The semicolon ends the statement.
JavaScript is case sensitive. This means that bunny and Bunny are different variables.
JavaScript variables must begin with a letter, underscore, or dollar sign.
Acceptable naming conventions ✔️
var bunny = 'lucy';
var _bunny = 'lucy';
var $bunny = 'lucy';
Unacceptable naming conventions ❌
var 1bunny = 'lucy';
var -bunny = 'lucy';
var @bunny = 'lucy';
Variable Declarations
JavaScript has three types of variable declarations:
- var
- let
- const
Code sample
function animalName() {
var bunny = 'lucy'; // Local variable
console.log(bunny);
}
Data Types
- Primitive Data Types
- Non-Primitive Data Types
Primitive
- Number
- String
- Boolean
- Null
- Undefined
- Symbol
Non-Primitive
- Object
- Array
- Function
Examples of Primitive Data Types
Number
var bunny_height = 3.14; // A number with decimals
var bunny_height = 3; // A number without decimals
String
var bunny_name = 'Lucy'; // Using double quotes
var bunny_name = 'Tom'; // Using single quotes
Boolean
var isBunnyHappy = true;
var isBunnyHappy = false;
Null
var bunny = null; // Value is null. Null means "non-existent"
Undefined
var bunny; // Value is undefined. Undefined means a variable has been declared, but not defined
Symbol
var bunny = Symbol('Lucy'); // Symbol is a primitive data type, whose instances are unique and immutable
Examples of Non-Primitive Data Types
Object
var bunny = {
name: 'Lucy',
age: 3,
isHappy: true,
};
console.log(bunny.name); // Output: Lucy
console.log(bunny.age); // Output: 3
console.log(bunny.isHappy); // Output: true
Array
var bunnies = ['Lucy', 'Tom', 'Molly'];
console.log(bunnies[0]); // Output: Lucy
console.log(bunnies[1]); // Output: Tom
Function
function adoptBunny() {
console.log('Adopted a bunny');
}
Exercise
Declare a variable named 🐰bunny and assign it to an object with the following properties: name, age, and isHappy. Set the value of name to a string, age to a number, and isHappy to a boolean.
Functions
Functions are a set of statements that perform a task or calculates a value.
Functions are executed when "something" invokes it (calls it).
Example of function declaration:
// sum up the total bunnies in a farm
function sumBunnies() {
var blackBunnies = 10;
var whiteBunnies = 20;
var totalBunnies = blackBunnies + whiteBunnies;
return totalBunnies;
}
The function above is called
sumBunniesand it has no parameters.The function above returns the value of
totalBunnies.The function above is called by using the function name followed by parentheses.
Example of function invocation:
sumBunnies();
Let's write the function and invoke it in the console:
function sumBunnies() {
var blackBunnies = 10;
var whiteBunnies = 20;
var totalBunnies = blackBunnies + whiteBunnies;
return totalBunnies;
}
sumBunnies();
// result: 30
- The function above will return the value of
totalBunnieswhich is30.
The above function can be rewritten as an anonymous function
var sumBunnies = function () {
var blackBunnies = 10;
var whiteBunnies = 20;
var totalBunnies = blackBunnies + whiteBunnies;
return totalBunnies;
};
sumBunnies();
Function Parameters
Function parameters are listed inside the parentheses () in the function definition.
Function arguments are the values received by the function when it is invoked.
Example
function sumBunnies(blackBunnies, whiteBunnies) {
var totalBunnies = blackBunnies + whiteBunnies;
return totalBunnies;
}
sumBunnies(10, 20);
// result: 30
The function above is called
sumBunniesand it has two parameters:blackBunniesandwhiteBunnies.The function above returns the value of
totalBunnies.The function above is called by using the function name followed by parentheses.
Function Return
The
returnstatement stops the execution of a function and returns a value from that function.The
returnvalue of the function is "returned" back to the "caller":
Arrow Functions
- Arrow functions are a shorter syntax for writing function expressions.
Example of arrow function
var sumBunnies = (blackBunnies, whiteBunnies) => {
// the => is called the fat arrow
var totalBunnies = blackBunnies + whiteBunnies;
return totalBunnies;
};
sumBunnies(10, 20);
// result: 30
IIFE (Immediately Invoked Function Expression)
These are functions that are executed as soon as they are defined.
(function () {
var blackBunnies = 10;
var whiteBunnies = 20;
var totalBunnies = blackBunnies + whiteBunnies;
console.log(totalBunnies);
})();
Type-casting
Type casting is the process of converting a value from one data type to another (such as string to number, object to boolean, and so on).
Examples of Type Casting
String to Number
var a = '14';
var b = '2';
var c = a / b;
console.log(c); // 7
Number to String
var a = 14;
var b = 2;
var c = a / b;
console.log(c); // '7'
Arrays and Array methods
These are some of the most common array methods:
const bunnies = ['Lucy', 'Tom', 'Molly'];
// Add an item to the end of an array
bunnies.push('Bella'); // ['Lucy', 'Tom', 'Molly', 'Bella']
// Remove an item from the end of an array
bunnies.pop(); // ['Lucy', 'Tom', 'Molly']
// Add an item to the beginning of an array
bunnies.unshift('Bella'); // ['Bella', 'Lucy', 'Tom', 'Molly']
// Remove an item from the beginning of an array
bunnies.shift(); // ['Lucy', 'Tom', 'Molly']
// Find the index of an item in the array
bunnies.indexOf('Tom'); // 1
// Remove an item by index position
bunnies.splice(1, 1); // ['Lucy', 'Molly']
// Copy an array
const newBunnies = bunnies.slice(); // ['Lucy', 'Molly']
Mixed Data Types - Array
You can store different data types in an array.
const mixedDataTypes = [true, 20, 'Lucy', null, undefined, { name: 'Lucy' }];
Accessing Array Elements
You can access array elements by their index number.
const bunnies = ['Lucy', 'Tom', 'Molly'];
// Access the first item in the array
bunnies[0]; // 'Lucy'
// Access the second item in the array
bunnies[1]; // 'Tom'
Array Length
Get the length of an array.
const bunnies = ['Lucy', 'Tom', 'Molly'];
bunnies.length; // 3
Looping Through Arrays
You can loop through an array using a for loop.
const bunnies = ['Lucy', 'Tom', 'Molly'];
for (let i = 0; i < bunnies.length; i++) {
console.log(`Bunny ${bunnies[i]} is scheduled for a checkup today.`);
}
/* Result:
Bunny Lucy is scheduled for a checkup today.
Bunny Tom is scheduled for a checkup today.
Bunny Molly is scheduled for a checkup today.
*/
Nested Arrays
The elements of an array can be arrays themselves.
const nestedArrays = [
['Lucy', 'Tom'],
['Molly', 'Bella'],
];
Accessing Nested Arrays
You can access nested arrays by chaining the index numbers.
const nestedArrays = [
['Lucy', 'Tom'],
['Molly', 'Bella'],
];
// Access the first item in the first array
nestedArrays[0][0]; // 'Lucy'
Exercises
Create an array called
bunniesthat contains the names of six bunnies.Add a new bunny called
Marioto the end of the array.Remove the bunny called
Lucyfrom the array.Add a new bunny called
Luigito the beginning of the array.
JSON
JSON stands for JavaScript Object Notation. It is a lightweight data-interchange format. We can use JSON to store and exchange data. JSON is often used when data is sent from a server to a web page.
Example of JSON
{
"name": "Lucy",
"age": 3,
"isHappy": true
}
Note: The key distinction between JSON and JavaScript objects is that JSON keys must be wrapped in double quotes. In JavaScript, keys can be wrapped in either single or double quotes.
JSON uses the .json file extension name.
Convert JavaScript Object to JSON
let bunny = {
name: 'Lucy',
age: 3,
isHappy: true,
};
let bunnyJSON = JSON.stringify(bunny);
console.log(bunnyJSON);
// {"name":"Lucy","age":3,"isHappy":true}
Convert JSON to JavaScript Object
let bunnyJSON = '{"name":"Lucy","age":3,"isHappy":true}';
let bunny = JSON.parse(bunnyJSON);
console.log(bunny.name); // Lucy
Exercises
Create a JavaScript object called
bunnywith the following properties:name,age, andisHappy. Set the values of the properties to your own bunny's name, age, and happiness level.Convert the
bunnyobject toJSONand store it in a variable calledbunnyJSON.
Comparison Operators
For comparison operators, we can use the following operators:
-
==(equal to) -
===(strict equal to) -
!=(not equal to) -
!==(strict not equal to) -
>(greater than) -
<(less than) -
>=(greater than or equal to) -
<=(less than or equal to)
Examples of Comparison Operators
Equal to
let bunny_age = 3;
let dog_age = 3;
console.log(bunny_age == dog_age); // true
Strict equal to
let bunny_age = 3;
let dog_age = '3';
console.log(bunny_age === dog_age); // false
Not equal to
let bunny_age = 3;
let dog_age = 4;
console.log(bunny_age != dog_age); // true
Strict not equal to
let bunny_age = 3;
let dog_age = '3';
console.log(bunny_age !== dog_age); // true
Greater than
let bunny_age = 3;
let dog_age = 4;
console.log(bunny_age > dog_age); // false
Less than
let bunny_age = 3;
let dog_age = 4;
console.log(bunny_age < dog_age); // true
Greater than or equal to
let bunny_age = 3;
let dog_age = 3;
console.log(bunny_age >= dog_age); // true
Exercise
Use a comparison operator to check (less than or equal to) if the number of bunnies in the bunnies array is less than or equal to the number of dogs in the dogs array. If it is, print There are more dogs than bunnies to the console. If it is not, print There are more bunnies than dogs to the console.
Conditional Statements
These are ways of controlling the flow of your code. They allow you to make decisions based on certain conditions.
If Statement syntax
if (condition) {
// code to be executed if condition is true
}
Example
// check if bunny is healthy
let bunny = 'healthy';
if (bunny === 'healthy') {
console.log('Bunny is healthy');
}
If Else Statement syntax
if (condition) {
// code to be executed if condition is true
} else {
// code to be executed if condition is false
}
Example
// check if bunny is healthy
let bunny = 'healthy';
if (bunny === 'healthy') {
console.log('Bunny is healthy');
} else {
console.log('Bunny is needs to see the vet');
}
If Else If Statement syntax
if (condition) {
// code to be executed if condition is true
} else if (condition) {
// code to be executed if condition is true
} else {
// code to be executed if condition is false
}
Example
// check if bunny is healthy
let bunny = 'healthy';
if (bunny === 'healthy') {
console.log('Bunny is healthy');
} else if (bunny === 'sick') {
console.log('Bunny is needs to see the vet');
} else {
console.log('Bunny health status unknown');
}
Switch Statement syntax
switch (expression) {
case x:
// code to be executed if expression === x
break;
case y:
// code to be executed if expression === y
break;
default:
// code to be executed if expression does not match any cases
}
Example
// check if bunny is healthy
let bunny = 'healthy';
switch (bunny) {
case 'healthy':
console.log('Bunny is healthy');
break;
case 'sick':
console.log('Bunny is needs to see the vet');
break;
default:
console.log('Bunny health status unknown');
}
Ternary Operator syntax
condition ? expression1 : expression2;
Example
// check if bunny is healthy
let bunny = 'healthy';
bunny === 'healthy'
? console.log('Bunny is healthy')
: console.log('Bunny is needs to see the vet');
The above code is equivalent to:
if (bunny === 'healthy') {
console.log('Bunny is healthy');
} else {
console.log('Bunny is needs to see the vet');
}
Conclusion
To make a contribution to this repository. Make a Pull request to JS-simplified. Have fun coding
Top comments (3)
very important
nice one
Thanks 🙏