04.1 빌트인 데이터 타입

자바스크립트의 빌트인 데이터 타입은 언어 자체에서 제공하는게 두가지다.

원시 타입 (primitive type)
참조 타입 (reference type)

04.2 참조타입

🔹 원시 타입 vs 참조 타입

JS의 데이터 타입은 크게 두 가지로 나뉨:

원시 타입 (Primitive Type)
- 값 자체를 메모리에 저장함.
- 변수에 값을 직접 할당함.
- number, string, boolean, undefined, null, symbol, bigint
참조 타입 (Reference Type)
- 메모리 주소를 저장하고, 실제 데이터는 **Heap(힙 메모리)**에 저장됨.
- 변수가 값을 직접 저장하는 게 아니라, **메모리 주소(참조값)**를 저장함.
- object, array, function, date, map, set

타입이 어떤 거냐면

number

부동 소수점이란(Floating ponint)

👉 컴퓨터가 실수를 표현하는 방식

👉 **"고정된 자리수를 쓰는 정수 표현"**과 달리, 소수점이

"떠다닐(floating)" 수 있는 숫자 표현 방식

숫자에서 엡실론이란

Number.EPSILON

JS에서 표현할 수 있는 두 숫자 간 가장 작은 차이임.

👉 이걸 활용하면 부동소수점 오차를 방지할 수 있음!

🔹 왜 부동소수점이 필요할까?

컴퓨터는 0과 1(이진수)로 모든 숫자를 표현해야 하는데,

소수를 정확하게 저장할 수 있는 완벽한 방법이 없음.

그래서 IEEE 754 부동소수점 표준이라는 방식을 사용함.

🎯 이제 Number.EPSILON이 등장할 차례!

*Number.EPSILON*은 JS에서 표현할 수 있는 두 숫자 간 가장 작은 차이임.

👉 이걸 활용하면 부동소수점 오차를 방지할 수 있음!

🔹 Number.EPSILON의 역할

console.log(Number.EPSILON); // 2.220446049250313e-16

✅ 0.1 + 0.2의 연산을 비교할 때 Number.EPSILON을 활용하면 정확한 비교 가능!

function isEqual(a, b) {
  return Math.abs(a - b) < Number.EPSILON;
}

console.log(isEqual(0.1 + 0.2, 0.3)); // true 🎉

🔥 최종 요약

개념 설명

부동소수점 (Floating Point)	컴퓨터가 실수를 표현하는 방식 (IEEE 754 표준)
부동소수점 문제	0.1 + 0.2 !== 0.3 같은 오차 발생
Number.EPSILON	가장 작은 소수 차이를 나타내는 값 (2.220446049250313e-16)
해결 방법	Math.abs(a - b) < Number.EPSILON으로 비교

부동소수점(Floating Point)
- *이진법(0과 1)**으로 소수를 표현하는 방식
- 소수점 위치를 유동적으로 조절해서 표현
- 완벽한 표현이 불가능한 경우가 많음 → 0.1 + 0.2 !== 0.3 같은 오류 발생
Number.EPSILON(앱실론)
- 부동소수점 연산의 오차를 보완하는 방법 중 하나
- JS에서 표현할 수 있는 가장 작은 차이값 (2.220446049250313e-16)
- 소수 계산 비교 시 오차를 줄이는 역할
- 하지만 "부동소수점을 보완한 방법"이라기보단, 오차를 감안해서 비교할 수 있도록 만든 보조 수단
❌ 앱실론 없이 비교하면?✅ 앱실론을 사용하면?
- Math.abs(a - b) < Number.EPSILON → 두 숫자의 차이가 너무 작으면 같은 것으로 간주!
- 정확한 반올림이 아니라, 오차를 감안한 비교를 위한 것!
function isEqual(a, b) { return Math.abs(a - b) < Number.EPSILON; } console.log(isEqual(0.1 + 0.2, 0.3)); // true 🎉
console.log(0.1 + 0.2 === 0.3); // false (부동소수점 오차 때문에 틀림!)

정리

부동소수점으로 인한 오차가 있고 그 오차가 적으면 맞다고 해주는게 앱실론이다.

string

JS는 C++이나 자바와 다르게 글자 하나만 저장하는 자료형이 따로 없다.

글자와 관련된 모든 자료는 문자열 타입으로 저장된다.

