자바스크립트 핵심 원리: 이벤트 루프와 비동기 프로그래밍

💡 핵심 요약 (Executive Summary)

본 가이드는 javaScript 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다.

📑 Table of Contents

문법

타입
1. 원시 타입 (Primitive Types)

원시 타입은 단일 값을 나타내며, 값 자체가 저장되는 데이터 타입입니다. 원시 타입은 변경 불가능(immutable)하며, 총 7가지가 있습니다.

데이터 타입 설명
string 문자열을 나타내는 타입. 텍스트 데이터를 표현하며, 작은따옴표, 큰따옴표, 백틱으로 묶습니다.
number 정수 및 부동소수점 숫자를 나타냅니다. JavaScript에는 int나 float 구분 없이 모두 number 타입으로 처리됩니다.
bigint 매우 큰 정수값을 표현하기 위한 타입. 2^53 - 1 이상의 숫자를 처리할 수 있습니다. n을 숫자 뒤에 붙여서 사용합니다.
boolean true 또는 false의 논리적 값을 나타냅니다.
undefined 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다.
null 의도적으로 값이 없음을 표현하는 타입. typeof null은 “object”로 출력되지만, 이것은 자바스크립트의 오래된 설계상의 버그입니다.
symbol 유일무이한 값을 생성하는 타입으로, 객체의 속성 키로 주로 사용됩니다.
  • 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)

참조 타입은 복잡한 데이터 구조를 저장할 수 있으며, 객체의 참조를 저장합니다. 참조 타입은 가변적(mutable)입니다.

데이터 타입 설명
object 객체는 키-값 쌍의 컬렉션입니다. 객체는 여러 데이터 또는 함수를 하나로 묶을 수 있는 데이터 타입입니다.
array 배열은 값들의 순서가 있는 리스트로, 객체의 특수한 형태입니다. 자바스크립트에서 배열은 객체로 처리됩니다.
function 함수는 자바스크립트에서 일급 객체로 간주됩니다. 즉, 함수는 변수에 저장될 수 있고, 다른 함수에 전달되거나 반환될 수 있습니다.
  • implements
javascript
let person = { name: "Alice", age: 25 };  // 객체
  let numbers = [1, 2, 3, 4];               // 배열 (객체의 특수한 형태)
  function greet() {                        // 함수 (일급 객체)
    console.log("Hello!");
  }
3. 특수 객체 타입

자바스크립트에는 몇 가지 특수한 객체 타입도 존재합니다.

데이터 타입 설명
null 자바스크립트에서 \*\*null\*\*은 원시 타입이지만, typeof null은 "object"로 반환됩니다.
Date 날짜와 시간을 처리하기 위한 내장 객체 타입입니다.
RegExp 정규 표현식을 나타내는 객체 타입입니다.
Map 키-값 쌍을 저장하는 객체로, 객체와 달리 키로 모든 타입을 사용할 수 있습니다.
Set 중복되지 않는 값을 저장하는 컬렉션 타입입니다.
  • implements
javascript
let currentDate = new Date();  // Date 객체
  let regex = /ab+c/i;           // 정규 표현식 (RegExp)
  let map = new Map();           // Map 객체
  let set = new Set();           // Set 객체
4. 타입 확인

자바스크립트에서 데이터 타입을 확인할 수 있는 방법:

  1. typeof 연산자: 대부분의 원시 타입과 참조 타입의 타입을 반환합니다.
    – 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 연산자: 객체가 특정 클래스의 인스턴스인지 확인할 수 있습니다.
    – implements
javascript
console.log([] instanceof Array);   // true
     console.log({} instanceof Object);  // true
     console.log(function(){} instanceof Function); // true
조건문
Reference & Guidelines (NOTE)

조건문은 어렵지 않으므로 구체적인 사항은 생략

  • if 문: 조건이 참일 때만 실행.
  • if...else 문: 조건이 참일 때와 거짓일 때 각각 실행.
  • if...else if...else 문: 여러 조건을 평가.
  • switch 문: 하나의 값에 대한 여러 경우를 처리.
  • 삼항 연산자 (Ternary Operator): 간단한조건 처리.
  • try...catch 문: 예외 처리.
반복문
1. 기본 for 문

기본적인 for 문은 주어진 횟수만큼 반복하는 반복문입니다. 세 가지 조건을 설정할 수 있습니다: 초기화, 조건식, 증감식.

  • 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 문

