JavaScript Core: Event Loop & Async

๐Ÿ’ก JavaScript Core: Event Loop & Async โ€” Executive Summary

Technical architectural analysis, practical configuration manifests, and deployment instructions for JavaScript Core: Event Loop & Async.

Grammar

Type
1. Primitive Types

A primitive type represents a single value, and is a data type in which the value itself is stored. Primitive types are immutable, and there are a total of 7 types.

data type Description
string A type representing a string. Represents text data and is enclosed in single quotation marks, double quotation marks, and backticks.
number Represents integer and floating-point numbers. In JavaScript, all types are treated as number, regardless of whether int or float.
bigint A type for expressing very large integer values. It can handle numbers greater than 2^53 - 1. Use n after the number.
boolean Represents the logical value of true or false.
undefined Indicates that a variable has been declared but not assigned a value.
null A type that intentionally expresses no value. typeof null is output as โ€œobjectโ€, but this is an old design bug in JavaScript.
symbol It is a type that creates a unique value and is mainly used as an object property key.
  • implements
javascript
let name = "John";       // string
  let age = 30;            // number
  let isAdult = true;      // boolean
  let largeNumber = 123456789123456789n;  // bigint
  let notDefined;          // undefined
  let emptyValue = null;   // null
  let unique = Symbol();   // symbol
2. Reference Types

Reference types can store complex data structures, storing references to objects. Reference types are mutable.

data type Description
object An object is a collection of key-value pairs. An object is a data type that can group multiple data or functions into one.
array An array is an ordered list of values and is a special form of object. In JavaScript, arrays are treated as objects.
function Functions are considered first-class objects in JavaScript. That is, functions can be stored in variables, passed to other functions, or returned.
  • implements
javascript
let person = { name: "Alice", age: 25 };  // ๊ฐ์ฒด
  let numbers = [1, 2, 3, 4];               // ๋ฐฐ์—ด (๊ฐ์ฒด์˜ ํŠน์ˆ˜ํ•œ ํ˜•ํƒœ)
  function greet() {                        // ํ•จ์ˆ˜ (์ผ๊ธ‰ ๊ฐ์ฒด)
    console.log("Hello!");
  }
3. Special object type

There are also several special object types in JavaScript.

data type Description
null In JavaScript, \*\*null\*\* is a primitive type, but typeof null is returned as "object".
Date A built-in object type for handling dates and times.
RegExp An object type that represents a regular expression.
Map An object that stores key-value pairs; unlike objects, any type can be used as a key.
Set This is a collection type that stores non-duplicate values.
  • implements
javascript
let currentDate = new Date();  // Date ๊ฐ์ฒด
  let regex = /ab+c/i;           // ์ •๊ทœ ํ‘œํ˜„์‹ (RegExp)
  let map = new Map();           // Map ๊ฐ์ฒด
  let set = new Set();           // Set ๊ฐ์ฒด
4. Check type

How to check data type in JavaScript:

  1. typeof operator: Returns the type of most primitive and reference types.
    โ€“ implements
javascript
console.log(typeof "Hello");       // "string"
     console.log(typeof 42);            // "number"
     console.log(typeof true);          // "boolean"
     console.log(typeof undefined);     // "undefined"
     console.log(typeof null);          // "object" (์„ค๊ณ„ ์ƒ์˜ ๋ฒ„๊ทธ)
     console.log(typeof Symbol());      // "symbol"
     console.log(typeof {});            // "object"
     console.log(typeof []);            // "object" (๋ฐฐ์—ด๋„ ๊ฐ์ฒด)
     console.log(typeof function(){});  // "function"
  1. instanceof operator: allows you to check whether an object is an instance of a specific class.
    โ€“ implements
javascript
console.log([] instanceof Array);   // true
     console.log({} instanceof Object);  // true
     console.log(function(){} instanceof Function); // true
Conditional statement
References and Guidelines (NOTE)

Conditional statements are not difficult, so specific details are omitted

  • if statement: Executes only when the condition is true.
  • if...else statement: Executed when the condition is true and false.
  • if...else if...else statement: Evaluates multiple conditions.
  • switch statement: Handles multiple cases for one value.
  • Ternary Operator: Simple condition processing.
  • try...catch statement: Exception handling.
Repeat
1. Basic for statement

