Technology
programming
Web Development
ReactJS
Vuejs
Angular
Svelte
Vanilla JavaScript
Chocolatey Framework
How much Vanilla JavaScript before
➤ ReactJS
➤ VueJS
➤ Svelte
➤ Angular
a Chocolatey🍫 Framework?
⇩
➤ ReactJS
➤ VueJS
➤ Svelte
➤ Angular
a Chocolatey🍫 Framework?
⇩
What is Vanilla JavaScript?
❝Vanilla + JavaScript ⇌ Plain + JavaScript❞
✧ In real life, vanilla isn't that plain.
✧ When I say JavaScript, you might have heard TypeScript.
❝Vanilla + JavaScript ⇌ Plain + JavaScript❞
✧ In real life, vanilla isn't that plain.
✧ When I say JavaScript, you might have heard TypeScript.
Who wants to taste chocolate 🍫
➀ Ex-Vanilla
He had tasted vanilla but at a different place.
➁ Desperate
He just had 2 cones of vanilla ice cream and is thinking about when he can have chocolates.
➂ Vanilla Fan
He just loves vanilla. For him, chocolates can just wait.
➀ Ex-Vanilla
He had tasted vanilla but at a different place.
➁ Desperate
He just had 2 cones of vanilla ice cream and is thinking about when he can have chocolates.
➂ Vanilla Fan
He just loves vanilla. For him, chocolates can just wait.
➊ Basics
➀ Variable
➤ Declaration
➤ Scope
➤ Hoisting
➤ Assignment
➁ Functions
➤ Declarations
➤ Expressions
➤ Arrow Functions
➤ Callbacks
➤ Closure
➀ Variable
➤ Declaration
➤ Scope
➤ Hoisting
➤ Assignment
➁ Functions
➤ Declarations
➤ Expressions
➤ Arrow Functions
➤ Callbacks
➤ Closure
➂ Operators
➤ Arithmetic
➤ Assignment
➤ Comparison
➤ Logical
➃ Literals
➤ String
➤ Array
➤ Object
➄ Condition & Looping
➤ if, if...else
➤ for, for...in, for...of
➤ while, do...while
➤ Arithmetic
➤ Assignment
➤ Comparison
➤ Logical
➃ Literals
➤ String
➤ Array
➤ Object
➄ Condition & Looping
➤ if, if...else
➤ for, for...in, for...of
➤ while, do...while
➋ String Methods
➤ toLowerCase()
➤ toUpperCase()
➤ charAt()
➤ substring()
➤ slice()
➤ includes()
➤ startsWith()
➤ endsWith()
➤ indexOf() / lastIndexOf()
➤ match() / matchAll()
➤ replace() / replaceAll()
➤ repeat()
➤ trim()
➤ toLowerCase()
➤ toUpperCase()
➤ charAt()
➤ substring()
➤ slice()
➤ includes()
➤ startsWith()
➤ endsWith()
➤ indexOf() / lastIndexOf()
➤ match() / matchAll()
➤ replace() / replaceAll()
➤ repeat()
➤ trim()
➌ Array Methods
➤ forEach()
➤ map()
➤ reduce()
➤ flat()
➤ flatMap()
➤ find()
➤ filter()
➤ slice()
➤ splice()
➤ push()
➤ pop()
➤ shift()
➤ unshift()
➤ some()
➤ every()
➤ forEach()
➤ map()
➤ reduce()
➤ flat()
➤ flatMap()
➤ find()
➤ filter()
➤ slice()
➤ splice()
➤ push()
➤ pop()
➤ shift()
➤ unshift()
➤ some()
➤ every()
➍ Array Destructuring
In use cases where a function may return more than one value. It's possible by returning those in an array.
Using array destructuring, we can capture all returned values seamlessly.
Example:
⇥ const [fruits, vegetables] = shop();
In use cases where a function may return more than one value. It's possible by returning those in an array.
Using array destructuring, we can capture all returned values seamlessly.
Example:
⇥ const [fruits, vegetables] = shop();
➎ Array Spread
There are so many use cases. One of the place where we frequently spread an array is adding/updating/removing an item from the state.
Example:
Add an item to the starting of Array
⇥ let newArray = [itemToAdd, ...oldArray]
There are so many use cases. One of the place where we frequently spread an array is adding/updating/removing an item from the state.
Example:
Add an item to the starting of Array
⇥ let newArray = [itemToAdd, ...oldArray]
➏ Object Destructuring
⬘ Passing named parameters to a function is a modern-day design pattern and has many advantages.
⬙ We can destructure the object and specify only those properties that we are going to use.
Example:
function myFunc({name, address}) {
}
⬘ Passing named parameters to a function is a modern-day design pattern and has many advantages.
⬙ We can destructure the object and specify only those properties that we are going to use.
Example:
function myFunc({name, address}) {
}
➐ Object Spread
An object may have a lot of properties. Using just what's needed and forwarding the rest to a child is a common design pattern.
An object may have a lot of properties. Using just what's needed and forwarding the rest to a child is a common design pattern.
➑ Template Literals
➤ Untagged Template Literals
➤ Tagged Template Literals
This is used in a few stylesheet libraries.
➤ Untagged Template Literals
➤ Tagged Template Literals
This is used in a few stylesheet libraries.
➒ ES Modules
➤ import
➤ import {}
➤ export
➤ export default
➤ import
➤ import {}
➤ export
➤ export default
➓ APIs & Others
➤ DOM API
Web development is hardly possible without knowing the DOM API.
➤ Promise API
➤ async...await
These 2 are not hard stoppers though.
➤ Fetch API
Not a hard stopper. Learn to make API calls.
➤ DOM API
Web development is hardly possible without knowing the DOM API.
➤ Promise API
➤ async...await
These 2 are not hard stoppers though.
➤ Fetch API
Not a hard stopper. Learn to make API calls.
🏁 Final Words
⬘ Learning methods vary from person to person.
⬙ Remember, JavaScript knowledge is definitely needed before jumping into a framework. How and at what time you learn is tricky.
Happy eating chocolates 🍫
⬘ Learning methods vary from person to person.
⬙ Remember, JavaScript knowledge is definitely needed before jumping into a framework. How and at what time you learn is tricky.
Happy eating chocolates 🍫
Hey 👋
I am a Tech Writer, Educator, and Mentor from India 🇮🇳, here sharing
✰ Tutorials
✰ Tricks
✰ Career Tips
✰ Cheat Sheets
✰ Interview Questions
✰ Project Ideas
on
➠ Web Development
➠ Data Structures and Algorithms
➠ Databases
Thanks for reading. 🙏
I am a Tech Writer, Educator, and Mentor from India 🇮🇳, here sharing
✰ Tutorials
✰ Tricks
✰ Career Tips
✰ Cheat Sheets
✰ Interview Questions
✰ Project Ideas
on
➠ Web Development
➠ Data Structures and Algorithms
➠ Databases
Thanks for reading. 🙏
Loading suggestions...