3 FREE PDF guides Learn JavaScript HERE

Console Commenting and Alert


JavaScript Code

console.log(‘window’);
alert(‘hello’);
console.log(‘Hello1’);
//console.log(‘Hello2’);
console.error(‘error’);
console.warn(‘warning’);
console.info(‘info’); //info message
{
console.log(‘1’);
console.log(‘2’);
}
/*
multiple lines

1

2

*/

JavaScript Code Variables let and const
Rules for variables
Must be unique
Cannot use reserved Keywords
Can start with letter, dollar sign or underscore only no numbers
Cannot have spaces within the name
Can use numbers and letters within the name
Variable names are case Sensitive do
To make it more readable use camelCase or underscores to separate the words.

//let val = prompt(‘How are you?’);
let $_val$_20 = ‘great’;
//console.log(val);
let first = ‘Laurence’;
const last = ‘Svekis’;
let spaceChar = ‘ ‘;
console.log(first + spaceChar + last);
let fullName = first + spaceChar + last;
first = ‘Mike’;
console.log(first + spaceChar + last);
let a,b,c,d;
console.log(a);
console.log(fullName);
let counter = 5;
console.log(typeof(counter));
counter = ‘5’;
console.log(typeof(counter));
let boo = true;
console.log(typeof(boo));
let temp;
console.log(typeof(temp));
let val1 = null;
let val2;
console.log(typeof(fullName));
console.log(typeof(counter));
console.log(typeof(val1));
console.log(typeof(val2));

JavaScript comparison and assignment Operators

let a = 5;
let b = 10;
let c = a +b;
a = a + b;
console.log(a);
console.log(a+b);
console.log(a*b);
console.log(a-b);
console.log(a/b);
a+=5;
console.log(a);
a = a +5;
console.log(a);
a *= 10;
console.log(a);

let first = ‘Laurence’;
let last = ‘Svekis’;
let full = first + ‘ ‘ + last;
console.log(full);

let d = ‘5’;
let e = 9;
console.log(e+e+e+d);
console.log(d+e+e+e);
//console.log(first-last);

let boo = (4==4);
boo = (4!=4);
boo = (4>4);
boo = (4>=4);
boo = (‘4’ === 4);
boo = (‘4’ !== 4);

console.log(boo);

JavaScript Arrays and Objects
const arr = [‘one’,5,true,[1,2,3]];
const arr1 = arr;
console.log(arr.length);
arr[1] = 100;
arr[50] = ‘test’;
console.log(arr[1]);
console.log(arr.length);
arr.push(‘end’);
let val = arr.pop();
arr.unshift(‘Start’);
let val1 = arr.shift();
console.log(arr);
console.log(val);
console.log(val1);
arr1[10] = ‘UPDATED’;
console.log(arr);
console.log(arr1);

const obj1 = {
first: ‘Mike’,
first : ‘Laurence’,
last : ‘Svekis’,
id : 100,
status:true,
arr : arr,
‘full name’ : ‘LSvekis’
};
console.log(obj1);
console.log(obj1.first);
console.log(obj1[‘first’]);
console.log(obj1[‘full name’]);
const obj2 = obj1;
obj2.arr[4] = ‘Hello World’;
console.log(obj1.arr);

JavaScript Function Expression and Declaration
fun2(3,5);

function fun2(a,b){
console.log(a + b);
}

const fun1 = function(a,b){
console.log(a + b);
}
fun1(3,5);
fun1(6,7);
fun1(8,4);
fun1(2,6);

const fun3 = (a,b)=>{
console.log(a+b);
}

fun3(8,4);
fun3(2,6);

const fun4 = (a,b)=> console.log(a+b);
fun4(8,4);
fun4(2,6);

(function(){
console.log(‘JS ready’);
})(); //IIFE

(()=>{
console.log(‘iife 1’);
})();

(()=>console.log(‘iife 2’))();

console.clear();
function fun5(a,b){
return a + b;
}

const val1 = fun5(5,7);
console.log(val1);
console.log(fun5(15,27));

let val2 = 100;
let val3 = 500;

function fun6(a,b){
let val2=1000;
console.log(val2);
return a,b;
}

console.log(fun6(9,3));
console.log(val2);

console.log(fun7(9));
console.log(fun8(8));