The basic for statement is a loop statement that repeats a given number of times. You can set three conditions: Initialization, Conditional expression, Increment expression.

  • abstract
javascript
for (initialization; condition; increment) {
    // ์‹คํ–‰ํ•  ์ฝ”๋“œ
  }
  • implements
javascript
for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4 ์ถœ๋ ฅ
  }
2. for...of statement

for...of is used to iterate over elements in an iterable object (array, string, Map, Set, etc.). Each iteration returns the value of the iterable object.

  • abstract
javascript
for (variable of iterable) {
    // ์‹คํ–‰ํ•  ์ฝ”๋“œ
  }
  • implements
javascript
let arr = ['a', 'b', 'c'];
  for (let element of arr) {
    console.log(element); // 'a', 'b', 'c' ์ถœ๋ ฅ
  }
javascript
let str = "hello";
  for (let char of str) {
    console.log(char); // 'h', 'e', 'l', 'l', 'o' ์ถœ๋ ฅ
  }
3. for...in statement

for...in is used to repeat **properties (keys)** of an object. It can be used on arrays as well as objects, but it iterates over the index rather than the elements of the array, so it is mainly used on objects rather than arrays.

  • abstract
javascript
for (variable in object) {
    // ์‹คํ–‰ํ•  ์ฝ”๋“œ
  }
  • implements
javascript
let person = { name: 'John', age: 30, city: 'New York' };
  for (let key in person) {
    console.log(key, person[key]); // name John, age 30, city New York ์ถœ๋ ฅ
  }
javascript
let arr = [10, 20, 30];
  for (let index in arr) {
    console.log(index, arr[index]); // 0 10, 1 20, 2 30 ์ถœ๋ ฅ
  }
References and Guidelines (NOTE)

Note: Array traversal involves forโ€ฆ It is recommended to use of. forโ€ฆ in returns an index rather than an array element, and may cause unexpected behavior because it iterates over properties (non-numeric keys) added to the array object.

4. while statement

The while statement repeatedly executes a block of code when a given conditional expression is true. Execution continues until the condition becomes false.

  • abstract
javascript
while (condition) {
    // ์‹คํ–‰ํ•  ์ฝ”๋“œ
  }
  • implements
javascript
let i = 0;
  while (i < 5) {
    console.log(i); // 0, 1, 2, 3, 4 ์ถœ๋ ฅ
    i++;
  }
5. do...while statement

do...while is a loop statement that checks the condition after the code is executed at least once. Repeat until the condition is false.

  • abstract
javascript
do {
    // ์‹คํ–‰ํ•  ์ฝ”๋“œ
  } while (condition);
  • implements
javascript
let i = 0;
  do {
    console.log(i); // 0, 1, 2, 3, 4 ์ถœ๋ ฅ
    i++;
  } while (i < 5);
6. forEach Method

forEach is an array-specific iteration method that executes a callback function for each element in the array. It is executed once for each element of a given array, and can access the index and the array itself.

  • abstract
javascript
array.forEach((element, index, array) => {
    // ์‹คํ–‰ํ•  ์ฝ”๋“œ
  });
  • implements
javascript
let arr = [1, 2, 3, 4];
  arr.forEach((value, index) => {
    console.log(`Index: ${index}, Value: ${value}`);
  });
7. map Method

map executes the given callback function for each element of the array and returns a new array as a result. The original array is not modified.

  • abstract
javascript
array.map((element, index, array) => {
    // ์‹คํ–‰ํ•  ์ฝ”๋“œ
  });
  • implements
javascript
let arr = [1, 2, 3];
  let newArr = arr.map(value => value * 2);
  console.log(newArr); // [2, 4, 6]
8. for await...of statement

for await...of is used when iterating over an asynchronous iterable. In an asynchronous function, you can sequentially process the resolved value of a Promise.

  • abstract
javascript
for await (variable of asyncIterable) {
    // ์‹คํ–‰ํ•  ์ฝ”๋“œ
  }
  • implements
javascript
async function processItems(items) {
    for await (let item of items) {
      console.log(item);
    }
  }

  const asyncIterable = {
    [Symbol.asyncIterator]() {
      let i = 0;
      return {
        next() {
          if (i < 3) {
            return Promise.resolve({ value: i++, done: false });
          }
          return Promise.resolve({ done: true });
        }
      };
    }
  };

  processItems(asyncIterable); // 0, 1, 2 ์ถœ๋ ฅ
