10 tricky things in JavaScript
- null vs undefined
undefined and null might be confusing to you.
When you declare a variable but you don’t assign any value to it you’ll get undefined. In other programming languages, you might get garbage value but JavaScript will give you undefined.
When your function doesn’t return anything the return value will be undefined. Uninitialized variables will always return undefined.
When you explicitly want to identify that the value of a variable is empty or it doesn’t have any value you can use null to set its value.
2. map
Instead of using for loop, we can use a map to iterate over array items and apply a function on each array item. After the array name, we type .map(). Inside the map() function we’ll write our function name like line number 7. We can also use the arrow function like line number 10 if we don’t want to declare a separate function.
3. filter
If you want to filter items from a collection of objects or an array you can use filter to easily filter out elements. After the array name you’ve to write .filter(), inside the bracket, you can supply a function name or lambda function which will do the filtering. Suppose we want to filter out all number greater than 5 from the nums array below we can use the arrow function inline 10 number=>number>5 before arrow sign => we can give any name and after it, we give the condition. For each array item when the condition is true, it’ll be included in the resulting array.
4. find
find is somewhat similar to filter but it’ll only return the first element matching the filtering condition. If no matching element found it’ll return undefined. In the following code among all the elements, only the first element greater than 5 in array 6 was returned.
5. window
You can consider the window object of javascript as the parent of all javascript objects, functions, and variables. Global variables and functions are properties of the window object. Any websites all javascript functionalities run inside the window object.
6. setTimeout
If you want to execute a certain piece of code after a certain time has passed you can use setTimeout(). Suppose you want to hide the alert pop up shown to the user after 3 seconds you can utilize setTimeout() to hide the pop up after 3 seconds .setTimeout() the first parameter will be a function and the second parameter time in milliseconds.
In the following code, we pass the popup function and 3000 milliseconds to setTimeout. After 3 seconds it’ll print to the console Welcome to Bangladesh
7. bind to use another object method
Suppose you’ve declared a method inside a JavaScript object. Now you want to use it in another function without rewriting the function again. Here you can use bind to attach the method of one javascript object to another object so that you can use it on the attached object.
Suppose we have an object dog that has a method bark. calling the method we get Dog. Bark bark ... Now if we want to use the bark() method in our new bullDog object we can attach using bind(). First, we type object name dot method dot bind(new object name attaching) like dog.bark.bind(bullDog) on line 17 and assign it to variable bullDogBark, and calling this bullDogBark() runs the function with bullDog() properties. We can output BullDog. Bark bark ...
8. truth and false values
JavaScript evaluates a few values as true and few values as true. It’ll come in handy to you if you know these. You can often use them in conditional logic or inside if-else condition.
Truthy value is valued which evaluate to true when used in a boolean context. This happens because javascript uses type coercion when checking for the boolean context.
9. new
In javascript, we often need to create objects. For object creation, we first create an object definition known as class. Using new keyword we can make objects of that defined class.
We can also use it for predefined javascript objects. For example let today = new Date().
10. variable scope in javascript
JavaScript variable has two types of scope: local and global scope.
If you declare a variable in the main javascript file outside of functions then it’ll have a global scope. Variable declared inside a function without any let, const, or var keyword is also global.
You can consider each function a function scope and the variable declared inside that function has local scope. You can’t access outside this function that variable.
In the following example variable num3, output has a global scope. You can access num3 inside the total function. But the variable result inside total has local scope to the function total. You can’t access it outside the function. If you try to access it’ll throw an error.
