├── ternary.js
├── literals.js
├── modules.js
├── arraryMethods.js
├── functions.js
├── destructing.js
├── spreadOperators.js
├── promises.js
└── readme.md


/ternary.js:
--------------------------------------------------------------------------------
 1 | 
 2 | //Ternany Operator
 3 | 
 4 | const age = 45 ;
 5 | 
 6 | const Person = age >= 20 ? "Yes" : "No" ;
 7 | 
 8 | console.log(Person) ;
 9 | 
10 | 
11 | 


--------------------------------------------------------------------------------
/literals.js:
--------------------------------------------------------------------------------
1 | // Template literals
2 | 
3 | 
4 | const student = "Wade Lamps" ; 
5 | 
6 | const StudentFull =  `Full name is ${student}`
7 | 
8 | 
9 | console.log(StudentFull)


--------------------------------------------------------------------------------
/modules.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | // export keyword allows code to be used in all parts of the app scope
 4 | 
 5 | export const add = (a, b) =>{
 6 |     return a + b;
 7 | }
 8 | 
 9 | 
10 | //import keyword allows exported code to imported to be used in any part of the app
11 | 
12 | import {add} from "/modules"
13 | 
14 | 
15 | //export default
16 | 
17 | export default function Cars ( ) {
18 | 
19 | }
20 | 
21 | import Cars from "./modules"


--------------------------------------------------------------------------------
/arraryMethods.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | // map 
 4 | 
 5 | const numbers  = [1,75,34,34,32,34,30,42,35,54,6,565,55,5635]
 6 | 
 7 | const results = numbers.map(number => number + 2)
 8 | console.log(results)
 9 | 
10 | 
11 | //filter
12 | 
13 | const FilterNum = numbers.filter(number => number  >=3 )
14 | console.log(FilterNum)
15 | 
16 | 
17 | //find
18 | 
19 | const FoundNum = numbers.find(number => number == 30)
20 | console.log(FoundNum)
21 | 
22 | 
23 | 


--------------------------------------------------------------------------------
/functions.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | //function expression
 4 | 
 5 | const namew = function (num2){
 6 |     return num2 * 2;  
 7 | }
 8 | namew(3)
 9 | 
10 | 
11 | const AddNumbers = function (n){
12 |     return 
13 | }
14 | 
15 | AddNumbers(n)
16 | 
17 |  
18 | function Name(num){
19 |     return num + 2;
20 | } 
21 | 
22 | 
23 | //arrow functions
24 | 
25 | const Student  = (num3 , num4) =>{
26 |     console.log(num3 * num4)
27 | }
28 | 
29 | Student(3,3)
30 | 


--------------------------------------------------------------------------------
/destructing.js:
--------------------------------------------------------------------------------
 1 | // destructing objects
 2 | 
 3 | const Person =  {
 4 |     name : "Wade",
 5 |     age : 12,
 6 |     height : 12.21,
 7 |     skinColor: "Black",
 8 |     educationalStatus : "University"
 9 | };
10 | 
11 | 
12 | 
13 | const {skinColor, name, age, height, educationalStatus} = Person;
14 | console.log(Person);
15 | 
16 | 
17 | //destructing arrays
18 | 
19 | const Schools = [ "UCC", "DTI", "UPSA", "KNUST", "LEGON"];
20 | 
21 | const [] = Schools;
22 | 
23 | console.log([]);


--------------------------------------------------------------------------------
/spreadOperators.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // spread operators arrays
 3 | const Cars = ["Xpeng", "Huwaer", "BMW", "Tesla"] ; 
 4 | 
 5 | const Price = [121312, 43213,21321,134345] ;
 6 | 
 7 | const Affordability = [ ...Cars ,  ...Price] ; 
 8 | 
 9 | 
10 | console.log(Affordability) ;
11 | 
12 | 
13 | //spread operators objects
14 | 
15 | const Concerts = {
16 |     Name : "John Doe Concert" ,
17 |     Venue : "Conference Theatre",
18 |     Time:  "4:30pm"
19 | } ; 
20 | 
21 | 
22 | const Tickets = {
23 |     Type : "VIP" ,
24 |     Quantity : 89 ,
25 |     Cost : "$600"
26 | 
27 | };
28 | 
29 | 
30 | const events  =  {...Concerts , ...Tickets  };
31 | 
32 | console.log(events);


--------------------------------------------------------------------------------
/promises.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | //promises
 4 | 
 5 | // fetch ("https://fakestoreapi.com/products")
 6 | // .then(response => response.json())
 7 | 
 8 | // .then(data => console.log(data))
 9 | 
10 | // .catch(err => console.log(err))
11 | 
12 | 
13 | 
14 | // async await 
15 | 
16 | console.log("////////////////////////////////////////////////////////////////////////////////////////////////")
17 | 
18 | 
19 | async function FetchData(){
20 | 
21 |     try{
22 | 
23 |         const response = await fetch("https://fakestoreapi.com/products");
24 | 
25 |         const data = await response.json()
26 | 
27 |         console.log(data)
28 | 
29 |     } catch(err){
30 |         console.log(err)
31 |     }
32 | 
33 |     
34 | }
35 | 
36 | FetchData()


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Essential Javascript Concepts to understand before working in react
 2 | 
 3 | 
 4 | 1. Ternary Operators - Known as shorthand conditional statements , they provide a way to write concise conditional statements
 5 | 
 6 | 2. Template Literals - Allows for easier string interpolation and multiline strings. They support embedded expressions.
 7 | 
 8 | 3. Destructing - It simplies the process of extracting values from arrays or objects. It enables you to pack values into distinct variables.
 9 | 
10 | 4.  Spread Operator - allows us to quickly copy all or part of an existing array or object into another array or object.
11 | 
12 | 5. Functions - Functions are the basic building blocks of js logics, function expressions and arrow functions are ways to define functions.
13 | 
14 | 6. Modules - Modules help for code reusability and organisation. They split code into separate files and enable exporting and importing of functionality.
15 | 
16 | 7. Array Methods - Js gives us numerous array methods to perform common operatons efficiently.
17 | 
18 | 8. Promises  - they simplify asycn operations such as fetching data  from an API. They represent the eventual completion or failure of an async operation.
19 | 
20 | 9. Async / await - its a  more modern way to approach asynchrous operations. It allows writing asynchrous code in a synchrous style.
21 | 


--------------------------------------------------------------------------------