Skip to content

Instantly share code, notes, and snippets.

@daaimah123

daaimah123/Basic JavaScript Notes (Arrays, Objects, Loops))

Last active July 2, 2021 17:41
Show Gist options
  • Save daaimah123/63b7e512b3d41fab8fa516cc9f826c79 to your computer and use it in GitHub Desktop.
Save daaimah123/63b7e512b3d41fab8fa516cc9f826c79 to your computer and use it in GitHub Desktop.
Download ZIP
Arrays, Objects, Loops
Raw
Basic JavaScript Notes (Arrays, Objects, Loops))
==============================================================================================================================
ARRAY METHODS
==============================================================================================================================
const family = ['Malaika', 'Jahdai'];
arr.push()
==> add to end of array > family.push('Daaimah');
==> mutates length > console.log(family);
==> return length of new array ['Malaika', 'Jahdai', 'Daaimah']
arr.unshift()
==> add to front of array > family.unshift('Omeka');
==> mutates length > console.log(family);
==> return length of new array ['Omeka', 'Malaika', 'Jahdai', 'Daaimah']
arr.pop()
==> removes last element > family.pop();
==> returns removed element > console.log(family);
==> no element is added into method ['Omeka', 'Malaika', 'Jahdai']
arr.shift()
==> removes first element > family.shift();
==> returns removed element > console.log(family);
==> no element is added into method ['Malaika', 'Jahdai']
arr.indexOf()
==> returns index number > family.indexOf('Malaika');
==> returns -1 index if element is not present > console.log(family);
0
> family.indexOf('Omeka');
-1
arr.includes()
==> returns index number > family.includes('Omeka');
==> returns boolean if element is present > console.log(family);
==> strict equality, no type coersion (23 != '23') false
> family.includes('Malaika');
> console.log(family);
true
==============================================================================================================================
OBJECT METHODS
==============================================================================================================================
const family = {
firstName: 'Daaimah',
lastName: 'Tibrey',
age: 1992,
job: 'Engineer',
friends: ['Omeka', 'Edward','Shannon'],
hasDriversLicense: true
};
Object Literal
The above with the property:value pairs inside of curly
brackets. This can be an empty object or contain a
single property:value pair.
Ordering Properties
The order of the properties typically doesn't matter in
the editor because when it renders in the console it
will be ordered alphabetically. This also depends upon
best practices of the project you are working on.
Dot Notation > console.log(family.firstName);
Daaimah
Bracket Notation > console.log(family['lastName']);
Tibrey
Add Property to Object > family.location = ['CA', 'TX'];
> family['twitter'] = '@DTibrey';
> console.log(family);
const family = {
firstName: 'Daaimah',
lastName: 'Tibrey',
birthYear: 1992,
job: 'Engineer',
friends: ['Omeka', 'Edward','Shannon'],
hasDriversLicense: true,
location: ['CA', 'TX'],
twitter: '@DTibrey'
};
Add Property that Holds Function as Value > family.calcAge = function(birthYear){
return 2020 - birthYear;
}
> console.log(family.calcAge(1991);
28
> console.log(family);
const family = {
firstName: 'Daaimah',
lastName: 'Tibrey',
birthYear: 1992,
job: 'Engineer',
friends: ['Omeka', 'Edward','Shannon'],
hasDriversLicense: true,
location: ['CA', 'TX'],
twitter: '@DTibrey',
calcAge: ฦ’ (birthYear)
};
> console.log(family['calcAge'](1992));
28
Delete a Property > delete family.calcAge;
==> removes property from object > console.log(family);
const family = {
firstName: 'Daaimah',
lastName: 'Tibrey',
birthYear: 1992,
job: 'Engineer',
friends: ['Omeka', 'Edward','Shannon'],
hasDriversLicense: true,
location: ['CA', 'TX'],
twitter: '@DTibrey',
};
This
==> equal to the object calling the method > family.calcAge = function(){
==> using this can be helpful for when the object return 2020 - this.birthYear;
changes its name, you won't need to go into the new }
function to change the object name > console.log(family);
const family = {
firstName: 'Daaimah',
lastName: 'Tibrey',
birthYear: 1992,
job: 'Engineer',
friends: ['Omeka', 'Edward','Shannon'],
hasDriversLicense: true,
location: ['CA', 'TX'],
twitter: '@DTibrey',
calcAge: ฦ’ ()
};
Dynamically Render a Sentence > const family = {
(str.length used) firstName: 'Daaimah',
lastName: 'Tibrey',
birthYear: 1992,
job: 'Software Engineer',
friends: ['Omeka', 'Edward','Shannon'],
hasDriversLicense: true,
calcAge: function(){
return 2020 - this.birthYear;
},
getSummary: function(){
return `${family.firstName} ${family.lastName}
is a ${family.calcAge()} year old ${family.job}
and has ${this.hasDriversLicense ? 'a' : 'no'}
driver's license. She has ${family.friends.length}
friends, but her sister is ${family.friends[0]}.`;
}
}
> console.log(family.getSummary());
Daaimah Tibrey is a 28 year old Software Engineer
and has a driver's license. She has 3 friends, but
her sister is Omeka.
==============================================================================================================================
FOR LOOP
==============================================================================================================================
For (start var, stop at condition, iteration){stuff} for (let counterVar; condition; counterVar = counterVar +/- iteration){
code that we want repeated
}
> for(let rep = 1; rep <=10; rep = rep+1){
console.log('This is iteration number: ', rep);
}
This is iteration number: 1
This is iteration number: 2
This is iteration number: 3
This is iteration number: 4
This is iteration number: 5
This is iteration number: 6
This is iteration number: 7
This is iteration number: 8
This is iteration number: 9
This is iteration number: 10
> const daaimah = [
'Daaimah',
'Tibrey',
2020 - 1992,
'Engineer',
['Malaika', 'Jahdai'],
];
index 5 DNE so, the counter will always count below 5 for (let i = 0; i < daaimah.length ; i++){
console.log(typeof daaimah[i], daaimah[i])
}
string Daaimah
string Tibrey
number 28
string Engineer
object (2)ย ["Malaika", "Jahdai"]
==> Loop Backwards > for (let i = daaimah.length-1; i >=0 ; i--){
console.log(daaimah[i])
}
(2)ย ["Malaika", "Jahdai"]
Engineer
28
Tibrey
Daaimah
==> Nested Loops > for (let exercise = 1; exercise < 4; exercise++) {
console.log('==> starting exercise ', exercise);
for (let rep = 1; rep < 6; rep++){
console.log('lifting weight rep ', rep);
}
}
==> starting exercise 1
lifting weight rep 1
lifting weight rep 2
lifting weight rep 3
lifting weight rep 4
lifting weight rep 5
==> starting exercise 2
lifting weight rep 1
lifting weight rep 2
lifting weight rep 3
lifting weight rep 4
lifting weight rep 5
==> starting exercise 3
lifting weight rep 1
lifting weight rep 2
lifting weight rep 3
lifting weight rep 4
lifting weight rep 5
==> Continue & Break > const stuff = [ 2, {4: 2, 5: 'Hello', 'Daaimah': "Tibrey"},
continue will skip over the condition found 'string', 'another_string' ];
break will stop after first condition is met > for (let i = 0; i < stuff.length; i++) {
if (typeof stuff[i] !== "string") continue;
console.log(stuff[i], ' is a ', typeof stuff[i]);
}
> for (let i = 0; i < stuff.length; i++) {
if (typeof stuff[i] !== "number") break;
console.log(stuff[i],'is the first ', typeof stuff[i]);
}
string is a string
another_string is a string
2 "is the first " "number"
==============================================================================================================================
WHILE LOOP
==============================================================================================================================
start var; let rep = 1;
While (stop condition) { while (rep<=5) {
stuff; console.log(Exercise ${rep} ๐Ÿ‹`);
iteration; rep++;
} }
"string literal" is used in console
Exercise 1 ๐Ÿ‹
Exercise 2 ๐Ÿ‹
Exercise 3 ๐Ÿ‹
Exercise 4 ๐Ÿ‹
Exercise 5 ๐Ÿ‹
==> Does not depend on counter > let dice = Math.trunc(Math.random() * 6) + 1;
Math.trunc() used to remove decimal while (dice != 6){
Math.random() used to get random number console.log('You rolled a ', dice);
between 1 and 0 dice = Math.trunc(Math.random() * 6) + 1;
if (dice === 6) console.log("You've got a ", dice);
}
You rolled a 2
You rolled a 5
You rolled a 1
You rolled a 2
You rolled a 5
You rolled a 3
You've got a 6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment