학습
JavaScript 자료형
JavaScript 자료형 — 초급
자료형
1. 도입 (왜 배워야 하는가)
JavaScript에서 자료형은 프로그래밍의 기본적인 구성 요소 중 하나입니다. 자료형을 이해하지 못하면, 변수를 잘못 사용하여 의도치 않은 결과를 초래할 수 있습니다. 예를 들어, 숫자와 문자열을 잘못 결합하면 오류가 발생하거나 예기치 않은 결과를 낳을 수 있습니다. 실무에서 자료형을 올바르게 이해하고 사용하는 것은 코드의 가독성과 유지보수성을 높이는 데 필수적입니다. 올바른 자료형을 사용하지 않으면 프로그램의 성능 저하와 데이터 손실 같은 심각한 문제가 발생할 수 있습니다.
2. 핵심 개념 설명
JavaScript의 주요 자료형은 다음과 같습니다:
| 자료형 | 설명 | 예시 |
|---|---|---|
| String | 문자열을 나타냄 | "안녕하세요" |
| Number | 숫자를 나타냄 | 42 |
| Boolean | 참(true) 또는 거짓(false)을 나타냄 | true |
| Null | 값이 없음을 나타냄 | null |
| Undefined | 정의되지 않은 값 | undefined |
| Object | 복합 데이터 구조를 나타냄 | { 이름: "홍길동", 나이: 30 } |
| Array | 배열, 여러 값을 저장할 수 있는 객체 | [1, 2, 3] |
이러한 자료형들은 각기 다른 상황에서 사용됩니다. 예를 들어, 문자열은 사용자 이름과 같은 텍스트 정보를 저장하는 데 사용되고, 숫자는 수치 계산에 사용됩니다. 비유하자면, 자료형은 각각의 도구 상자에서 사용하는 도구와 같습니다. 망치로 나사를 조일 수는 없듯이, 각 자료형은 그에 맞는 용도로 사용해야 합니다.
3. 기본 코드 예제
아래는 다양한 자료형을 사용하는 간단한 코드 예제입니다.
// 문자열
let greeting = "안녕하세요"; // 인사말 저장
// 숫자
let age = 25; // 나이 저장
// 불리언
let isStudent = true; // 학생 여부 저장
// null
let address = null; // 주소가 없음을 나타냄
// undefined
let phone; // 전화번호가 정의되지 않음
// 객체
let user = { name: "홍길동", age: 30 }; // 사용자 정보
// 배열
let scores = [90, 85, 80]; // 시험 점수
console.log(greeting); // "안녕하세요"
console.log(age); // 25
console.log(isStudent); // true
console.log(address); // null
console.log(phone); // undefined
console.log(user); // { name: "홍길동", age: 30 }
console.log(scores); // [90, 85, 80]let greeting = "안녕하세요";: 문자열을 변수에 할당합니다.let age = 25;: 숫자를 변수에 할당합니다.let isStudent = true;: 불리언 값을 변수에 할당합니다.let address = null;: 주소가 없음을 나타내는 null 값을 변수에 할당합니다.let phone;: 전화번호가 정의되지 않았음을 나타내는 undefined 값을 변수에 할당합니다.let user = { name: "홍길동", age: 30 };: 객체를 만들어 사용자 정보를 저장합니다.let scores = [90, 85, 80];: 배열을 만들어 여러 점수를 저장합니다.
4. 실전 활용 예제
예제 1: 쇼핑몰 장바구니 구현
쇼핑몰에서 장바구니에 담긴 상품 정보를 관리하기 위해 객체와 배열을 사용합니다.
let cart = []; // 장바구니 배열 초기화
function addItemToCart(item) {
cart.push(item); // 장바구니에 상품 추가
}
addItemToCart({ name: "신발", price: 50000 });
addItemToCart({ name: "옷", price: 30000 });
console.log(cart); // [{ name: "신발", price: 50000 }, { name: "옷", price: 30000 }]let cart = []; : 장바구니를 빈 배열로 초기화합니다.function addItemToCart(item) {...} : 장바구니에 아이템을 추가하는 함수를 정의합니다.cart.push(item); : 배열에 새로운 상품을 추가합니다.예제 2: 사용자 정보 관리
사용자 정보를 저장하고 출력하는 예제입니다.
let user = {
username: "user123",
email: "[email protected]",
isActive: true
};
console.log(사용자 이름: ${user.username}); // 사용자 이름: user123
console.log(사용자 이메일: ${user.email}); // 사용자 이메일: [email protected]let user = {...} : 객체를 만들어 사용자 정보를 저장합니다.console.log(...) : 사용자의 정보를 출력합니다.5. 흔한 실수와 주의사항
실수 1: 자료형 혼용
숫자와 문자열을 잘못 결합하는 경우
let num = 5;
let str = "초코우유";
console.log(num + str); // "5초코우유"실수 2: undefined로 인한 에러
정의되지 않은 변수를 사용하려고 할 때
let value;
console.log(value + 10); // NaNvalue가 정의되지 않았기 때문에 결과는 NaN이 됩니다.