Operator
1. Arithmetic Operators

Arithmetic operators are used to calculate numeric values.

operator Description example
+ addition 5 + 2 โ†’ 7
- subtraction 5 - 2 โ†’ 3
* multiplication 5 * 2 โ†’ 10
/ division 5 / 2 โ†’ 2.5
% the rest 5 % 2 โ†’ 1
** power 5 ** 2 โ†’ 25
2. Assignment Operators

The assignment operator is used when assigning a value to a variable.

operator Description example
= college entrance x = 5
+= Substitution after addition x += 5 โ†’ x = x + 5
-= Subtraction and then substitution x -= 5 โ†’ x = x - 5
*= Substitution after multiplication x *= 5 โ†’ x = x * 5
/= Substitution after division x /= 5 โ†’ x = x / 5
%= Substitute after remaining calculation x %= 5 โ†’ x = x % 5
**= Assignment after exponentiation x **= 5 โ†’ x = x ** 5
3. Increment and Decrement Operators

The increment/decrement operator increases or decrements the value by 1.

operator Description example
++ Increase by 1 (front/post) x++, ++x
-- Decrease by 1 (pre/post) x--, --x
References and Guidelines (NOTE)

1. Position increase/decrease operator (++x, --x)
โ€“ Increase or decrease the value of the variable first, and then return that value.
โ€“ That is, after changing the value, it returns that value.
2. Postfix increment/decrement operator (x++, x--)
โ€“ Return the current value first and then increase or decrease the variable.
โ€“ That is, return the value first, then change the value.

4. Comparison Operators

Comparison operators compare two values and return true or **false**.

operator Description example
== value is same 5 == '5' โ†’ true
=== Both value and type are the same 5 === '5' โ†’ false
!= Values are different 5 != '5' โ†’ false
!== Value or type is different 5 !== '5' โ†’ true
> Left value is greater than right value 5 > 2 โ†’ true
< Left value is less than right value 5 < 2 โ†’ false
>= Left value is greater than or equal to right value 5 >= 5 โ†’ true
<= Left value is less than or equal to right value 5 <= 4 โ†’ false
5. Logical Operators

Logical operators combine logical values and return a result.

operator Description example
&& Logical AND (true when both conditions are true) true && false โ†’ false
|| logical OR true || false โ†’ true
! Logical NOT (reverse logical value) !true โ†’ false
6. Ternary Operator

The ternary operator is an operator that can create short conditional statements. If the condition is true, it returns the first value, and if it is false, it returns the second value.

operator Description example
condition ? expr1 : expr2 expr1 if the condition is true, expr2 if the condition is false x > 5 ? 'big' : 'small'
7. Bitwise Operators

Bit operators perform bit-by-bit operations on 32-bit numbers.

operator Description example
& bitwise AND 5 & 1 โ†’ 1
| bit OR 5 | 1 โ†’ 5
^ bitwise 5 ^ 1 โ†’ 4
~ bit NOT ~5 โ†’ -6
<< Shift left 5 << 1 โ†’ 10
>> Shift right 5 >> 1 โ†’ 2
>>> unsigned shift right 5 >>> 1 โ†’ 2
8. Type Operators

Type operators are used to check or manipulate the type of a variable or expression.

operator Description example
typeof Return data type typeof 42 โ†’ "number"
instanceof Determine if an object is an instance of a specific class arr instanceof Array
new Create object new Date()
delete Deleting an object’s properties delete obj.key
void Does not return the value of an expression void (0)
9. Comma Operator

The comma operator is used to evaluate multiple expressions into one expression. The last expression is returned.

operator Description example
, List multiple expressions and return the last value let x = (1, 2, 3); โ†’ x = 3
10. String Concatenation Operator

The concatenation operator is used to concatenate strings.

operator Description example
+ string concatenation 'Hello ' + 'World!' โ†’ 'Hello World!'
11. Nullish Coalescing Operator

The ?? operator returns the first operand that is not **null or undefined**.

operator Description example
?? Return default value only when null or undefined null ?? 'default' โ†’ 'default'
12. Optional Chaining Operator

The optional chaining operator ?. returns undefined without generating an error if null or undefined.

operator Description example
?. Handling null or undefined when accessing object properties obj?.prop
13. Spread Operator

