1.2 변수와 데이터 타입

약 9분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

1.2 변수와 데이터 타입

JavaScript에서 변수와 데이터 타입은 프로그램을 구성하는 가장 기본적인 요소입니다. 변수를 사용하면 데이터를 저장하고 필요할 때마다 불러올 수 있으며, 데이터 타입은 우리가 사용하는 데이터의 종류를 정의합니다. 이 강의에서는 변수의 선언 방법과 다양한 데이터 타입에 대해 살펴보겠습니다.

1. 변수 선언

JavaScript에서는 변수를 선언할 때 var, let, const를 사용합니다. 이 세 가지는 각기 다른 특성을 가지므로, 상황에 맞추어 올바른 것을 선택해야 합니다.

var: 함수 스코프를 가지며, 호이스팅이 발생합니다.
let: 블록 스코프를 가지며, 재선언이 불가능합니다.
const: 블록 스코프를 가지며, 재할당이 불가능합니다.

예제: 변수 선언

아래의 코드는 세 가지 변수를 선언하는 예제입니다.

코드 javascript

// 변수 선언 예제
var name = 'Alice';
let age = 25;
const isStudent = true;

console.log(name); // Alice
console.log(age); // 25
console.log(isStudent); // true

2. 데이터 타입

JavaScript는 다양한 데이터 타입을 지원합니다. 주요 데이터 타입은 다음과 같습니다:

원시 타입: string, number, boolean, null, undefined, symbol
객체 타입: object (배열, 함수 등 포함)

각각의 데이터 타입에 대한 설명

String: 문자 데이터. 따옴표로 감싸서 사용합니다.
Number: 숫자 데이터. 정수와 실수를 포함합니다.
Boolean: 참(true) 또는 거짓(false)을 나타냅니다.
Null: 의도적으로 변수가 '값 없음'을 나타내기 위해 사용됩니다.
Undefined: 변수가 초기화되지 않았을 때의 상태입니다.
Symbol: 유일한 식별자를 만들 수 있는 타입입니다.
Object: 여러 값을 속성으로 가질 수 있는 복합 데이터 타입입니다.

예제: 데이터 타입 확인

데이터 타입을 확인하기 위해 typeof 연산자를 사용합니다.

코드 javascript

// 데이터 타입 확인 예제
let num = 10;
let str = 'Hello, World!';
let isActive = false;
let person = null;
let notInitialized;
let uniqueId = Symbol('id');
let array = [1, 2, 3];

console.log(typeof num); // number
console.log(typeof str); // string
console.log(typeof isActive); // boolean
console.log(typeof person); // object
console.log(typeof notInitialized); // undefined
console.log(typeof uniqueId); // symbol
console.log(typeof array); // object

3. DOM 조작과 변수 활용

변수는 DOM 요소를 조작하는 데 매우 유용하게 사용됩니다. 다음은 HTML 요소의 내용을 변경하는 예제입니다.

예제: DOM 요소 변경

먼저 HTML을 준비합니다.

코드 html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>변수와 데이터 타입</title>
    <style>
        body { font-family: Arial, sans-serif; }
        #output { font-weight: bold; }
    </style>
</head>
<body>
    <h1>변수와 데이터 타입 실습</h1>
    <p id="output">여기에 변수 값이 표시됩니다.</p>
    <button id="changeButton">변경하기</button>
    <script src="script.js"></script>
</body>
</html>

이제 JavaScript를 사용하여 버튼을 클릭했을 때 output이라는 id를 가진 요소의 내용을 변경해보겠습니다.

코드 javascript

// script.js
// 버튼 클릭 시 DOM 요소 내용 변경
const outputElement = document.getElementById('output');
const changeButton = document.getElementById('changeButton');

changeButton.addEventListener('click', () => {
    let newText = '변수가 변경되었습니다!'; // 새 변수에 텍스트 저장
    outputElement.textContent = newText; // DOM 요소 내용 변경
});

4. 실습과 응용

실습 과제로는 ToDo 리스트의 기본 구성 요소를 만들고, 리스트 항목을 추가하는 기능을 구현해야 합니다. 다음은 기본 HTML 구조입니다.

HTML 구조 예제

이것을 바탕으로 JavaScript로 기능을 구현해보세요.

코드 html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDo 리스트</title>
    <style>
        body { font-family: Arial, sans-serif; }
        ul { list-style-type: none; }
    </style>
</head>
<body>
    <h1>ToDo 리스트</h1>
    <input type="text" id="todoInput" placeholder="할 일을 입력하세요">
    <button id="addButton">추가하기</button>
    <ul id="todoList"></ul>
    <script src="script.js"></script>
</body>
</html>

이제 할 일을 추가하는 기능을 JavaScript로 구현해 보세요. 적절한 변수를 사용하고 데이터를 리스트에 추가하는 방법을 익혀보세요.

5. 정리

이번 강의에서는 변수와 데이터 타입에 대해 배웠습니다. 변수를 이용해 데이터를 저장하고, 다양한 데이터 타입을 활용하여 프로그램을 구성할 수 있습니다. DOM을 조작하는 방법과 실습을 통해 자신의 코드로 구현하는 경험을 쌓아보세요. 이후 실습 과제를 통해 복습해 보시고, 문제 해결 능력을 기르는 데 집중하세요!

1.2 변수와 데이터 타입

1.2 변수와 데이터 타입

1. 변수 선언

예제: 변수 선언

2. 데이터 타입

각각의 데이터 타입에 대한 설명

예제: 데이터 타입 확인

3. DOM 조작과 변수 활용

예제: DOM 요소 변경

4. 실습과 응용

HTML 구조 예제

5. 정리

댓글 0