You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.0 KiB
120 lines
3.0 KiB
9 months ago
|
/******************************************************************************
|
||
|
* VARIABLES
|
||
|
*/
|
||
|
|
||
|
/* Outdated syntax
|
||
|
var name = 'Ken';
|
||
|
var age = 57;
|
||
|
var hasHobbies = true;
|
||
|
*/
|
||
|
|
||
|
// Using let and const for variables
|
||
|
const uname = 'Ken';
|
||
|
let age = 57;
|
||
|
let hasHobbies = true;
|
||
|
|
||
|
/******************************************************************************
|
||
|
* FUNCTIONS
|
||
|
*/
|
||
|
|
||
|
// Basic structure and use of a function
|
||
|
function basicSummarizeUser(userName, userAge, userHasHobbies) {
|
||
|
return ('Name is ' + userName + ', age is ' + userAge + ', and the user has hobbies: ' + userHasHobbies);
|
||
|
}
|
||
|
console.log(basicSummarizeUser(uname, age, hasHobbies));
|
||
|
|
||
|
// A named function
|
||
|
const namedSummarizeUser = function(userName, userAge, userHasHobbies) {
|
||
|
return ('Name is ' + userName + ', age is ' + userAge + ', and the user has hobbies: ' + userHasHobbies);
|
||
|
}
|
||
|
console.log(namedSummarizeUser(uname, age, hasHobbies));
|
||
|
|
||
|
// Arrow function syntax: affects the use of 'this'
|
||
|
const arrowSummarizeUser = (userName, userAge, userHasHobbies) => {
|
||
|
return ('Name is ' + userName + ', age is ' + userAge + ', and the user has hobbies: ' + userHasHobbies);
|
||
|
}
|
||
|
console.log(arrowSummarizeUser(uname, age, hasHobbies));
|
||
|
|
||
|
// Arrow function when there is a single statement in the function
|
||
|
const add = (a, b) => a + b;
|
||
|
console.log(add(1, 2));
|
||
|
|
||
|
/******************************************************************************
|
||
|
* OBJECTS
|
||
|
*/
|
||
|
|
||
|
const person = {
|
||
|
name: 'Ken',
|
||
|
age: 57,
|
||
|
|
||
|
greet() {
|
||
|
console.log(`Hi I am ${name}`);
|
||
|
}
|
||
|
}
|
||
|
console.log(person)
|
||
|
|
||
|
/******************************************************************************
|
||
|
* ARRAYS
|
||
|
*/
|
||
|
const hobbies = ['Sports', 'Cooking'];
|
||
|
for(let hobby of hobbies) {
|
||
|
console.log(hobby);
|
||
|
}
|
||
|
|
||
|
/******************************************************************************
|
||
|
* SPREAD AND REST OPERATORS
|
||
|
*/
|
||
|
|
||
|
// Simply copying an array
|
||
|
const copiedArray = hobbies.slice();
|
||
|
console.log(copiedArray);
|
||
|
|
||
|
// Making a copy using SPREAD
|
||
|
const copiedAgainArray = [...hobbies];
|
||
|
|
||
|
// Can use SPREAD to copy objects too
|
||
|
const copiedPerson = {...person}
|
||
|
|
||
|
// REST bundles items together
|
||
|
const toArray = (...args) => {
|
||
|
return args;
|
||
|
};
|
||
|
console.log(toArray(1, 2, 3, 4)); // The REST operator let's me hand in a variable number of arguments
|
||
|
|
||
|
/******************************************************************************
|
||
|
* DESTRUCTURING
|
||
|
*/
|
||
|
|
||
|
const printName = (personData) => {
|
||
|
console.log(personData.name);
|
||
|
}
|
||
|
printName(person);
|
||
|
|
||
|
// Alternative using destructuring
|
||
|
|
||
|
const printNameD = ({name}) => {
|
||
|
console.log(name);
|
||
|
}
|
||
|
printNameD(person); // Still pass in the object but only the name prop is passed
|
||
|
|
||
|
/******************************************************************************
|
||
|
* ASYNC CODE and PROMISES
|
||
|
*/
|
||
|
|
||
|
const fetchData = () => {
|
||
|
const promise = new Promise((resolve, reject) => {
|
||
|
setTimeout(() => {
|
||
|
resolve('Done');
|
||
|
}, 1500);
|
||
|
});
|
||
|
return promise;
|
||
|
};
|
||
|
|
||
|
setTimeout(() => {
|
||
|
console.log('Timer is done');
|
||
|
fetchData().then(text => {
|
||
|
console.log(text);
|
||
|
});
|
||
|
}, 2000);
|
||
|
|