자바스크립트에는 기본적으로 제공되는(=빌트인, Built-in) 데이터 타입이 있다.
이 데이터 타입은 크게 두 가지로 나뉜다.
✅ 원시 타입(Primitive Type) → 값 자체를 저장하는 타입
✅ 참조 타입(Reference Type) → 객체(Object), 배열(Array), 함수(Function)처럼
여러 값을 저장하는 복합적인 값
1. 원시 타입 (Primitive Type)
원시 타입은 “단순한 값” 이라고 보면 된다.
이 값들은 한 번 만들어지면 바꿀 수 없다(Immutable).
1) 숫자 (Number)
숫자는 정수, 실수(소수점), 특수 숫자(무한대, NaN)를 포함한다
let num1 = 42; // 정수
let num2 = 3.14; // 실수 (소수점 있는 숫자)
let inf = Infinity; // 무한대
let nan = NaN; // 숫자가 아닌 값 (Not a Number)NaN이 나오는 경우
console.log("hello" * 2); // NaN (문자열을 숫자로 곱할 수 없음)2) 큰 숫자 (BigInt)
Number 타입은 너무 큰 숫자를 못 담는다.
그래서 BigInt 타입이 생겼다.
숫자 뒤에 n을 붙이면 BigInt가 된다.
let bigNumber = 123456789012345678901234567890n;
console.log(bigNumber);3) 문자열 (String)
문자는 " " (쌍따옴표), ' ' (홑따옴표), ` `` (백틱)으로 감싸면 된다.
let str1 = "안녕!";
let str2 = '자바스크립트';
let str3 = `오늘 날짜는 ${new Date().toLocaleDateString()} 입니다.`;백틱(``)을 사용하면 변수를 쉽게 넣을 수 있다! (${} (템플릿리터널) 활용)
4) 참/거짓 (Boolean)
참(true) 또는 거짓(false)만 가지는 타입이다.
let isCodingFun = true;
let isTired = false;조건문에서 많이 사용됨
if (isCodingFun) {
console.log("코딩은 재미있어!");
} else {
console.log("코딩이 별로야...");
}5) 값이 없음 (Undefined)
값을 안 넣은 변수는 undefined가 된다.
let name;
console.log(name); // undefined (아직 값이 없음)6) 값이 없음 (Null)
null은 “아예 비어 있다” 는 의미다.
undefined와 다른 점은 “값을 일부러 비운 것” 이라는 점이다.
let emptyValue = null;
console.log(emptyValue); // nullundefined vs null 차이
• undefined → 아예 값이 없는 상태 (변수 선언만 하고 값 안 넣음)
• null → 값을 일부러 비운 상태 (의도적으로 비어 있음)
7) 심볼 (Symbol)
Symbol은 고유한 값(유일한 값) 을 만들 때 사용한다.
객체의 키(key)로 많이 활용된다.
let sym1 = Symbol("id");
let sym2 = Symbol("id");
console.log(sym1 === sym2); // false (항상 서로 다른 값)2. 참조 타입 (Reference Type)
참조 타입은 여러 개의 값을 묶어서 저장할 수 있는 타입이다.
즉, 변수 하나에 여러 데이터를 저장할 수 있음.
1) 객체 (Object)
객체는 { 키: 값 } 형태로 데이터를 저장한다.
이렇게 하면 관련 있는 데이터를 하나로 묶을 수 있다.
let person = {
name: "철수",
age: 25,
job: "개발자"
};
console.log(person.name); // 철수
console.log(person["age"]); // 252) 배열 (Array)
배열은 여러 개의 데이터를 순서대로 저장할 때 사용한다.
배열의 요소는 [ ] 대괄호 안에 넣으면 된다.
let fruits = ["사과", "바나나", "포도"];
console.log(fruits[0]); // 사과
console.log(fruits[1]); // 바나나
console.log(fruits.length); // 3 (배열 길이)3) 함수 (Function)
자바스크립트에서는 함수도 데이터 타입이다.
즉, 함수도 변수에 저장할 수 있다.
function sayHello() {
return "안녕하세요!";
}
let greet = sayHello;
console.log(greet()); // "안녕하세요!"4) 날짜 (Date)
자바스크립트에서 날짜를 다룰 때 사용하는 타입.
let today = new Date();
console.log(today.toLocaleDateString()); // 현재 날짜 출력5) 정규 표현식 (RegExp)
문자열에서 특정 패턴을 찾을 때 사용!
let pattern = /hello/g;
let text = "hello world! hello!";
console.log(text.match(pattern)); // ["hello", "hello"]6) 오류 (Error)
자바스크립트에서 오류를 다룰 때 사용!
try {
throw new Error("문제가 발생했어요!");
} catch (err) {
console.log(err.message);
}typeof 연산자로 데이터 타입 확인
console.log(typeof 42); // "number"
console.log(typeof "Hello"); // "string"
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" (특별하게 'function' 반환)✅ 1) 같은 객체를 가리킴 (Shallow Copy)
let obj1 = { value: 100 };
let obj2 = obj1;
obj2.value = 200;
console.log(obj1.value); // 200 (같은 주소를 공유해서 같이 바뀜!)
console.log(obj2.value); // 200✅ 2) 독립적인 객체를 만들고 싶다면? (Deep Copy)
객체를 복사할 때 독립적인 새로운 객체를 만들려면 Object.assign() 또는 spread(...)를 사용하면 된다.
let obj1 = { value: 100 };
let obj2 = { ...obj1 }; // 새로운 객체로 복사 (spread 연산자)
obj2.value = 200;
console.log(obj1.value); // 100 (원본은 그대로!)
console.log(obj2.value); // 200함수 (Function)
함수는 특정한 동작을 실행하는 코드 블록이다.
즉, 어떤 입력을 받아 처리하고, 결과를 반환하는 역할을 한다.
한 번 정의해두면 필요할 때마다 재 사용 할 수 있다.
함수 호출(Function Call)
함수 호출은 정의된 함수를 실행하는 과정이다.
함수를 호출하면 함수 내부의 코드가 실행된다.
1) 기본적인 함수 호출
function greet() {
console.log("안녕하세요!");
}
greet(); // 실행 결과: "안녕하세요!"✅ greet(); 를 실행하면 함수 내부의 코드가 실행된다.
✅ 2) 매개변수가 있는 함수 호출
매개변수를 사용하면 입력값에 따라 다르게 동작하는 함수를 만들 수 있다.
function sayHello(name) {
console.log("안녕하세요, " + name + "님!");
}
sayHello("철수"); // "안녕하세요, 철수님!"
sayHello("영희"); // "안녕하세요, 영희님!"✅ 함수 호출 시 sayHello("이름") 형태로 값을 전달하면 name에 해당 값이 들어간다.
✅ 3) 반환값이 있는 함수 호출 (return 사용)
return을 사용하면 함수에서 결과 값을 반환할 수 있다.
function add(a, b) {
return a + b;
}
let result = add(3, 5);
console.log(result); // 8✅ return이 없으면 함수는 단순히 실행만 하고 끝난다.
✅ return이 있으면 값을 돌려주고, 변수에 저장하거나 다른 연산에 사용할 수 있다.
익명 함수(Anonymous Function)
익명 함수는 이름이 없는 함수이다.
보통 변수에 할당해서 사용하거나, 다른 함수의 매개변수로 전달된다.
1) 변수에 저장하는 익명 함수
let hello = function() {
console.log("안녕하세요!");
};
hello(); // 실행 결과: "안녕하세요!"✅ 함수에 이름이 없고, hello 변수에 저장하여 호출할 수 있다.
2) 매개변수가 있는 익명 함수
let add = function(a, b) {
return a + b;
};
console.log(add(2, 3)); // 5✅ 일반적인 함수와 동일하게 매개변수를 사용하여 값을 전달할 수 있다.
3) 즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)
익명 함수를 선언하자마자 바로 실행할 수도 있다.
(function() {
console.log("즉시 실행 함수입니다!");
})();✅ 함수 선언 후 바로 실행되며, 한 번만 실행되는 용도로 사용된다.
구조 분해 할당 (Destructuring Assignment)
구조 분해 할당은 배열이나 객체의 값을 쉽게 변수에 할당하는 문법이다.
1) 배열에서 구조 분해 할당
const fruits = ["사과", "바나나", "포도"];
// 배열의 값을 각각 변수에 할당
const [first, second, third] = fruits;
console.log(first); // "사과"
console.log(second); // "바나나"
console.log(third); // "포도"배열의 순서대로 변수에 값을 넣어준다.
2) 객체에서 구조 분해 할당
const person = { name: "철수", age: 25 };
// 객체의 키(key) 값을 변수에 할당
const { name, age } = person;
console.log(name); // "철수"
console.log(age); // 25객체의 키(key)와 같은 이름의 변수를 만들어 값을 할당한다.
🔹 값 교환하기 (Swap Values)
두 변수의 값을 교환할 때 임시 변수를 사용하지 않고, 구조 분해 할당을 활용할 수 있다.
let a = 1;
let b = 2;
// 구조 분해 할당으로 값 교환
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1[b, a] 형태로 배열을 만들고, 구조 분해 할당을 이용해 값을 바꾼다.
🔹 비구조화 할당 (Destructuring Assignment)
비구조화 할당은 구조 분해 할당과 같은 개념이다.
const user = { id: 1, username: "coding" };
// 객체 비구조화 할당
const { id, username } = user;
console.log(id); // 1
console.log(username); // "coding"“비구조화 할당”은 기존 객체의 구조를 벗겨서(해체해서) 변수에 값을 할당하는 것과 같기 때문에, 구조 분해 할당과 같은 개념이다.
🔹 스프레드 연산자 (Spread Operator, ...)
스프레드 연산자는 배열이나 객체의 요소를 펼쳐서(복사해서) 사용할 때 사용된다.
1) 배열에서 사용
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]...arr1을 사용하면 arr1의 모든 요소를 새로운 배열에 복사할 수 있다.
2) 객체에서 사용
const obj1 = { name: "철수", age: 25 };
const obj2 = { ...obj1, job: "개발자" };
console.log(obj2);
// { name: "철수", age: 25, job: "개발자" }기존 객체에 새로운 속성을 추가할 때 유용하다.
🔹 배열 내 같은 요소 제거하기 (Remove Duplicates in Array)
배열에서 중복된 요소를 제거하는 방법은 여러 가지가 있다.
- Set을 이용한 중복 제거
const numbers = [1, 2, 2, 3, 4, 4, 5];
// Set 객체를 사용하여 중복 제거
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]Set은 중복을 허용하지 않는 자료구조이므로, 이를 활용하면 쉽게 중복을 제거할 수 있다.
🔹 &&와 || 연산자로 조건문 대체하기
조건문을 간결하게 줄이는 방법으로 &&(AND), ||(OR) 연산자를 사용할 수 있다.
1) && 연산자로 조건문 대체하기
const isLoggedIn = true;
// isLoggedIn이 true일 때만 실행
isLoggedIn && console.log("로그인 성공!");&& 연산자는 앞의 조건이 true일 때만 뒤의 코드를 실행한다.
(조건이 false면 실행되지 않는다.)
2) || 연산자로 기본값 설정
const username = null;
// username이 없으면 "Guest"를 기본값으로 사용
const displayName = username || "Guest";
console.log(displayName); // "Guest"|| 연산자는 앞의 값이 false일 때(즉, null, undefined, 0, ""일 때) 뒤의 값을 사용한다.
🫡마무리
1. 원시 타입 (Primitive Type)
✅ Number → 정수, 실수, Infinity, NaN 같은 숫자를 저장하는 타입
✅ BigInt → Number보다 더 큰 정수를 다룰 수 있는 타입 (n을 붙여 사용)
✅ String → 문자 데이터를 저장하는 타입 (", ', ` 사용 가능)
✅ Boolean → true 또는 false 값을 가지는 타입
✅ Undefined → 변수를 선언했지만, 값을 할당하지 않은 상태
✅ Null → 의도적으로 값이 비어 있음을 나타내는 타입
✅ Symbol → 유일한 값을 생성하는 타입 (객체의 key로 활용 가능)
2. 참조 타입 (Reference Type)
✅ Object → 여러 데이터를 key-value 형태로 저장하는 타입
✅ Array → 여러 값을 순서대로 저장하는 리스트 구조
✅ Function → 실행 가능한 코드 블록도 변수에 저장할 수 있음
✅ Date → 날짜와 시간을 다루는 객체
✅ RegExp → 정규 표현식을 다룰 때 사용하는 객체
✅ Error → 예외 처리를 위해 사용되는 객체
3. 함수 (Function)
✅ 함수 호출(Function Call) → 함수이름() 형태로 실행
✅ 매개변수가 있는 함수 → 함수에 값을 전달하여 다르게 동작하도록 설정
✅ return을 사용하는 함수 → 결과 값을 반환하고, 다른 연산에 활용 가능
✅ 익명 함수 (Anonymous Function) → 이름이 없는 함수로 변수에 저장하여 사용
✅ 즉시 실행 함수 (IIFE) → 선언과 동시에 실행되는 함수
4. 구조 분해 할당 (Destructuring Assignment)
✅ 배열 구조 분해 → [a, b] = 배열 형태로 배열 요소를 변수에 할당
✅ 객체 구조 분해 → { key } = 객체 형태로 객체의 값을 변수에 할당
5. 값 교환하기 (Swap Values)
✅ 구조 분해 할당을 활용해 값 교환 → [a, b] = [b, a]
6. 비구조화 할당 (Destructuring Assignment)
✅ 구조 분해 할당과 같은 개념 → 객체나 배열의 값을 쉽게 변수에 할당
7. 스프레드 연산자 (Spread Operator, ...)
✅ 배열 확장 → ...배열을 사용해 기존 배열을 확장할 수 있음
✅ 객체 확장 → { ...객체, 추가속성 } 형태로 기존 객체를 복사하면서 새로운 속성 추가
8. 배열 내 같은 요소 제거하기
✅ Set을 활용하여 중복 제거 → [...new Set(배열)]
9. &&와 || 연산자로 조건문 대체하기
✅ && 연산자 → 앞의 값이 true이면 뒤의 코드 실행 (조건 && 실행할 코드)
✅ || 연산자 → 앞의 값이 false이면 기본값 설정 (변수 || 기본값)
