Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

October 8, 2022 08:21 am GMT

JavaScript: Code Snippets

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 decimalsvar bunny_height = 3; // A number without decimals

String

var bunny_name = 'Lucy'; // Using double quotesvar 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: Lucyconsole.log(bunny.age); // Output: 3console.log(bunny.isHappy); // Output: true

Array

var bunnies = ['Lucy', 'Tom', 'Molly'];console.log(bunnies[0]); // Output: Lucyconsole.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 farmfunction sumBunnies() {  var blackBunnies = 10;  var whiteBunnies = 20;  var totalBunnies = blackBunnies + whiteBunnies;  return totalBunnies;}

The function above is called sumBunnies and 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 totalBunnies which is 30.

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 sumBunnies and it has two parameters: blackBunnies and whiteBunnies.
The function above returns the value of totalBunnies.
The function above is called by using the function name followed by parentheses.

Function Return

The return statement stops the execution of a function and returns a value from that function.
The return value 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 arraybunnies.push('Bella'); // ['Lucy', 'Tom', 'Molly', 'Bella']// Remove an item from the end of an arraybunnies.pop(); // ['Lucy', 'Tom', 'Molly']// Add an item to the beginning of an arraybunnies.unshift('Bella'); // ['Bella', 'Lucy', 'Tom', 'Molly']// Remove an item from the beginning of an arraybunnies.shift(); // ['Lucy', 'Tom', 'Molly']// Find the index of an item in the arraybunnies.indexOf('Tom'); // 1// Remove an item by index positionbunnies.splice(1, 1); // ['Lucy', 'Molly']// Copy an arrayconst 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 arraybunnies[0]; // 'Lucy'// Access the second item in the arraybunnies[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 arraynestedArrays[0][0]; // 'Lucy'

Exercises

Create an array called bunnies that contains the names of six bunnies.
Add a new bunny called Mario to the end of the array.
Remove the bunny called Lucy from the array.
Add a new bunny called Luigi to 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 bunny with the following properties: name, age, and isHappy. Set the values of the properties to your own bunny's name, age, and happiness level.
Convert the bunny object to JSON and store it in a variable called bunnyJSON.

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 healthylet 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 healthylet 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 healthylet 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 healthylet 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 healthylet 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

Original Link: https://dev.to/drsimplegraffiti/javascript-code-snippets-okm

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To