译 文 : 10 JavaScript Concepts That Every Developer Should Know.

Hi guys, today I’m going to talk about 10 JavaScript concepts that every developer should know. Let’s get started……

1. Arrow function

Arrow function expressions are another way to declare traditional function expressions. But there are some differences between arrow functions and traditional functions.

  1. Traditional functions have the “this” keyword, but arrow functions do not.
  2. Traditional functions have the argument keyword, but arrow functions do not.
  3. Traditional functions can be used as constructors, but arrow functions cannot.

If we use arrow functions, we should remove the function keyword and add an arrow => between the argument and the function body. We store the function as a variable. If an arrow is written in Korean on a single line then we can remove the curly braces from the function body and return the result directly. If the arrow function has only one argument, we can remove the argument parentheses.

Code examples:

const sum = (a, b) = > {
  return a+b;
}
console.log(sum(5.7)) // output, 12const multiply = (a, b) => a*b 
console.log(multiply(5.7)) // output, 35const double = a => a*2
console.log(double(5)) // output, 10
Copy the code

2.The default parameters

In versions after ES6 we can use default arguments in functions. If no arguments are passed when the function is called, the parameter values are set to default values. If we use a function with no arguments passed in, or if the value of the argument passed in is undefined, the parameter values used in the function body are the default values.

Code examples:

function add(a, b=5){
  return a+b;
}
console.log(add(7)) // output, 12function add(a, b=5){
  return a+b;
}
console.log(add(7.4)) // output, 11
Copy the code

3.Execute the function expression immediately

IIFE, full – Immediately Invoked Function Expression(Immediately executes Function Expression)

If we define a function and we want it to execute immediately, we can use the IIFE function. The IIFE function is an anonymous function and is called immediately after it is defined. And we can’t call the immediate function again at any other time.

Code examples:

(function (){
  console.log(5+7); }) ();// output, 12
Copy the code

4.Spread operator(Spread operator)

Expansion operator (…) Or three-point operators are a feature of ES6. We can use the expansion operator to merge arrays, objects, and strings. It is mainly used to expand arrays or strings. You can use the expansion operator to copy all elements of an array, all attributes of an object, and all characters of a string.

Code examples:

const numbers = [1.8.5.15.10];
console.log([...numbers]) // output, [1, 8, 5, 15, 10]
console.log([...numbers, 65]) // output, [1, 8, 5, 15, 10, 65]const user = {name: 'Shuvo'}
console.log({... user})// output, {name: 'Shuvo'}
console.log({... user,id: '1'}) // output, {name: 'Shuvo', id: '1'}
Copy the code

5. IsNaN () method

Returns true if the isNaN() method is called with NaN passed in, false otherwise

Code sample

console.log(isNaN(12)); // output, false
console.log(isNaN("false")); // output, true
console.log(isNaN("12")); // output, false
console.log(isNaN("")); // output, false
console.log(isNaN("12as")); // output, true
Copy the code

JavaScript has two types of data: basic data types and reference data types (objects, functions)

6. Basic data types

JavaScript has seven data types, and they are

  1. Number
  2. String
  3. Boolean
  4. Undefined
  5. Null
  6. Symbol
  7. BigInt

Code examples:

console.log(typeof(5)) //output, "number"
console.log(typeof('Hello')) //output, "string"
console.log(typeof(true)) //output, "boolean"
console.log(typeof(undefined)) //output, "undefined"
console.log(typeof(null)) //output, "object"**In JavaScript, typeof null is "object". We can consider it a bug in JavaScript and we can think it should be "null".
Copy the code

7. References or objects and functions

With the exception of basic data types, all types of JavaScript data can be classified as reference data types. They are

  1. Object
  2. Function

Arrays, regular expressions, and dates are all object types

Code examples:

console.log(typeof({name: 'Faysal'})) //output, "object"
console.log(typeof([1.2.5])) //output, "object"
console.log(typeof(() = > 4+4)) //output, "function"
console.log(typeof(/exp/)) //output, "object"
Copy the code

8. Double (==) vs third (===)

In JavaScript, double equals is used to compare values between two types. Returns true if the two values are equal. But tertiary processing compares the value of the data, and also compares the type of the data. Returns true if the values are the same and the type is the same, false otherwise. We should always use third order to compare data.

Code examples:

console.log(5= ="5") // output, true
console.log(5= = ="5") // output, false
console.log(1= =true) // output, true
console.log(1= = =true) // output, false
console.log(0= =false) // output, true
console.log(0= = =false) // output, false
Copy the code

9. Ternary operators

The ternary operator is another way of judging conditions. This is the simplest conditional judgment. You can use ternary operators to implement one-line completion criteria. Use? In ternary operator conditional judgment? To mark the condition, use: to mark the result. If the condition is judged to be true, we use the value returned by the: expression, otherwise we use the value of the: expression. We can use nested conditions in ternary operators. Logic is written for both true and false ternary operator conditions.

Code examples:

const number1 = 5;
const number2 = 8;
const largest = number1 > number2 ? number1: number2;
console.log(largest) // output, 8
Copy the code

10. Deconstruction

There are two types of deconstruction: arrays and objects.

Object deconstruction: We can get the property of the object through deconstruction, and the property name should be the same. We deconstruct arbitrary properties of objects. In object deconstruction, attributes are deconstructed in no order. In object deconstruction, we need to include our deconstructed properties with {}. In braces, we should write the attributes we want to get from the object. After that, we use the assignment operator = to write the object to the right of it.

** Array deconstruction: ** We can use deconstruction to get the members of an array element. The elements do not need to have the same name. In an array structure, the order of deconstruction is required. In an array structure, we use [] as the tag of the array structure. In [], we write elements in order. If we want to get the second element of the array, but not the first element of the array, we just use a comma (,). Then write the array to be deconstructed to the right of the equals sign.

In array and object deconstruction, we can use the expansion operator or the three-point operator to get the remaining elements/attributes of an array or object

Code examples:

// array destructuring
const [num1, num2] = [5.10];
console.log(num1, num2) // output, 5, 10
const [, num2] = [5.10];
console.log(num2) // output, 10
const [num1, ...other] = [5.10.15];
console.log(num1, other) // output, 5, [10, 15]// object destructuring
cosnt {num1, num2} = {num1:5.num2:10};
console.log(num1, num2) // output, 5, 10
const {num2, num1} = {num1:5.num2:10};
console.log(num2, num1) // output, 10, 5
const {num2} = {num1:5.num2:10};
console.log(num2) // output, 10
const{num1, ... other} = {num1:5.num2:10.num3: 56};
console.log(num1, other) // output, 5, {num2:10, num3: 56}
Copy the code