문자열을 지정하는 방법은 세가지로 작은따옴표(') , 큰따옴표 (") , 백틱 ``` 으로 감싸는 방법이 있다.

const c = `1 + 2 = ${a+b}` // 1 + 2 = 3 백틱예시

문자열 타입 연산

let a = "Heelo, ";
let b = "World!" ;
console.log(a + b); // 문자열끼리 더하기, "Hello World!"
console.log(a + 126); // 문자열과 숫자 더하기 , "Hello,126"
console.log(a + true) // 문자열과 불리언 더하기, "Hello true"

📝 문자열 빌트인 메서드 정리

메서드 설명 예제 결과

.length	문자열 길이 반환	"Hello, World!".length	13
.split(separator)	특정 구분자로 문자열 나누기 (배열 반환)	"Hello, World!".split(",")	["Hello", " World!"]
.startsWith(prefix)	특정 문자열로 시작하는지 확인	"Hello, World!".startsWith("Hello")	true
.endsWith(suffix)	특정 문자열로 끝나는지 확인	"Hello, World!".endsWith("World!")	true
.includes(substring)	특정 문자열 포함 여부 확인	"Hello, World!".includes("llo, ")	true
.indexOf(substring)	특정 문자열이 처음 등장하는 위치 반환	"Hello, World!".indexOf("World")	7
.lastIndexOf(substring)	특정 문자열이 마지막으로 등장하는 위치 반환	"Hello, World!".lastIndexOf("o")	8
.replace(old, new)	특정 문자열을 다른 문자열로 대체	"Hello, World!".replace("World", "JavaScript")	"Hello, JavaScript!"
.toUpperCase()	모든 문자를 대문자로 변환	"Hello, World!".toUpperCase()	"HELLO, WORLD!"
.toLowerCase()	모든 문자를 소문자로 변환	"Hello, World!".toLowerCase()	"hello, world!"
.trim()	문자열 양쪽 공백 제거	" Hello, World! ".trim()	"Hello, World!"
.concat(string)	문자열 연결	"Hello".concat(", World!")	"Hello, World!"

🔥 추가 꿀팁

1️⃣ trim()의 변형

.trimStart() → 앞쪽 공백만 제거
.trimEnd() → 뒤쪽 공백만 제거

let str = "   JavaScript   ";
console.log(str.trimStart()); // "JavaScript   "
console.log(str.trimEnd());   // "   JavaScript"

2️⃣ replaceAll() (ES2021)

replace()는 첫 번째 일치하는 문자열만 변경하지만,
replaceAll()은 모든 일치하는 문자열을 변경함!

let text = "apple banana apple";
console.log(text.replace("apple", "orange"));  // "orange banana apple"
console.log(text.replaceAll("apple", "orange")); // "orange banana orange"

🎯 최종 정리

✅ length → 문자열 길

✅ split() → 특정 문자 기준으로 나누기

✅ startsWith() / endsWith() → 특정 문자로 시작/끝 확인

✅ includes() → 특정 문자열 포함 여부 확인

✅ indexOf() / lastIndexOf() → 문자열 위치 찾기

✅ replace() / replaceAll() → 특정 문자열 치환

✅ toUpperCase() / toLowerCase() → 대소문자 변환

✅ trim() → 양쪽 공백 제거

✅ concat() → 문자열 연결

그 외 타입

1. Boolean (불리언)

👉 true 또는 false 값만 가질 수 있는 논리 타입

👉 조건문, 비교 연산 등에 많이 사용됨

✅ 예제

let isDev = true;
let isNight = false;

console.log(typeof isDev); // "boolean"
console.log(10 > 5); // true
console.log(3 === 4); // false

true → 참 (예: "개발자다")
false → 거짓 (예: "밤이 아니다")

2. BigInt (빅인트)

👉 일반적인 Number 타입보다 큰 정수를 표현하는 타입

👉 n을 붙여서 사용해야 함

👉 2⁵³ - 1 (9007199254740991) 이상의 숫자를 다룰 때 필요

✅ 예제

javascript
복사편집
let bigNumber = 1234567890123456789012345678901234567890n;
console.log(typeof bigNumber); // "bigint"

// 일반 숫자(Number)와는 연산이 불가능함!
let num = 10;
// console.log(bigNumber + num); // ❌ 에러 발생!

// 같은 BigInt 타입끼리만 연산 가능
console.log(bigNumber + 100n); // 정상 작동

📌 BigInt 특징

n을 붙여야 BigInt 타입이 됨 (123n)
Number와 연산할 수 없음 (둘 다 BigInt여야 함)
Math 객체와 함께 사용할 수 없음 (Math.sqrt(100n) ❌)

3. Null (널)

👉 "값이 없음"을 나타내는 값

👉 명확하게 "비어있음"을 의도적으로 표현할 때 사용

👉 typeof가 "object"인 건 JS의 역사적인 버그 🤯

✅ 예제

let emptyValue = null;
console.log(typeof emptyValue); // "object" (버그지만 고쳐지지 않음)
console.log(emptyValue); // null

📌 null 특징

변수에 의도적으로 "값이 없음"을 나타낼 때 사용
객체(Object) 같은 것의 초기 상태를 표현할 때 사용
typeof로 확인하면 "object"가 나옴 (JS의 오래된 버그 😅)

4. Undefined (언디파인드)

👉 변수가 선언만 되고 값이 할당되지 않았을 때의 기본값

👉 "아직 값이 정해지지 않음"을 의미

✅ 예제

let notAssigned;
console.log(notAssigned); // undefined
console.log(typeof notAssigned); // "undefined"

📌 undefined 특징

변수를 선언했지만 값을 할당하지 않으면 자동으로 undefined가 됨.
함수에서 아무 값도 return하지 않으면 undefined 반환됨
function hello() {} console.log(hello()); // undefined
객체에 존재하지 않는 속성을 읽으면 undefined
let obj = {}; console.log(obj.name); // undefined

🔥 최종 정리

타입 설명 예제

Boolean	true 또는 false	let isReady = true;
BigInt	매우 큰 정수를 표현	let big = 1000000000000n;
Null	의도적으로 "없음"을 표현	let empty = null;
Undefined	값이 정의되지 않음	let notSet; // undefined

✅ boolean → 참(true) / 거짓(false)

✅ bigint → 큰 정수 (123n)

✅ null → 값이 없음을 의도적으로 표시

✅ undefined → 값이 아직 할당되지 않음

참조 타입

참조타입은 오브젝트 타입과 함수타입만 있다.

원시타입과 참조타입은 메모리 참조 방식이 다르다.

원시타입 : 메모리에 할당될 때는 값 자체를 저장
참조타입 : 메모리 주소 저장(힙 메모리 영역에 저장된 값을 가르키는 주소)

원시타입의 동작 원리

근데 여기서 변수2에 127을 할당하면?

참조타입의 동작원리

배열 값에 [1, 2] 가 들어가는 것으로 보이지만 실제로 메모리에 저장된 값은 메모리 주소다.

이 메모리 주소는 힙 메모리에 저장된 실제 값을 가리킨다.

참조 타입은 원시 타입과 다르게 요소의 값을 변경하더라도 새 메모리 주소를 할당하지 않는다. 그렇기 때문에 variable[이 ]의 값을 3 으로 바꾸면 variable2[0]의 값도 3 으로 반영된다.

즉, 얕은복사다.

📌 1. 객체(Object)

1-1. 객체 선언

객체는 중괄호 {} 안에 **키(key)와 값(value)**을 설정하여 선언

const obj = {
  name: 'Sunhyoup',
  age: 30,
  'full-name': 'Sunhyoup Lee'
};

⚠️ 주의:

키 이름에 특수 문자(예: ``)가 포함될 경우, 따옴표로 감싸야 함

키에 접근하는 방법:

.(dot notation): obj.name

[](bracket notation): obj['age']

특수문자가 포함된 키는 []만 사용 가능: obj['full-name']

1-2. 객체 속성 접근

console.log(obj.name);     // Sunhyoup
console.log(obj['age']);   // 30
console.log(obj['full-name']); // Sunhyoup Lee

1-3. 객체 요소 추가

값을 대입하는 것만으로 새로운 속성을 추가할 수 있다.

const obj = { name: "Sunhyoup" };
obj.age = 30;

console.log(obj.age); // 30

1-4. 객체 요소 삭제

delete 키워드를 사용하면 객체의 특정 속성을 삭제할 수 있다.

const obj = { name: 'Sunhyoup' };
obj.age = 30;
delete obj.age;

console.log(obj.age); // undefined

📌 2. 배열(Array)

2-1. 배열 선언

배열은 대괄호 [] 를 사용하여 선언

const arr = [1, 2, 3];

2-2. 배열 요소 접근

배열은 0부터 시작하는 **인덱스(index)**를 사용하여 요소에 접근

console.log(arr[0]); // 1
console.log(arr[1]); // 2

2-3. 배열 길이 확인

배열의 길이(요소 개수)를 length 속성으로 확인

console.log(arr.length); // 3

2-4. 배열 요소 추가

(1) push() → 배열 끝에 요소 추가

const arr = [1, 2, 3];
arr.push(4);

console.log(arr); // [1, 2, 3, 4]
console.log(arr[3]); // 4

2-5. 배열 요소 삭제

(1) pop() → 배열 마지막 요소 제거

pop() 메서드는 배열의 마지막 요소를 제거하고 그 값을 반환

const arr = [1, 2, 3];
const value = arr.pop();

console.log(value); // 3 (삭제된 값)
console.log(arr.length); // 2 (배열 길이 감소)

✅ 정리

기능 객체(Object) 배열(Array)

선언	{} 사용	[] 사용
요소 접근	obj.key 또는 obj['key']	arr[index]
요소 추가	obj.newKey = value	arr.push(value)
요소 삭제	delete obj.key	arr.pop()

✔ 객체는 "키-값" 형태로 데이터를 저장할 때 사용

✔ 배열은 "순서가 있는 리스트"를 저장할 때 사용

04.3 함수

자바스크립트에서 객체는 일반적으로 정의하는 것도 가능하지만 일급 객체이자 타입이기도 하다.

일급객체란?(First-Class Citizen)

즉, 함수를 변수에 저장하거나, 함수의 인자로 전달하거나, 함수에서 함수를 반환할 수 있음을 의미

그러니까 객체(특히 함수)가 다음 조건을 만족하면 일급 객체다.

변수에 저장 가능
함수의 매개변수로 전달 가능
함수의 반환값으로 사용 가능

대표적인 예: 함수 (JavaScript, Python, etc.)

이급 객체란? (Second-Class Citizen)

일급 객체의 조건을 만족하지 않는 객체
즉, 함수의 인자로 전달되거나 반환될 수 없는 것
주로 C,Java에서 함수(메서드) 가 이에 해당함

Java에서는 함수(메서드) 자체를 변수에 담거나, 다른 함수의 매개변수로 전달하는 게 안된다. 그래서 이급 객체라고 부름

익명함수는 변수명 안쓰고 함수 만들면 익명함수(이름없는 함수)다.

04.4 코딩테스트 구현 노하우

📌 1. 구조 분해 할당 (Destructuring Assignment)

객체나 배열에서 값을 쉽게 추출하는 문법

(일일이 obj.key 안 해도 됨!)

✅ 배열 구조 분해

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

✔ arr[0], arr[1] 안 써도 알아서 변수에 들어감.

✅ 객체 구조 분해

const obj = { name: "Minho", age: 27 };
const { name, age } = obj;

console.log(name); // Minho
console.log(age);  // 27

✔ obj.name, obj.age 안 써도 바로 꺼낼 수 있음!

📌 2. 값 교환하기 (Swap Variables)

두 변수의 값을 교환할 때, 임시 변수 없이 가능!

✅ 구조 분해 할당으로 값 교환

let a = 10, b = 20;
[a, b] = [b, a]; // Swap!

console.log(a); // 20
console.log(b); // 10

✔ temp 변수 없이 한 줄로 값 교환 가능! 🔥

📌 3. 비구조화 할당 (Destructuring Assignment)

➡ 구조 분해 할당과 같은 개념!

"비구조화 할당"은 한국식 용어, 원래 영어로는 Destructuring Assignment

✅ 객체 비구조화 할당 예시

const person = { name: "Minho", age: 27 };
const { name, age } = person;

console.log(name); // Minho
console.log(age);  // 27

✔ 구조 분해 할당 == 비구조화 할당 (같은 개념!)

📌 4. 스프레드 연산자 (Spread Operator)

...(점 3개)로 배열이나 객체를 펼쳐서 복사하는 문법!

✅ 배열 복사

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // 배열 복사

console.log(arr2); // [1, 2, 3]

✔ arr1을 arr2로 복사하면서 독립적인 배열 생성

✅ 배열 합치기

const arrA = [1, 2];
const arrB = [3, 4];
const combined = [...arrA, ...arrB];

console.log(combined); // [1, 2, 3, 4]

✔ 두 배열을 쉽게 합칠 수 있음!

✅ 객체 복사

const obj1 = { name: "Minho" };
const obj2 = { ...obj1, age: 27 };

console.log(obj2); // { name: "Minho", age: 27 }

✔ obj1을 복사하고, age 추가 가능!

📌 5. 배열 내 같은 요소 제거하기 (Remove Duplicates in Array)

Set을 활용해서 중복 요소 제거 가능!

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];

