Top 5 confusing things about JavaScript while I learned it for the first time
Tags: javascript, beginners, webdev, firstpost
Published: 2022-09-22 19:14:33

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

```javascript
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.
```javascript
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]
(https://stackoverflow.com/questions/21020608/difference-between-console-log-and-return-in-javascript)
___


## 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
```javascript
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.
```javascript
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](https://linuxhint.com/nested-array-working-in-javascript/)
___


## 4. For Loop vs While Loop
I'm also confused about these differences because the following code shows the same result.

**ⅰ. For Loop**
```javascript
for(let count = 0; count <=5; count++){
    console.log(count);
}
```
**ⅱ. While Loop**
```javascript
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](https://builtin.com/software-engineering-perspectives/for-loop-vs-while-loop)
[Reference link4](https://byjusexamprep.com/difference-between-for-loop-and-while-loop-i)
___


##5. Loop with Array

When I use For Loop with Array, I have no idea about the meaning of this syntax.
```javascript
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 
```
___