꼭 알아야될 10가지 JavaScript 기본 컨셉

 

1. Arrow Function

1. Traditional functions have ‘this’ keyword but arrow functions have no ‘this’ keyword.
2. Traditional functions have ‘arguments’ keywords but arrow functions have no ‘arguments’ keywords.
3. Traditional functions can use as ‘constructors’ but arrow functions can not use as ‘constructors’.

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

2. Default parameters

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

3. IIFE Function

IIFE full meaning — Immediately Invoked Function Expression

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

4. Spread operator

Spread operator(…) or three dots are the es6 Features. You can concat array, object, and string by using the spread operator. It is used for array expression or string to be expanded or an object expression to be expanded in places. You can copy all the elements of an array, all the properties of an object, and all iterable of the string.

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'}

5. isNaN() Method

isNaN() Method returns true if the argument is NaN, Otherwise it returns false.

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

JavaScript has two types of data types. Primitive and Reference or Objects and Functions.

6. Primitive Values

There are 7 Primitive data types. They are___

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

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

7. Reference or Objects and Functions

Without primitive data types, javaScript’s other data types are reference data types. They are ____

1. Object
2. Function

Arrays, regular expressions, and dates are the Object type.

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"

8. Double Equal(==) vs Triple Equal (===)

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

9. Ternary Operator

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

10. Destructuring

There are two Destructuring, Array and Object.

Object Destructuring: We can destructure object properties in variable and the variable name and property name should be the same. We can destructure any properties in an object. In object Destructuring, we should not maintain any order which property was first or last or any position. In object destructuring, we should declare a variable with curly braces { }. In curly braces, we should write those properties that we want to destructure from an object. Then we should use the assignment operator = and on the right side, we use that object.

Array Destructuring: We can destructure array elements in variable and the variable name and the element don't need to be the same name. In array destructuring, we should maintain the order which element was first or last or any position. In array destructuring, we should declare a variable with an array symbol[]. In the array symbol, we should write elements by an order which element was first or last or any position. If we want the second element and don’t want the first element we can use only a comma. Then we should use the assignment operator = and on the right side, we use that array.

** In Array and object destructuring we can use a spread operator or three dots to destructuring another array of elements in an array variable and another object properties in an object variable.

10. Destructuring

There are two Destructuring, Array and Object.

Object Destructuring: We can destructure object properties in variable and the variable name and property name should be the same. We can destructure any properties in an object. In object Destructuring, we should not maintain any order which property was first or last or any position. In object destructuring, we should declare a variable with curly braces . In curly braces, we should write those properties that we want to destructure from an object. Then we should use the assignment operator and on the right side, we use that object.{ }=

Array Destructuring: We can destructure array elements in variable and the variable name and the element don't need to be the same name. In array destructuring, we should maintain the order which element was first or last or any position. In array destructuring, we should declare a variable with an array symbol. In the array symbol, we should write elements by an order which element was first or last or any position. If we want the second element and don’t want the first element we can use only a comma. Then we should use the assignment operator and on the right side, we use that array.[]=

** In Array and object destructuring we can use a spread operator or three dots to destructuring another array of elements in an array variable and another object properties in an object variable.

// 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}