for...of는 이터러블 객체(배열, 문자열, Map, Set 등)에서 요소들을 반복할 때 사용됩니다. 각 반복에서는 이터러블 객체의 값을 반환합니다.

  • 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 문

for...in은 객체의 **속성(키)**을 반복할 때 사용됩니다. 객체뿐만 아니라 배열에서도 사용할 수 있지만, 배열의 요소가 아닌 인덱스를 순회하므로, 배열보다는 객체에 주로 사용됩니다.

  • 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 출력
  }
Reference & Guidelines (NOTE)

주의: 배열의 순회에는 for…of를 사용하는 것이 권장됩니다. for…in은 배열 요소보다는 인덱스를 반환하며, 배열 객체에 추가된 프로퍼티(비숫자 키)까지 순회하기 때문에 예기치 않은 동작을 초래할 수 있습니다.

4. while 문

while 문은 주어진 조건식이 참일 때 코드 블록을 반복 실행합니다. 조건이 거짓이 될 때까지 계속 실행됩니다.

  • abstract
javascript
while (condition) {
    // 실행할 코드
  }
  • implements
javascript
let i = 0;
  while (i < 5) {
    console.log(i); // 0, 1, 2, 3, 4 출력
    i++;
  }
5. do...while 문

do...while은 최소 한 번은 코드가 실행되고 나서 조건을 확인하는 반복문입니다. 조건이 거짓일 때까지 반복합니다.

  • 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 메서드

forEach는 배열에서 각 요소에 대해 콜백 함수를 실행하는 배열 전용 반복 메서드입니다. 주어진 배열의 각 요소에 대해 한 번씩 실행되며, 인덱스 및 배열 자체에 접근할 수 있습니다.

  • 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 메서드

map은 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 그 결과로 새로운 배열을 반환합니다. 원본 배열은 수정되지 않습니다.

  • 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 문

for await...of는 비동기 이터러블을 순회할 때 사용됩니다. 비동기 함수에서 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 출력
연산자
1. 산술 연산자 (Arithmetic Operators)

산술 연산자는 숫자 값을 계산하는 데 사용됩니다.

연산자 설명 예시
+ 덧셈 5 + 2 → 7
- 뺄셈 5 - 2 → 3
* 곱셈 5 * 2 → 10
/ 나눗셈 5 / 2 → 2.5
% 나머지 5 % 2 → 1
** 거듭제곱 5 ** 2 → 25
2. 대입 연산자 (Assignment Operators)

대입 연산자는 변수에 값을 할당할 때 사용됩니다.

연산자 설명 예시
= 대입 x = 5
+= 덧셈 후 대입 x += 5 → x = x + 5
-= 뺄셈 후 대입 x -= 5 → x = x - 5
*= 곱셈 후 대입 x *= 5 → x = x * 5
/= 나눗셈 후 대입 x /= 5 → x = x / 5
%= 나머지 연산 후 대입 x %= 5 → x = x % 5
**= 거듭제곱 후 대입 x **= 5 → x = x ** 5
3. 증감 연산자 (Increment and Decrement Operators)

증감 연산자는 값을 1만큼 증가 또는 감소시킵니다.

연산자 설명 예시
++ 1 증가 (전위/후위) x++, ++x
-- 1 감소 (전위/후위) x--, --x
Reference & Guidelines (NOTE)

1. 전위 증감 연산자 (++x, --x)
– 변수의 값을 먼저 증가 또는 감소시키고, 그 다음에 해당 값을 반환합니다.
– 즉, 값을 변경한 후 그 값을 반환합니다.
2. 후위 증감 연산자 (x++, x--)
– 현재 값을 먼저 반환한 후에 변수를 증가 또는 감소시킵니다.
– 즉, 값을 먼저 반환하고, 그 다음에 값을 변경합니다.

4. 비교 연산자 (Comparison Operators)

비교 연산자는 두 값을 비교하여 참(true) 또는 **거짓(false)**을 반환합니다.

연산자 설명 예시
== 값이 같음 5 == '5' → true
=== 값과 타입이 모두 같음 5 === '5' → false
!= 값이 다름 5 != '5' → false
!== 값 또는 타입이 다름 5 !== '5' → true
> 왼쪽 값이 오른쪽 값보다 큼 5 > 2 → true
< 왼쪽 값이 오른쪽 값보다 작음 5 < 2 → false
>= 왼쪽 값이 오른쪽 값보다 크거나 같음 5 >= 5 → true
<= 왼쪽 값이 오른쪽 값보다 작거나 같음 5 <= 4 → false
5. 논리 연산자 (Logical Operators)