console.log(uniqueArr); // [1, 2, 3, 4, 5]

✔ Set은 중복을 허용하지 않음 → ...으로 다시 배열화하면 끝!

📌 6. && 와 || 연산자로 조건문 대체하기

조건문을 줄이는 테크닉!

✅ && (AND) 연산자

const isLoggedIn = true;
isLoggedIn && console.log("Welcome!"); // 실행됨

✔ && 연산자는 앞이 true일 때만 뒤 코드 실행

if 대체 가능!

if (isLoggedIn) {
  console.log("Welcome!");
}
// ↓ 줄이면?
isLoggedIn && console.log("Welcome!")

✅ || (OR) 연산자

const username = "";
const displayName = username || "Guest";

console.log(displayName); // "Guest"

✔ || 연산자는 앞이 falsy 값이면 뒤 값 반환

(falsy 값: null, undefined, "", 0, false)

?? (Nullish Coalescing) 연산자도 있음!

const username = "";
const displayName = username ?? "Guest"; // 빈 문자열도 유지

console.log(displayName); // ""

✔ ??는 null이나 undefined만 체크 (빈 문자열은 유지!)

✅ && + || 활용 예제

const user = { name: "Minho" };

console.log(user.name || "Guest"); // Minho
console.log(user.age || "Not specified"); // Not specified

