Top 5 confusing things about JavaScript while I learned it for the first time

1. The difference between return and calling the function

While studying functions, I was confused about the difference between return and calling the function. But I was able to understand after I likened the function to a practical example in our daily lives.
I would like to make a cup of café latte. There are two machines. One is an espresso machine and another is a steamed milk machine.

☕️ Espresso machine is the first function.

• Coffee beans are the parameter.
• Espresso is the return. -Calling the function is the action I turn on the button of the espresso machine.

🥛 Steamed milk machine is the second function.

• Cold milk is the parameter.
• Steamed milk is the return.
• Calling the function is the action I turn on the button of the steamed milk machine.

In order to make a cup of café latte, I turned on an espresso machine (=calling the first function) and I got the espresso (=return). Then, I turned on the steamed milk machine(=calling the second function) and used the espresso (=return) to mix with steamed milk(=return).
If I didn’t have the espresso, I can not mix it with steamed milk so I can not make a cup of café latte, even if I turn on the steamed milk machine.
This is the way I understand the difference between those.

---

2. The difference between return and console.log

After I understood the difference between return and calling the function, I also got confused about the difference between "return and console.log. Because my teacher said if you make the function, you always should write return, however, sometimes, I do not need to write it instead of console.log, so I thought that both have the same role. Then, I tried to write the following code to compare the difference.

• 1st try

I wrote the following code. If I commented out return c;, the result is the same.

function sum() {
    let a = 2;
    let b = 3;
    let c = a + b;
    console.log("test a is " + c);
    return c;
  }
  sum();

• 2nd try

I wrote the following code. If I commented out return c;, the result was changed and it's starting to make sense.

function sum() {
    let a = 2;
    let b = 3;
    let c = a + b;
    console.log("test a is " + c);
    return c;
  }
  let d = sum();
  console.log("test b is " + d);

• In the console

test a is 5
test b is 5

• In the console (commented out return c;)

test a is 5
test b is undefined

return c; is crucial in this code because it specifies a value to be returned to the function caller. As you can see, If omitted, undefined is returned instead. console.log will not influence the flow of the code, on the other hand, return values will cause reactions there.

Reference link1

---

3. Two types of Array

While I learned about array, I god that it has multiple ways to write. At first, it was challenging to distinguish those differences.

ⅰ. Array of objects

[{},{},{},{}] 

Here, we store objects because we want similar types of value. Objects store properties for particular entities.
For example; Student

let studentsRecords = [
    {
      name: "John",
      rollNumber: 100,
    },
    {
      name: "Bob",
      rollNumber: 101,
    },
    {
      name: "Nick",
      rollNumber: 102,
    },
  ];
  console.table(studentsRecords);

ⅱ. Nested array

[[],[],[],[]] 

On the other hand, here we have array inside another array. There is no direct relation between array and it has no properties.

let nums = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
];
console.table(nums);

At the moment, I can not imagine the practical situation, but the purpose is different, and most of the time, we use Array of objects.
Reference link2

---

4. For Loop vs While Loop

I'm also confused about these differences because the following code shows the same result.

ⅰ. For Loop

for(let count = 0; count <=5; count++){
    console.log(count);
}

ⅱ. While Loop

let i = 0;
while(i <= 5){
    console.log(i);
    i++;
}

According to one website,

For Loop: A for loop is an iteration method that is best used when you know the number of iterations ahead of time. It’s always followed by the initialization, expression and increment statements.
While Loop: A while loop is an iteration method that is best used when you don't know the number of iterations ahead of time. The contents of the loop are executed as long as the expression evaluates to true.

After I imagine practical examples in my daily life, It's starting to make sense.
I'm in the grocery store to buy tons of apples. 🍎
When I wanna know the cost of 100 apples, I use For Loop because I know the number of iterations ahead of time. On the other hand, when I wanna know the number of apples if I will pay 1000 dollars, I use While Loop because I don't know the number of iterations ahead of time. This is the way how do I pick between the two.
Reference link3
Reference link4

---

5. Loop with Array

When I use For Loop with Array, I have no idea about the meaning of this syntax.

let fruitsArray = ["Apple", "Mango","Orange","Pineapple"];

for(let i = 0; i < fruitsArray.length; i++){
    console.log(fruitsArray[i]);

I got confused about which statement points to index or length so I wrote detail and tried to think one by one.

        index         0        1       2          3
let fruitsArray = ["Apple", "Mango","Orange","Pineapple"];
        length        1        2       3          4

for(let i(index) = 0; i(index) < fruitsArray.length(length); i(index)++){
    console.log(fruitsArray[i(index)]);

• In the console

i = 0, "Apples"
i = 1, "Mangoes"
i = 2, "Oranges"
i = 3, "Pineapples"

I changed < to <= and the result was changed.

        index         0        1       2          3
let fruitsArray = ["Apple", "Mango","Orange","Pineapple"];
        length        1        2       3          4

for(let i(index) = 0; i(index) <= fruitsArray.length(length); i(index)++){
    console.log(fruitsArray[i(index)]);
}

• In the console

i = 0, "Apples"
i = 1, "Mangoes"
i = 2, "Oranges"
i = 3, "Pineapples"
i = 4, Undefined 

---