function fun7(a,b){
a = a || 10;
b = b || 50;
console.log(a,b);
return a + b;
}

function fun8(a=10,b=50){
console.log(a,b);
return a + b;
}

let counter = 0;
console.log(adder());
console.log(adder());
console.log(adder());
function adder(){
counter++;
return counter;
}

JavaScript Conditions if statement and switch

let counter = 14;

if(counter < 5){
console.log(‘less than 5’);
}else if(counter == 10){
console.log(‘is equal to 10’);
}else{
console.log(‘not true’);
}

console.log(checker(0));
console.log(checker(10));
console.log(checker(2));

const val1 = (counter>10) ? ‘true str’ : ‘false str’;
console.log(val1);

function checker(val){
let mes;
switch(val){
case 0:
mes = ‘First one’;
break;
case 1:
mes = ‘Middle’;
break;
case 2:
mes = ‘Last’;
break;
default:
mes = ‘None’;
}
return mes;
}

checkId(16);
checkId(20);
checkId(21);

function checkId(age) {
let mes;
if (age < 18) {
mes = ‘No entry too young.’;
} else if (age < 21) {
mes = ‘Can enter no drinking’;
} else {
mes = ‘Looks like you are old enough’;
}
console.log(mes);
return mes;
}

JavaScript Loops for while forEach functions

for (let i = 0; i < 10; i++) {
console.log(i);
}

for (let i = 10; i > 0; i–) {
console.log(i);
}

let i = 10;
while (i < 10) {
console.log(i);
i++;
}
i = 0;
do {
console.log(i);
i++;
}
while (i < 10);

const arr = [‘Laurence’, ‘Svekis’, 555, 323, 12];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}

i = 0;
while (i < arr.length) {
console.log(arr[i]);
i++;
}

arr.forEach((item, index, array) => {
console.log(item);
})

for (val of arr) {
console.log(val);
}

const obj1 = {
first: ‘Laurence’,
last: ‘Svekis’,
id: 100
}

for (key in obj1) {
console.log(obj1[key]);
}

looper1(0);
looper2(0);

function looper1(x) {
console.log(x);
x++;
if (x < 10) {
return looper1(x);
}
return x;
}

function looper2(x) {
console.log(x);
x++;
if (x < 10) {
return looper2(x);
}
}

JavaScript Array methods

const arr = [‘Laurence’,’Svekis’,100,”,null];
arr.push(‘end’);
arr.unshift(‘start’);
arr.pop();
arr.shift();
arr.forEach(val => console.log(val));

const arr1 = arr.map((item,index,array)=>${index} ${item});

const arr2 = arr.concat(arr1,arr1);
const arr3 = arr.concat([‘one’,’two’]);

const arr4 = arr;
arr.push(‘new item’);

const arr5 = arr.concat();
arr.push(‘new item 2’);

arr5.length = 0;

const arr6 = arr.filter((val)=>{
return (typeof val == ‘number’)
})

const arr7 = arr.filter(Boolean);
const str1 = arr.toString();
const str2 = arr.filter(Boolean).join(‘ – ‘);
console.log(str1);
console.log(str2);

console.log(arr);
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
console.log(arr5);
console.log(arr6);
console.log(arr7);
arr7.sort();
console.log(arr7);
arr7.reverse();
console.log(arr7);
const arr8 = [5,6,78,32,5,54,7,7,7,45,54334];
arr8.sort((a,b)=>{
return a-b});
console.log(arr8);
arr8.sort((a,b)=>{
return b-a});
console.log(arr8);
arr8.sort((a,b)=>{return Math.random()-0.5})
console.log(arr8);
for(let x=0;x<10;x++){
const ind = Math.floor(Math.random()*arr.length);
console.log(arr[ind]);
}

console.clear();
const arr9 = [0,1,2,3,4,5,6];
const val1 = arr9.splice(3,2,’X’,’X’);
console.log(val1);
console.log(arr9);

const arr10 = arr9.slice(2);
console.log(arr10);
console.log(arr9);

const boo1 = arr9.includes(‘X’);
console.log(boo1);

const ind1 = arr9.indexOf(‘X’);
console.log(ind1);
const ind2 = arr9.lastIndexOf(‘X’);
console.log(ind2);
const ind3 = arr9.findIndex((item)=>{
if(item==’X’){
return item;
}
});
console.log(ind3);
JavaScript String Methods
const first = lauREnce;
const last = svEKis;
const fullName = ${first} ${last};
let val = ${4+5+6} test test;
console.log(fullName);
console.log(val);

