본 가이드는 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
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
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
let currentDate = new Date(); // Date 객체
let regex = /ab+c/i; // 정규 표현식 (RegExp)
let map = new Map(); // Map 객체
let set = new Set(); // Set 객체
4. 타입 확인
자바스크립트에서 데이터 타입을 확인할 수 있는 방법:
typeof연산자: 대부분의 원시 타입과 참조 타입의 타입을 반환합니다.
– implements
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"
instanceof연산자: 객체가 특정 클래스의 인스턴스인지 확인할 수 있습니다.
– implements
console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log(function(){} instanceof Function); // true
조건문
조건문은 어렵지 않으므로 구체적인 사항은 생략
if문: 조건이 참일 때만 실행.if...else문: 조건이 참일 때와 거짓일 때 각각 실행.if...else if...else문: 여러 조건을 평가.switch문: 하나의 값에 대한 여러 경우를 처리.- 삼항 연산자 (Ternary Operator): 간단한조건 처리.
try...catch문: 예외 처리.
반복문
1. 기본 for 문
기본적인 for 문은 주어진 횟수만큼 반복하는 반복문입니다. 세 가지 조건을 설정할 수 있습니다: 초기화, 조건식, 증감식.
- abstract
for (initialization; condition; increment) {
// 실행할 코드
}
- implements
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4 출력
}
2. for...of 문
for...of는 이터러블 객체(배열, 문자열, Map, Set 등)에서 요소들을 반복할 때 사용됩니다. 각 반복에서는 이터러블 객체의 값을 반환합니다.
- abstract
for (variable of iterable) {
// 실행할 코드
}
- implements
let arr = ['a', 'b', 'c'];
for (let element of arr) {
console.log(element); // 'a', 'b', 'c' 출력
}
let str = "hello";
for (let char of str) {
console.log(char); // 'h', 'e', 'l', 'l', 'o' 출력
}
3. for...in 문
for...in은 객체의 **속성(키)**을 반복할 때 사용됩니다. 객체뿐만 아니라 배열에서도 사용할 수 있지만, 배열의 요소가 아닌 인덱스를 순회하므로, 배열보다는 객체에 주로 사용됩니다.
- abstract
for (variable in object) {
// 실행할 코드
}
- implements
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 출력
}
let arr = [10, 20, 30];
for (let index in arr) {
console.log(index, arr[index]); // 0 10, 1 20, 2 30 출력
}
주의: 배열의 순회에는 for…of를 사용하는 것이 권장됩니다. for…in은 배열 요소보다는 인덱스를 반환하며, 배열 객체에 추가된 프로퍼티(비숫자 키)까지 순회하기 때문에 예기치 않은 동작을 초래할 수 있습니다.
4. while 문
while 문은 주어진 조건식이 참일 때 코드 블록을 반복 실행합니다. 조건이 거짓이 될 때까지 계속 실행됩니다.
- abstract
while (condition) {
// 실행할 코드
}
- implements
let i = 0;
while (i < 5) {
console.log(i); // 0, 1, 2, 3, 4 출력
i++;
}
5. do...while 문
do...while은 최소 한 번은 코드가 실행되고 나서 조건을 확인하는 반복문입니다. 조건이 거짓일 때까지 반복합니다.
- abstract
do {
// 실행할 코드
} while (condition);
- implements
let i = 0;
do {
console.log(i); // 0, 1, 2, 3, 4 출력
i++;
} while (i < 5);
6. forEach 메서드
forEach는 배열에서 각 요소에 대해 콜백 함수를 실행하는 배열 전용 반복 메서드입니다. 주어진 배열의 각 요소에 대해 한 번씩 실행되며, 인덱스 및 배열 자체에 접근할 수 있습니다.
- abstract
array.forEach((element, index, array) => {
// 실행할 코드
});
- implements
let arr = [1, 2, 3, 4];
arr.forEach((value, index) => {
console.log(`Index: ${index}, Value: ${value}`);
});
7. map 메서드
map은 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 그 결과로 새로운 배열을 반환합니다. 원본 배열은 수정되지 않습니다.
- abstract
array.map((element, index, array) => {
// 실행할 코드
});
- implements
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
for await (variable of asyncIterable) {
// 실행할 코드
}
- implements
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
|
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
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
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
let result = double(square(increment(3))); // 3을 1 증가 -> 제곱 -> 두 배로
console.log(result); // 32
- Implements
let result = 3
|> increment
|> square
|> double;
console.log(result); // 32
16. 선택적 할당 연산자 (Logical Assignment Operators)
이 연산자들은 논리 연산자와 대입 연산자를 결합한 형태로, 할당과 논리 연산을 한 번에 처리합니다.
Falsy 값: false, null, undefined, 0, NaN, '' 등
| 연산자 | 설명 | 예시 |
&&=
|
Falsy값은 할당이 이루어지지 않음 |
x &&= y
|
||=
|
Falsy값만 할당이 이루어짐 |
x ||= y
|
??=
|
null 또는 undefined일 때만 값 할당 |
x ??= y
|
- Implements
let x = false;
x ||= true; // x가 거짓일 때 true 할당 (결과: true)
let y = null;
y ??= 5; // y가 null 또는 undefined일 때 5 할당 (결과: 5)
Features
Number formatting
// 로케일 사용
Number('1000').toLocaleString('ko-KR'); // '1,000'
// 정규식 사용
'1000'.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); // '1,000'
Sort
/**
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
Leave a Reply