user.isAdmin && console.log("Admin Mode"); // 실행 안 됨 (false)

✔ ||로 기본값 설정

✔ &&로 조건 만족 시 실행

📌 정리 요약 🚀

구조 분해 할당	배열/객체에서 쉽게 값 꺼내기	const [a, b] = arr;
값 교환하기	변수 값 바꾸기 (temp 없이)	[a, b] = [b, a];
비구조화 할당	구조 분해 할당과 같은 개념	const { name, age } = obj;
스프레드 연산자	배열/객체 펼치기 (...)	[...arr1, ...arr2]
배열 중복 제거	Set 활용	[...new Set(arr)]
**&& / `		` 연산자**

'Study > 코딩테스트(JS)' 카테고리의 다른 글

08.해시 (0)	2025.02.25
07. 큐 (0)	2025.02.25
06. 스택 (0)	2025.02.25
05.배열 (0)	2025.02.18
03.알고리즘의 효율 분석(BigO,시간&공간 복잡도) (0)	2025.01.21

04.코딩테스트 필수 문법

04.1 빌트인 데이터 타입

04.2 참조타입

🔹 원시 타입 vs 참조 타입

타입이 어떤 거냐면

number

부동 소수점이란(Floating ponint)

숫자에서 엡실론이란

🔹 왜 부동소수점이 필요할까?

🎯 이제 Number.EPSILON이 등장할 차례!

🔹 Number.EPSILON의 역할

🔥 최종 요약

정리

string

문자열 타입 연산

📝 문자열 빌트인 메서드 정리

🔥 추가 꿀팁

1️⃣ trim()의 변형

2️⃣ replaceAll() (ES2021)

🎯 최종 정리

그 외 타입

1. Boolean (불리언)

✅ 예제

2. BigInt (빅인트)

✅ 예제

3. Null (널)

✅ 예제

4. Undefined (언디파인드)

✅ 예제

🔥 최종 정리

참조 타입

참조타입은 오브젝트 타입과 함수타입만 있다.

원시타입의 동작 원리

참조타입의 동작원리

📌 1. 객체(Object)

1-1. 객체 선언

1-2. 객체 속성 접근

1-3. 객체 요소 추가

1-4. 객체 요소 삭제

📌 2. 배열(Array)

2-1. 배열 선언

2-2. 배열 요소 접근

2-3. 배열 길이 확인

2-4. 배열 요소 추가

(1) push() → 배열 끝에 요소 추가

2-5. 배열 요소 삭제

(1) pop() → 배열 마지막 요소 제거

✅ 정리

04.3 함수

일급객체란?(First-Class Citizen)

그러니까 객체(특히 함수)가 다음 조건을 만족하면 일급 객체다.

이급 객체란? (Second-Class Citizen)

익명함수는 변수명 안쓰고 함수 만들면 익명함수(이름없는 함수)다.

04.4 코딩테스트 구현 노하우

📌 1. 구조 분해 할당 (Destructuring Assignment)

✅ 배열 구조 분해

✅ 객체 구조 분해

📌 2. 값 교환하기 (Swap Variables)

✅ 구조 분해 할당으로 값 교환

📌 3. 비구조화 할당 (Destructuring Assignment)

✅ 객체 비구조화 할당 예시

📌 4. 스프레드 연산자 (Spread Operator)

✅ 배열 복사

✅ 배열 합치기

✅ 객체 복사

📌 5. 배열 내 같은 요소 제거하기 (Remove Duplicates in Array)

📌 6. && 와 || 연산자로 조건문 대체하기

✅ && (AND) 연산자

✅ || (OR) 연산자

✅ && + || 활용 예제

📌 정리 요약 🚀

'Study > 코딩테스트(JS)' 카테고리의 다른 글

관련글

티스토리툴바