논리 연산자는 논리값을 조합하여 결과를 반환합니다.

연산자 설명 예시
&& 논리 AND (두 조건이 모두 참일 때 참) true && false → false
|| 논리 OR true || false → true
! 논리 NOT (논리값을 반대로) !true → false
6. 삼항 연산자 (Ternary Operator)

삼항 연산자는 짧은 조건문을 만들 수 있는 연산자입니다. 조건이 참이면 첫 번째 값을, 거짓이면 두 번째 값을 반환합니다.

연산자 설명 예시
condition ? expr1 : expr2 조건이 참이면 expr1, 거짓이면 expr2 x > 5 ? 'big' : 'small'
7. 비트 연산자 (Bitwise Operators)

비트 연산자는 32비트 숫자의 비트 단위로 연산을 수행합니다.

연산자 설명 예시
& 비트 AND 5 & 1 → 1
| 비트 OR 5 | 1 → 5
^ 비트 XOR 5 ^ 1 → 4
~ 비트 NOT ~5 → -6
<< 왼쪽으로 비트 이동 (shift left) 5 << 1 → 10
>> 오른쪽으로 비트 이동 (shift right) 5 >> 1 → 2
>>> 부호 없는 오른쪽 비트 이동 (unsigned shift right) 5 >>> 1 → 2
8. 타입 연산자 (Type Operators)

타입 연산자는 변수나 표현식의 타입을 확인하거나 조작하는 데 사용됩니다.

연산자 설명 예시
typeof 데이터 타입 반환 typeof 42 → "number"
instanceof 객체가 특정 클래스의 인스턴스인지 확인 arr instanceof Array
new 객체 생성 new Date()
delete 객체의 속성 삭제 delete obj.key
void 표현식의 값을 반환하지 않음 void (0)
9. 쉼표 연산자 (Comma Operator)

쉼표 연산자는 여러 표현식을 하나의 표현식으로 평가할 때 사용합니다. 마지막 표현식이 반환됩니다.

연산자 설명 예시
, 여러 표현식을 나열하고 마지막 값을 반환 let x = (1, 2, 3); → x = 3
10. 연결 연산자 (String Concatenation Operator)

연결 연산자는 문자열을 연결하는 데 사용됩니다.

연산자 설명 예시
+ 문자열 연결 'Hello ' + 'World!' → 'Hello World!'
11. Nullish 병합 연산자 (Nullish Coalescing Operator)

?? 연산자는 **null 또는 undefined**가 아닌 첫 번째 피연산자를 반환합니다.

연산자 설명 예시
?? null 또는 undefined일 때만 기본값 반환 null ?? 'default' → 'default'
12. 옵셔널 체이닝 연산자 (Optional Chaining Operator)

옵셔널 체이닝 연산자 ?.는 null 또는 undefined인 경우 에러를 발생시키지 않고 undefined를 반환합니다.

연산자 설명 예시
?. 객체 속성 접근 시 null 또는 undefined 처리 obj?.prop
13. 전개 연산자 (Spread Operator)

전개 연산자 ...는 **이터러블(배열, 문자열 등)**을 개별 요소로 확장할 때 사용되며, 객체나 배열의 복사 및 병합에도 유용하게 사용됩니다.

연산자 설명 예시
... 배열이나 객체를 개별 요소로 확장 [...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 연산자 (Rest Operator)

Rest 연산자도 ...로 사용되며, 함수 파라미터에서 나머지 인자들을 배열로 받을 때 사용됩니다. 전개 연산자와는 반대 개념으로 동작합니다.

연산자 설명 예시
... 나머지 파라미터를 배열로 받음 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)

파이프라인 연산자는 현재 제안 단계에 있는 연산자입니다. 파이프라인 연산자는 함수를 체이닝 방식으로 연결하여 순차적으로 데이터를 처리할 수 있게 합니다.

연산자 설명 예시
|> 결과를 다음 함수에 전달 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)

이 연산자들은 논리 연산자와 대입 연산자를 결합한 형태로, 할당과 논리 연산을 한 번에 처리합니다.

Reference & Guidelines (NOTE)

Falsy 값: false, null, undefined, 0, NaN, '' 등

연산자 설명 예시
&&= Falsy값은 할당이 이루어지지 않음 x &&= y
||= Falsy값만 할당이 이루어짐 x ||= y
??= null 또는 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 *