const names = ['Victor', 'Jade', 'Edidiong', 'Tina'];

By design, we know that each element of an array has an index identifier starting from 0 to the end of the array. Arrays are also ordered list of element, so the order matters also while destructuring.

const [Winner, second, ...everyoneElse] = names;

// if we call the variable Winner, it stores the first element of the array 'Victor'.
// Winner
// OutPut: "Victor"
// second
// OutPut: "Jade"
// everyoneElse
// OutPut: ["Edidiong", "Tina"]

The names Array is not tampered with in any way, we have only created a list of variables for the elements found in the names Array.

As seen in the code above, we used the Rest operator (...everyoneElse) to categorize the remaining elements in the name array. This makes us get the remaining elements as a new array in the variable name everyoneElse.

Destructuring of Arrays isn't really common in programming, what's more, common is destructuring of Objects.

Below we would learn how to destructure an Object and its common use.

const subjectScores = {
    english: 98,
    math: 90,
    socialStudies: 95,
    elective: 60
};

If we had to access each element before, we would do the following;

const english = subjectScores.english;

// Now if we called english, would get 98.

If we had way more data to pull out and use for a specific purpose, it would be crazy to have to repeat this pattern, for this sake, we can use destructuring.

const {math, elective, ...allOthers } = subjectScores;

just like we did with arrays, it's easy to also destructure an Object, and the same would apply this case.

How do we rename any of the key in the subjectScores Object?

To do this, find the key that we want to rename and then, assign a new name to it. This would nake the previous name unusable.

const {elective: electiveStudies, english} = subjectScores;

Now that we have renamed the key "elective" to "electiveStudies", if we call elective, we would get the following error "Uncaught ReferenceError: elective is not defined".

But if we call english, we would still get the output 98, and if we call the new name electiveStudies, OutPut: 60.

Another very common use case is to use default params with Destructuring.

const arry = {
    // name: 'James',
    occupation: 'Programmer',
    bankSum: 700,
    taxPaid(num){
        return 700 * num / 100;
    },

};
// If we called arry.name we would get 'James'

But if we destructure like we did below and assigned a default Param to name like seen below;

const {name: named = 'Goblin' } = arry;

The name still remains 'James' because we have it assigned already in the array and that takes precedence.

But If we remove the name Property and then destructure again with the same example, we will access the property using the new name property.

Example;

const arrys = {
    occupation: 'Programmer',
    bankSum: 700,
    taxPaid(num){
        return 700 * num / 100;
    },

};

const {name: namedd = 'Shawl' } = arrys;

const fullName = function ({occupation, bankSum}) {
    return `${occupation}, ${bankSum}`;
};

Now, namedd will OutPut 'Shawl' as expected.

Destructuring Params in Functions

Let's create an Object for example;

const users = {
    name: 'Victor',
    isAdmin: false,
    email: 'myEmail@gmail.com',
    dob: '20/01,1901',
    ethnicity: 'Black'
};

Now, we would create a Function that takes in the arguments or properties of the Object Above.

const callUsersDet = function({email, dob, isAdmin}){
return `Users email is: ${email}, born on the: ${dob}, and is Admin privilege is ${isAdmin}.`;
};

Whenever we call the callUsersDetails function, it is expecting us to pass in Object that has all these properties that are housed in the users Object, to do this, we would say; callUsersDetails(users);

This would call return the following output; "Users email is: myEmail@gmail.com, born on the: 20/01,1901, and is Admin privilege is false."

I hope this helps clarify what is going on.

Destructuring really is very simple if understood its use cases, I hope I've been able to clarify a little about the Topic.

If you found this write up helpful, pls share it with any friend learning JavaScript Basics to help them also get ahead.

Share, like, and follow for more exciting writeups.

Example, We would create a rollDie function that would by default accept a num;

Each time the number is called, the function would produce a range of numbers from the number entered to 1;

const rollDie = function(num){
    return Math.floor(Math.random() * num ) + 1;
};

rollDie(5); // This would produce numbers from 1 to 5 randomly.

One problem however is that each time we call rollDie() without a number, it would return NaN, which means, Not a Number.

To eliminate this, default Param would do the trick for us.

Example;

const rollDie2 = function(num = 6){
    return Math.floor(Math.random() * num ) + 1;
};

This way, when rollDie2() is called, without any argument, it would return random numbers between 1 and 6, because 6 has been assigned as the default parameter.

The Default Param also works in left to right precedence. This means that when there are two parameters and only one is defined, it has to be at the edge of the closing bracket to the right.