The spread operator ... is used to expand an iterable (array, string, etc.)** into individual elements, and is also useful for copying and merging of objects or arrays.

operator Description example
... Expanding an array or object into individual elements [...arr], {...obj}, func(...args)
  • Implements
javascript
let arr = [1, 2, 3];
  let newArr = [...arr, 4, 5]; // [1, 2, 3, 4, 5]

  let obj = {a: 1, b: 2};
  let newObj = {...obj, c: 3}; // {a: 1, b: 2, c: 3}
14. Rest Operator

The Rest operator is also used as ..., and is used when receiving the remaining arguments as an array in function parameters. It operates in the opposite way to the expansion operator.

operator Description example
... Receiving the remaining parameters as an array function(...args)
  • Implements
javascript
function sum(...numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
  }

  console.log(sum(1, 2, 3)); // 6
15. Pipeline Operator

Pipeline operators are operators that are currently in the proposal phase. Pipeline operators allow you to process data sequentially by connecting functions in a chaining manner.

operator Description example
|> Pass the result to the next function expression |> function
  • Not Implements
javascript
let result = double(square(increment(3))); // 3์„ 1 ์ฆ๊ฐ€ -> ์ œ๊ณฑ -> ๋‘ ๋ฐฐ๋กœ
  console.log(result); // 32
  • Implements
javascript
let result = 3
    |> increment
    |> square
    |> double;

  console.log(result); // 32
16. Logical Assignment Operators

These operators are a combination of logical operators and assignment operators, and process assignment and logical operations at once.

References and Guidelines (NOTE)

Falsy Values: false, null, undefined, 0, NaN, '', etc.

operator Description example
&&= Falsy values are not assigned x &&= y
||= Only false values are assigned x ||= y
??= Assign value only when null or undefined x ??= y
  • Implements
javascript
let x = false;
  x ||= true; // x๊ฐ€ ๊ฑฐ์ง“์ผ ๋•Œ true ํ• ๋‹น (๊ฒฐ๊ณผ: true)

  let y = null;
  y ??= 5; // y๊ฐ€ null ๋˜๋Š” undefined์ผ ๋•Œ 5 ํ• ๋‹น (๊ฒฐ๊ณผ: 5)

Features

Number formatting
javascript
// ๋กœ์ผ€์ผ ์‚ฌ์šฉ
Number('1000').toLocaleString('ko-KR'); // '1,000'

// ์ •๊ทœ์‹ ์‚ฌ์šฉ
'1000'.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); // '1,000'
Sort
javascript
/**
Array.sort :
	return 0: ๋ณ€๊ฒฝ์—†์Œ
	return -1: ๋น„๊ต๋Œ€์ƒ์ค‘ a๋ฅผ ์šฐ์„ 
	return 1: ๋น„๊ต๋Œ€์ƒ์ค‘ b๋ฅผ ์šฐ์„ 
*/


/*** ๋‹ค์ค‘์กฐ๊ฑด ์ •๋ ฌ Examples */
/** ์ •๋ ฌ ์ˆ˜ํ–‰ : ์ง€์—ฐ์ผ DESC */
objectList.sort((a, b) => {
    if (a.delayedDays > b.delayedDays) return -1;
    return 0;
});
/** ์ •๋ ฌ ์ˆ˜ํ–‰ : ์ž‘์—…์ž ๋ฏธ์ง€์ • ์šฐ์„  */
objectList.sort((a, b) => {
    if (a.delayedDays >= b.delayedDays && a.workerNm === "") return -1;
    return 0;
});
/** ์ •๋ ฌ ์ˆ˜ํ–‰ : ๋“ฑ๋ก์ผ DESC */
objectList.sort((a, b) => {
    //๋น„๊ต๋Œ€์ƒ ๋ชจ๋‘ workerNm์ด ์—†๋Š” ๊ฒฝ์šฐ
    if (a.delayedDays >= b.delayedDays && a.workerNm === "" && b.workerNm === "" && a.createDt > b.createDt) return -1;
    //๋น„๊ต๋Œ€์ƒ ๋ชจ๋‘ workerNm์ด ์žˆ๋Š” ๊ฒฝ์šฐ
    if (a.delayedDays >= b.delayedDays && a.workerNm !== "" && b.workerNm !== "" && a.createDt > b.createDt) return -1;
    return 0;
});

Tools

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *