JavaScript Essentials for React Developer

➊ Basics ⇥ Variable Declaration  ⇥ Variable Scope  ⇥ Variable Hoisting  ⇥ Functions  ⇥ Arrow Functions  ⇥ Callback Functions  ⇥ Closure  ⇥ Basic Operators  ⇥ Array Literals  ⇥ Object Literals  ⇥ if, if...else ⇥ for, for...in, for...of, while, do...while

➋ Array.prototype Method ⇥ forEach()  ⇥ map()  ⇥ reduce()  ⇥ flat()  ⇥ flatMap()  ⇥ find()  ⇥ filter()  ⇥ slice()  ⇥ splice()  ⇥ push()  ⇥ pop()  ⇥ shift()  ⇥ unshift()  ⇥ some()  ⇥ every()

➌ Array Destructuring It's frequently used in hooks esp. useState() Example: ⇥ const [fruits, setFruits] = useState([]);

➍ 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.

➎ Object Destructuring ⬒ Properties are passed as an object parameter to our function component. ⬓ We can destructure it and, specify only those properties that we are going to use.

➏ Object Spread We may spread an object to pass those to a child component. Example: function MyComponent({name, address, ...rest}) { return }

➐ Template Literals ⇥ Untagged Template Literals  ⇥ Tagged Template Literals This one is used heavily in few styling libraries.

➑ ES Modules ⇥ import  ⇥ import {}  ⇥ export  ⇥ export default