console.log(fullName.length);

val = fullName.slice(0,8);
val = fullName.slice(-5);

val = fullName.substring(0,8);
val = fullName.substring(9);

val = fullName.toLowerCase();
val = fullName.toUpperCase();

val = fullName.replace(‘e’,’X’);
val = fullName.replaceAll(‘e’,’X’);

val = capWord(fullName);

function capWord(words){
const arr = words.split(‘ ‘);
const temp = [];
arr.forEach(word =>{
temp.push(word[0].toUpperCase()+word.slice(1).toLowerCase());
})
return temp.join(‘ ‘);
}

val = fullName.toLowerCase().indexOf(‘e’);
val = fullName.toLowerCase().lastIndexOf(‘e’);
val = fullName.toLowerCase().search(‘ve’);

console.log(val);

Math Random Object
let num1 = 5.49999;

console.log(Math.round(num1));
console.log(Math.ceil(num1));
console.log(Math.floor(num1));

for(let i=0;i<10;i++){
let num2 = Math.floor(Math.random() * 10)+1;
console.log( ranValue(1,5));
}

function ranValue(min,max){
return Math.floor(Math.random() * (max-min+1) ) + min;
}

JavaScript and JSON
String value of JavaScript Object [{“first”:”Laurence”,”last”:”Svekis”},{“first”:”Jack”,”last”:”Doe”}]

​​const people = [{
“first”: “Laurence”,
“last”: “Svekis”
}, {
“first”: “Jack”,
“last”: “Doe”
}];

console.log(people);
people.forEach(person=>{
const temp = ${person.first} ${person.last};
console.log(temp);
})

const str1 = JSON.stringify(people);
console.log(str1);
const obj1 = JSON.parse(str1);
console.log(obj1[0].first);

JavaScript Arrow function expressions

((a)=>console.log(a))(‘Hello World’);
let val = ‘test’;

const test1 = function (a,b,c){
return a + b + c;
};
const test2 = (a,b,c) => {
console.log(a);
return a + b + c;
}
const test3 = (a,b,c) => a + b + c;

const test4 = a => a + 50 * 10;

const test5 = (c,a=10,b=20)=> a + b + c;

val = test1(5,10,15);
val = test2(5,10,15);
val = test3(5,10,15);
val = test4(5);
val = test5(50);

const myObj = {
a : 5,
b : () => console.log(‘Hello’),
c : function() {
console.log(this);
},
d : () => console.log(this)
}

myObj.b();
myObj.c();
myObj.d();

const output = document.querySelector(‘.output’);
output.addEventListener(‘click’,(e)=>{
console.log(‘clicked’);
})
output.addEventListener(‘click’,function(e){
console.log(‘click 2’);
})

console.log(val);
output.innerHTML = val;
console.clear();
const arr = [1,2,3,4,5];
const temp = arr.reduce((a,b)=>a+b);
console.log(temp);

const temp1 = arr.filter(a => a > 2);
console.log(temp1);

const temp2 = arr.map(a => a*2);
console.log(temp2);

JavaScript Console Object
let myStr = “Output String”;
const myObj = {prop1:”Value 1″,prop2:”Value 2″}
const myArr = [“one”,”two”,”three”,”four”];
const val = myObj;
console.group(“logging”);

logger(‘log’,’blue’);
console.log(val);
logger(‘error’,’Red’);
console.error(myArr);
logger(‘dir’,’green’);
console.dir(document);
//console.clear();
for(let i=0;i<10;i++){
logger(‘count’,’purple’);
console.count(“test”);
}
console.count(“test”);
//console.clear();
logger(‘info’,’pink’);
console.info(val);
logger(‘warn’,’blue’);
console.warn(val);

logger(‘table’,’green’);
console.table(myStr);
console.table(myObj);
console.table(myArr);
console.table([myArr,myObj,myArr]);

//console.clear();

console.time(‘test1’);
console.time();
let x = 0;
while (x <50000) {x++}
console.timeEnd();
console.timeEnd(‘test1’);

//console.clear();
console.group();
console.log(“one”);
console.log(“two”);
console.log(“three”);
console.groupEnd();

console.groupEnd(“logging”);

function logger(met,bg){
//console.count(“test”);
console.log(%c CONSOLE Method ${met.toUpperCase()},background:${bg};color:white);
}

Object array destructing
let a,b,c,d,e,arr1;
const arr = [5,10,15,20,25,30,45,50];
[a,b,c,d,e,…arr1] = arr;
console.log(a,b,c,d,e);
console.log(arr1);
console.log(arr1[0]);
let f,g,myObj;
({f,g,…myObj}={f:100,g:200,h:300,i:400,j:500});
console.log(f,g);
console.log(myObj);

function fun() {
return [10,20,30,40,50];
}

let h,i,j;
[h,,i,,j] = fun();
console.log(h,i,j);

const people = [{
first : “Laurence”,
last : “Svekis”,
fav : “JavaScript”,
id : 100
},{
first : “Linda”,
last : “Jones”,
fav : “HTML”,
id : 20
}]

const output = document.querySelector(‘.output’);
const jsonFile = ‘datajson2.json’;
window.addEventListener(‘DOMContentLoaded’,getData);
function getData(){
fetch(jsonFile )
.then(rep=>rep.json())
.then(data=>{
outputGen(data);
})
}
function outputGen(people){
people.forEach((person)=>{
const {first,last,id} = person;
const div = document.createElement(‘div’);
div.textContent = First : ${first} Last : ${last} ID(${id});
output.append(div);
})
}

JavaScript template literals