Example;

const rollDie3 = function(num2, num = 6){
    console.log(`Num 2: ${num2 * 2} is the number without default Param, while Num: ${num} is the number with Param`);
    // return Math.floor(Math.random() * num ) + 1;
};

Ex 1: When rollDie3() is called without any argument, it would print the following OUTPUT: Num 2: NaN is the number without default Param, while Num: 6 is the number with Param

Ex 2: When rollDie3(20) is called with only one argument, it would print the following OUTPUT: Num 2: 6 is the number without default Param, while Num: 6 is the number with Param

As seen in Ex 2: because only one parameter was passed, the default param takes precedence and is output in place of the empty param

Ex 3: When rollDie3(3,9) is called with two arguments as expected, it would print the following OUTPUT: Num 2: 6 is the number without default Param, while Num: 9 is the number with Param

As seen in Ex 3: even with two parameters passed as expected, the default param takes precedence and is output first before the param without default params.

If we switch places of the arguments as followed

const rollDie4 = function(num2, num = 6){
    console.log(`Num 2: ${num * 2} is the number without default Param, while Num: ${num2} is the number with Param`);
};

If we call the function rollDie4(), we would get the following Output; OUTPUT: Num 2: 12 is the number without default Param, while Num: undefined is the number with Param

If we call the function rollDie4(3), with one parameter, we would get the following Output; OUTPUT: Num 2: 12 is the number without default Param, while Num: 3 is the number with Param

But if we call the function rollDie4(3, 20), with two parameters as expected, we would get the following Output; OUTPUT: Num 2: 40 is the number without default Param, while Num: 3 is the number with Param

Default Params are quite easy to grasp, so play with it and try to eliminate those null, NaN, or undefined returns of value, if possible, assigned a value by default, and remain happy.

Happy Coding, Hope this clarifies the Topic Default Param;

Here's an example;

const calcObject = {
    add(num,num2){
        return num + num2
    },
    sub(num,num2){
        return num - num2
    },
    squ(num){
        return num * num
    },
    div(num, num2){
        return num / num2
    }
}
// OUTPUTS examples

calcObject.add(8,9)
17
calcObject.sub(18,9)
9
calcObject.squ(4)
16
calcObject.div(14,2)
7

We have written the functions using the shorthand style

We could also write it like this;

const calcObject = {
    add: function (num,num2){
        return num + num2
    },
    sub: function (num,num2){
        return num - num2
    },
    squ: function (num){
        return num * num
    },
    div: function (num, num2){
        return num / num2
    }
}

//OUTPUT will be the same as the previous code, if called with the same parameters in the example.
calcObject.add(8,9)
17
calcObject.sub(18,9)
9
calcObject.squ(4)
16
calcObject.div(14,2)
7

This is method in JavaScript.

It's very simple. You learn to swim by watching people swim and most importantly, trying it out yourself, you learn to code by practicing coding also. Goodluck.

Side Note: Technology continues to evolve and things get improved over time. JavaScript has evolved over the years and trying to keep up can be hard, but the basics are really what matters, and staying unformed help us get ahead.

Definining an object, we use the mustache or the curly brackets {//Properties of the Object goes in here..} e.g:

const class5 = {
    className: "Class 5",
    ageGroup: "5 to 10",
    color: "green",
    breakfast: true,
    lunch: false,
    dinner: false,
};

// The above Object serves as a container for the student Object.

// Using the ES6 "For of" statement

// If you run the code below, you would get an error;

for (let student of class5){
    Do something...
    console.log(`All students in ${class5.className} are of the agegroup of ${class5.ageGroup}`);
}

// The "for of" code gives you the following error 
//  "Uncaught TypeError: class5 is not iterable at ..."

As correct as the code may seem, it just won't work because an Object is non-iterable.

/ To make this work, we must either find a way to make an array from the Object using the "for in" loop or use the special Object.values() or Object.keys() method to be able to work with the Object data. /

// Using the for in method to loop through.

for (let student in class5){
    // Do something...
    console.log(`All Class 5 have the following: \n${student} = ${class5[student]}`);
    // console.log(`All students in ${class5.className} are of the agegroup of ${class5.ageGroup}`);
}

The "for in" loop code would run 6 times because we have 6 object elements and we are console.logging with the "for in" syntax. We are referencing the values of the object with the .notation which would then reference the value of the key called.

The Second method would be to use the Object.value(Objectname) or Object.keys(Objectname) syntax. The following can be used...

• Object.values() => returns the value into a new array.

• Object.keys() => returns the keys into a new array.

• Object.entries() => returns the keys and values into individual arrays.

for (let eachStudent in class5){
    console.log(`Class 5 has the following Keys: ${Object.keys(class5[eachStudent])}`);
    console.log(`Class 5 has the following Values: ${Object.values(class5)}`);
}

The code above would run the console.log command 6 times each, making a total of 12.

Now that we have made an array of the Object using the Object method, we can now perform logic on the data the way we would normally do like when accessing an array.

let count = 0;
let ourClass = Object.values(class5);
for (let eachP of ourClass) {
    count++;
    console.log(`This is line ${count} and the length of our class Object now is ${ourClass.length}`);
    console.log(`${eachP}`);
}

This is all there is to Objects in JavaScript, or at least, the very basics.

Learning to program is not magical, you make the experience magical when you accept that you offcourse can remember everything, nor know everything, but you can at least, understand how things work and can explain what a code does to a 10 years old and help them understand the concepts. That's where the magic starts and it intensifies when it's been practiced until everything then seems magical.

Like, share, Upvote, and give your honest feedback to help me create better content for you.

You can also support me as a developer so I can spend more quality time providing you with awesome content that would help you become a better developer.

You can now buy me a coffee: buymeacoffee.com/WebtekMasters

Some respond to one or more properties of an Array while the Every responds to all properties of an Array.

Example.

const students = [
    {
        name: "Victor",
        class: 5,
        subjects: ["Math", "English", "Science"],
        pass: true
    },
    {
        name: "Segun",
        class: 9,
        subjects: ["Chemistry", "Math", "Computer Studies"],
        pass: false
    },
    {
        name: "Faith",
        class: 3,
        subjects: ["Social Studies", "Medicine", "CRK"],
        pass: true
    },
    {
        name: "Tracy",
        class: 5,
        subjects: ["Biology", "Agriculture", "Literature"],
        pass: false
    }

];

// We have defined an array above


const subjectTaken = function(){
    return students.every(eStudents => eStudents.subjects);
};

subjectTaken(); //Output would return "true" because every students took a subject.

const subjectTaken2 = function(){
    return students.some(eStudents => eStudents.subjects);
};

subjectTaken2(); //Output would return "true" because some students took a subject.

// If we however defined the function with an additional condition like the following (using implicit return with arrow function);

const passed = () => students.some(students => students.pass === true);

// Output: true

const passed2 = () => students.every(students => students.pass === true);

// Output: false Because not every student actually passed.

I hope this input helps clarify the topic for those learning JavaScript methods and needs a clearer explanation.

As a developer, just as with everything, you want to make sure you get adequate information regarding a command before using it.

So, my experience using git on VSCode brought about this writeup.

Inasmuch as I was able to rectify the issue, this is one mistake I don't want to make with a gigantic codebase containing thousands of files. It can cause nightmares to be honest.

So, I had been writing codes and pushing them to my repo on GitHub, then, I had the need to rename some of the files, this caused me to keep getting some errors on my git CLI each time I ran the command

git status

I felt the need to sync all changes with my origin(git Repo).

Roadblock 1: I was able to use git rm file1.js and this worked fine, but I had a file named try&catch.js which I couldn't remove because git treated the & in the name differently.

Roadblock 2: In the course of only trying to remove the file which I wanted to be deleted, I did git rm * and this removed all my files from my VSCode.

I was in shock as I didn't know what to do next.

The solution to Roadblock1: As you may have guessed that I changed the naming convention to something else, well that would have worked also, but I didn't do that.

What I did was implemented the escape syntax before the & sign in the name so My git code was git rm try\&catch.js and this worked awesomely!

The solution to Roadblock2: I used git reset and then git ls-files -d -z | xargs -0 git checkout -- and this restored back all my files for me.

I have never been more disturbed with the tremendous work and documentations I have been pushing all this while to my repo only to have it wiped out with a single mistake.

I hope you learn from my experience. I would share more of my coding journey and how I am able to master JavaScript by practicing, teaching, and most importantly pushing my codes and writeups to my GitHub using the GitHub commands.

These are the things you would be doing the most as a developer.

Like, share, Upvote, and give your honest feedback to help me create better content for you.

You can also support me as a developer so I can spend more quality time providing you with awesome content that would help you become a better developer.

You can now buy me a coffee: https://www.buymeacoffee.com/WebtekMasters