let val1 = Hello '"World;
let a = ‘Laurence Svekis’;
val1 = Hello ${a};
val1 = Adding ${5+10};
val1 = backtick \``; val1 =Line 1
Line 2; const b = 10; const c = 33; val1 =${b} + ${c} = ${b+c}`;

const first = ‘Laurence’;
const last = ‘Svekis’;
function fullName(greeting,fName,lName){
console.log(greeting);
console.log(fName,lName);
return ${greeting[0]} ${fName} ${lName};
}
val1 = fullNameWelcome${first}NEW${last}MIDDLE${last}END;

const game = {
level : 5,
name : ‘Laurence’
}

function checker(output,user,level){
const statusVal = level > 3 ? ‘pro’ : ‘beginner’;
console.log(output);
return ${output[0]} : ${user} is a ${statusVal} at level "${level}";
}

val1 = checkerPlayer${game.name}A${game.level}B;
game.level = 2;
val1 = checkerPlayer${game.name}${game.level};

document.querySelector(‘.output’).innerHTML = val1;
console.log(val1);

Comparing Data Type and automatic conversion of Data Types

let a = [10];
let b = 10;
let c = “10”;
if(a == b) console.log(${a} == ${b});
if(a == c) console.log(${a} == ${c});
if(a === b) console.log(${a} === ${b});
if(a === c) console.log(${a} === ${c});
if(a != b) console.log(${a} != ${b});
if(a != c) console.log(${a} != ${c});
if(a !== b) console.log(${a} !== ${b});
if(a !== c) console.log(${a} !== ${c});
let d = [];
let e = 0;
let f = false;
let g = ”;
let h = null;
let i = undefined;
let j = NaN;
console.clear();
if(d == e) console.log(D ${d} == ${e});
if(e == f) console.log(E ${e} == ${f});
if(f == g) console.log(F ${f} == ${g});
if(g == h) console.log(G ${g} == ${h});
if(h == i) console.log(H ${h} == ${i});
if(i == j) console.log(I ${i} == ${j});
if(j == d) console.log(J ${j} == ${d});
if(g == d) console.log(GD ${g} == ${d});
if(f == h) console.log(FH ${f} == ${h});
if(f == i) console.log(FI ${f} == ${i});
if(f == j) console.log(FJ ${f} == ${j});
console.clear();
if(!d) console.log(D Yes ${d});
if(!e) console.log(E Yes ${e});
if(!f) console.log(F Yes ${f});
if(!g) console.log(G Yes ${g});
if(!h) console.log(H Yes ${h});
if(!i) console.log(I Yes ${i});
if(!j) console.log(J Yes ${j});
if(d === e) console.log(D ${d} === ${e});
if(e === f) console.log(E ${e} === ${f});
if(f === g) console.log(F ${f} === ${g});
if(g === h) console.log(G ${g} === ${h});
if(h === i) console.log(H ${h} === ${i});
if(i === j) console.log(I ${i} === ${j});
if(j === d) console.log(J ${j} === ${d});

JavaScript Immediately invoked functions coding examples

(function(){
console.log(‘ready’);
})();
(()=>{
console.log(‘ready arrow’);
})();
((a=1,b=2,c=3)=>{
console.log(a,b,c);
const val = a * b * c;
console.log(val);
})(5,6,7);

JavaScript Adding Numbers Array

const arr1 = [32,43,556,2,3,4,4345];
let total = 0;
for(let i=0;i<arr1.length;i++){
console.log(arr1[i],total);
total += arr1[i];
}
console.log(total);
/*
total = 0;
for(let i in arr1){
console.log(arr1[i],total);
total += arr1[i];
}
console.log(total);
*/
total = 0;
for(let i=0,len=arr1.length;i<len;i++){
console.log(arr1[i],total);
total += arr1[i];
}
console.log(total);

Array Filter Method
const arr1 = [“Laurence”,”Svekis”,”Hello”,”World”,”Cat”];

const arr2 = arr1.filter((val,ind,arr)=>{
console.log(val,ind,arr);
return val.length > 5;
})

const arr3 = arr1.filter(callbackFun);

const arr4 = arr1.filter(val => val.length > 5);

function callbackFun(val,ind,arr){
console.log(val,ind,arr);
return val.length > 5;
}

console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
console.clear();

const arr5 = [3223,234,5,23,23333,43,34,34,34,34];

const arr6 = arr5.filter(val => val > 100);
const arr7 = arr5.filter(checker);

function checker(val){
console.log(${val} = ${val % 2});
return val % 2;
}

console.log(arr6);
console.log(arr7);

const arr8 = [0,1,0,1,1,1,1,true,false,true];
const arr9 = arr8.filter(val => val);

console.log(arr9);

const arr10 = arr5.filter(checker2);
function checker2(val,ind,arr){
console.log(${arr.indexOf(val)} = ${ind});
return arr.indexOf(val) == ind;
}

console.log(arr10);

const arr11 = [“Laurence”,”Svekis”,”Hello”,”World”,”Cat”,”Laurence”,”Svekis”,”Cat”,”Laurence”,”Svekis”,”Cat”,”Laurence”,”Svekis”,”Cat”,”Laurence”,”Svekis”,”Dog”,”Laurence”,”Svekis”,];
console.log(arr11.filter(checker2));

const arr12 = [{name:”Svekis 1″,id:10},{name:”Svekis 2″,id:1},{name:”Svekis 3″,id:100},{name:”Svekis 4″,id:50},{name:”Svekis 5″,id:20}];

const arr13 = arr12.filter((val)=>{
return val.id;
})

console.log(arr13);

const validID = [50,100];
const arr14 = arr12.filter((val)=>{
return validID.includes(val.id);
})

console.log(arr14);

Array includes method for arrays
const arr = [“Svekis”,”Laurence”,1000,20,300,true,323,”Svekis”];
const arr1 = arr.map(String);
console.log(arr1);
const myInput = document.querySelector(‘input’);
const btn = document.querySelector(‘button’);
const output = document.querySelector(‘.output’);
btn.addEventListener(‘click’,(e)=>{
const val = myInput.value;
const result = arr1.includes(val);
let message;
if(result){
message= ${result} is found in the array content;
}else{
message = ${result} is NOT found;
}
output.textContent = message;
console.log(result);
})
let val = arr.includes(“Svekis”);
console.log(val);
val = arr.includes(“Svekis”,-1);
console.log(val);

How to remove and update array items

const arr1 = [‘FIRST’,’Laurence’,’Svekis’,100,false];
const arr2 = [‘SECOND’,2332,true,’Hello’,’Svekis’,400,false];
const arr3 = arr1.concat(arr1,arr2);
const arr4 = arr1;
arr2.push(arr1);
console.log(arr2);
console.log(arr3);
Array.prototype.push.apply(arr1,arr2);
console.log(arr1);
arr2.push(‘NEW ITEM’);
arr1.push(‘Arr 1 New’);
//delete arr1[12];
//delete arr2[7];
//arr1.length = 0;
arr1.splice(12,1,’REMOVED’,’SECOND’);
arr2.splice(3);
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);

Every Method for array
const arr1 = [1,4,54,23,5,7,34,66,1000];
const arr2 = [“Svekis”,”a”,”World”,”He”];
const arr3 = [“Svekis”,”Laurence”,”Cat”,”Hello”,”a”,”World”];
let val = arr1.every((ele)=>{
console.log(ele);
return ele < 10; }) val = arr1.every(callBackFun); function callBackFun(ele,ind,arr){ console.log(${ele} ${ind}); return ele < 1000; } console.log(val); console.log(arr1.every(x => x < 10000)); console.log(arr1.every(x => x < 1000)); console.clear(); val = arr2.every((ele)=>{
console.log(ele);
return ele.length < 15; }) console.log(val); console.clear(); val = arr2.every((ele)=>{
console.log(ele);
return arr3.includes(ele);
})
console.log(val);

JavaScript Logical Conditions
let val = 5;
val = 6;
if(val == 5) {fun1(1);}
if(val == 5) fun1(2);
val == 5 && fun1(3);
val == 5 || fun1(4);
if(val != 5) fun1(5);
fun1();
let val2;
val2 = val2 || 100;
console.log(val2);
function fun1(v=1){
v = v || 1;
console.log(Hello ${v});
}

Array map
const arr1 = [1,5,7,8,23,342,2,3,4];
const arr2 = arr1.map((val,ind,arr)=>{
console.log(val,ind,arr);
return val * val;
})
const arr3 = arr1.map(val => val*val);
const arr4 = arr1.map(callbackFun);
function callbackFun(val){
return val * val;
}
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
Serialization and deserialization
const output = document.querySelector(‘.output’);
const arr1 = [“Svekis”,”Laurence”,1000,true];
const obj1 = {
first : “Laurence”,
last : “Svekis”,
id : 1000,
num : 55,
mes : “Hello”,
boo : false
};
output.textContent = arr1;
output.textContent = obj1;
console.log(arr1);
console.log(obj1);
let val = JSON.stringify(obj1)
val = JSON.stringify(arr1);
console.log(val);
output.textContent = val;
output.textContent += arr1;
console.clear();
val = JSON.stringify(obj1,rep);
function rep(key,value){
console.log(key,value);
if( typeof value === ‘number’){
return undefined;
}
return value;
}
output.textContent = val;
val = JSON.stringify(obj1,[‘num’,’first’]);
output.textContent = val;
val = JSON.stringify(obj1,null);
output.textContent = val;
console.log(val);
val = JSON.stringify(obj1,null,’ ‘);
output.textContent += val;
console.log(val);
const str1 = JSON.stringify(obj1,[‘num’,’first’]);
const str2 = JSON.stringify(arr1);
console.clear();
console.log(str1);
console.log(str2);
const ob1 = JSON.parse(str1);
const ob2 = JSON.parse(str2);
console.clear();
console.log(ob1);
console.log(ob2);

Storing to local storage


JavaScript Course Check Output
const str1 = “Laurence Svekis”;
const myObj = {
first : “Laurence”,
last : “Svekis”,
id : 100
};
const myInput = document.querySelector(‘input’);
const btn = document.querySelector(‘button’);
const output = document.querySelector(‘.output’);
document.addEventListener(‘DOMContentLoaded’,init);
btn.addEventListener(‘click’,btnClicker);
function btnClicker(){
const val = myInput.value;
if(val.length > 0){
let user = JSON.parse(localStorage.getItem(‘user’));
user.first = val;
console.log(user);
localStorage.setItem(‘user’,JSON.stringify(user));
}
}
function init(){
console.log(‘ready’);
output.innerHTML = ”;
let val = localStorage.getItem(‘user’);
let user = JSON.parse(val);
if(!user.first){
let storeObj = JSON.stringify(myObj);
localStorage.setItem(‘user’,storeObj);
}else{
output.textContent = ${user.first} ${user.last};
}
console.log(val);
}

Math object
const arr = [];
const arr1 = [];

for(let i=0;i<10;i++){
const val = ran(0,1000);
arr.push(val.toString());
}

for(let i=0;i<20;i++){
const ind = Math.floor(Math.random()*arr.length);
const val = arr[ind];
console.log(ind,val);
}

function ran(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}

for(let i=1;arr1.push(i++)<50;);
console.log(arr1);

const arr2 = arr.sort();
const arr3 = arr.reverse();
arr.sort(()=>{
return Math.random() – 0.5;
});
console.log(arr[0]);
arr.sort(()=>{
return Math.random() – 0.5;
});
console.log(arr[0]);

Object constructor Object Construction with JavaScript

function FullName(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
this.full = ${firstName} ${lastName};
}
const person1 = new FullName(“Laurence”,”Svekis”);
console.log(person1.full);
const person2 = new FullName(“John”,”Svekis”);
console.log(person2.full);
const person3 = new FullName(“Mike”,”Smith”);
console.log(person3.full);
let val = ${person1.firstName} ${person1.lastName};
console.log(val);

String Whitespace Cleaner and Remover
String.prototype.cleaner = function(){
return this.replace(/\s+/g,’ ‘).trim();
}
const myStr1 = ” Hello World “;
console.log(myStr1.cleaner());
let val = myStr1;
val = trimMyString(val);
console.log(val);
document.querySelector(‘.output’).textContent = val;
function trimMyString(str){
let val = str.replace(/\s+/g,’ ‘).trim();
//val = str.trimLeft();
//val = str.trimRight();
return val;
}

Random Numbers and Random Array items

const arr = [];
const arr1 = [];
for(let i=0;i<10;i++){ const val = ran(0,1000); arr.push(val.toString()); } for(let i=0;i<20;i++){ const ind = Math.floor(Math.random()arr.length); const val = arr[ind]; console.log(ind,val); } function ran(min,max){ return Math.floor(Math.random()(max-min+1))+min; } for(let i=1;arr1.push(i++)<50;); console.log(arr1); const arr2 = arr.sort(); const arr3 = arr.reverse(); arr.sort(()=>{
return Math.random() – 0.5;
});
console.log(arr[0]);
arr.sort(()=>{
return Math.random() – 0.5;
});
console.log(arr[0]);

This exercise will provide examples of code you can use to accomplish common tasks with array items.

Create an array with some values, add empty values into the array items.
Using the filter method then remove the duplicates in as few lines of code as possible.
Provide several ways to loop through the items of the array and output the values into the console.
make updates to the array, add new items to the beginning and end.
Remove the first and last items from the array list
Using Map create a new array from a previous array
Try the callback within the map to add more functionality to the block of code.
Create several additional arrays
Join them together
Duplicate the array contents to a new array.
Use the entries() method to create an iterator object of the array contents, output the results in the console.
Create new arrays using the filter to only add selected items by condition.
Check for values within the array, get the index value of the first occurrence, last occurrence, and the boolean result if it exists.

Clear Array of Duplicates and empty values
Create an array with some values, add empty values into the array items.
Using the filter method then remove the duplicates in as few lines of code as possible.

const arr = [‘Laurence’,’Jack’,’Jane’,”,,,,’Sam’,’Laurence’,’Jack’,’Jane’,”,null,false,undefined,0,’Sam’];
console.log(arr);

const arr1 = [… new Set(arr)];
console.log(arr1);

const arr2 = arr.filter(Boolean);
console.log(arr2);

const arr3 = [… new Set(arr.filter(Boolean))];
console.log(arr3);

How to loop through an array
Create an array with some values, add empty values into the array items
Provide several ways to loop through the items of the array and output the values into the console.

const arr = [‘Laurence’,’Linda’,’Joe’,’Jane’];
console.log(arr);
console.log(‘FOR’); for(let i=0;iWHILE’);
let i=0;
while(i{
console.log(item);
})

console.log(‘****MAP’);
const arr1 = arr.map((item,index)=>{
console.log(item);
return ${index} ${item};
})

console.log(‘****Filter’);
const arr2 = arr.filter((item)=>{
console.log(item);
return item;
});
console.log(arr2);

Array Updating adding and removing array items
create an array with values
make updates to the array, add new items to the beginning and end.
Remove the first and last items from the array list

const arr = [‘Laurence’,’Next’];
arr.push(‘End Push’); //adds to end
const val1 = arr.shift(); //removes first
const val2 = arr.pop(); //removes last
arr.unshift(val1); // adds to start
console.log(val1);
console.log(val2);
console.log(arr);

const str1 = arr.toString();
console.log(str1);

const str2 = arr.join(‘‘);
console.log(str2);
JavaScript Map Method for Arrays new array
Using Map create a new array from a previous array
Try the callback within the map to add more functionality to the block of code.

const arr = [‘Laurence’,4,545,false,’Test’];
const arr2 = arr;
arr2.push(‘NEW’);
console.log(arr);

const arr1 = arr.map((item,index,array)=>{
const temp = ${index} ${item};
return temp;
})
arr2.push(‘NEW’);
console.log(arr1);

const arr3 = [3,54,62,4334,1232,444];
const arr4 = arr3.map(val => val*2);
console.log(arr4);

const arr5 = arr3.map(callback1);
console.log(arr5);

function callback1(item){
console.log(item);
return item*2;
}

const arr6 = [{first:’Laurence’,last:’Svekis’},{first:’John’,last:’Smith’},{first:’Sam’,last:’Jones’}]
console.log(arr6);
const arr7 = arr6.map(({first,last})=>{
//console.log(first,last);
//return ${first} ${last};
return {fullName:${first} ${last}}
})

console.log(arr7);

const arr8 = arr6.map(({first,last})=> ({full:${first} ${last}}));
console.log(arr8);

How to concat arrays and duplicate an array
Create several additional arrays
Join them together
Duplicate the array contents to a new array.

const arr1 = [‘Laurence’,’Svekis’];
const arr2 = [1,2,3,4,5];
const arr3 = arr1.concat(arr2);
console.log(arr3);
const arr4 = arr1.concat(arr2,[‘new1′,’new2’]);
console.log(arr4);
const arr5 = arr2.concat(arr2,arr2);
console.log(arr5);

const arr6 = arr1;
arr6.push(‘END’);

const arr7 = arr1.concat();
arr6.push(‘more’);
console.log(arr7);
console.log(arr1);
console.log(arr6);

Array iterator entries using entries and looping items
Use the entries() method to create an iterator object of the array contents, output the results in the console.

const arr1 = [‘Laurence’,’Svekis’,100];
const adder = arr1.entries();

console.log(adder);
//console.log(adder.next());
//console.log(adder.next().value);

for(let item of adder){
console.log(item[1]);
}

const adder1 = arr1.entries();
let val = adder1.next();
while(val.value){
console.log(val.value[1]);
val = adder1.next();
}

Array Filter Method Example for JavaScript Arrays
Create new arrays using the filter to only add selected items by condition.

const arr = [‘Svekis’,’Laurence’,’test’,’new’,5,23,54,5,1213343];
const arr1 = arr.filter(val => val.length >= 4);
console.log(arr1);

const arr2 = arr.filter(checker);
console.log(arr2);

function checker(item,index,array){
//console.log(item);
/// console.log(index);
//console.log(array);
return index >=2;
}

const arr3 = arr.filter((item,index)=>{
//console.log(typeof(item) );
return typeof(item) == ‘string’;
});
console.log(arr3);
arr.push(null);
arr.push(false);
console.log(arr);
const arr4 = arr.filter(Boolean);
console.log(arr4);

const arr5 = arr.filter((str)=>{
if(typeof(str)==’string’){
const first = str[0].toUpperCase();
return first === str[0];
}
})

console.log(arr5);

Array includes Method and index methods JavaScript coding Example
Check for values within the array, get the index value of the first occurrence, last occurrence, and the boolean result if it exists.

const arr = [‘Laurence’,’Svekis’,’Svekis’,100,’Svekis’,1000];
const boo1 = arr.includes(‘Svekis’);
console.log(boo1);
const boo2 = arr.includes(‘test’);
console.log(boo2);

const ind1 = arr.indexOf(‘Svekis’);
console.log(ind1);
const ind2 = arr.indexOf(‘test’);
console.log(ind2);

const lind1 = arr.lastIndexOf(‘Svekis’);
console.log(lind1);
const lind2 = arr.lastIndexOf(‘test’);
console.log(lind2);

const find1 = arr.findIndex(call1);
console.log(find1);
const find2 = arr.findIndex(call2);
console.log(find2);

function call1(item){
//console.log(item);
if(item === ‘Svekis’ ){
return item;
}
}

function call2(item){
if(typeof(item)==’number’){
return item;
}
}

Leave a Comment