초코의 풀스택 도전기 16: 자바스크립트에서 변수와 데이터 타입을 이해하다

스토리텔링 2024. 10. 17. 10:18

1. 들어가면서

초코는 자바스크립트를 조금씩 이해하기 시작했다. 이전에 배웠던 HTML과 CSS로는 웹페이지의 구조와 디자인을 꾸미는 데에 충분했지만, 동적인 기능을 추가하려면 자바스크립트가 필요하다는 것을 깨달았다. 하지만 자바스크립트를 다루기 전에 꼭 알아야 할 중요한 개념들이 있었다.

"멘토님, 자바스크립트를 사용하려면 무엇부터 알아야 하나요?" 초코는 물었다.

멘토가 미소를 지으며 말했다.
"좋은 질문이야, 초코야. 자바스크립트는 프로그래밍 언어인 만큼, 데이터를 다루는 방법을 알아야 해. 오늘은 자바스크립트에서 가장 기본적인 '변수'와 '데이터 타입'에 대해 배워보자."

2. 변수란 무엇인가?

"변수란 무엇인가요?" 초코는 궁금해하며 물었다.

" 변수는 데이터를 저장하는 '상자'라고 생각하면 돼. 변수 안에 데이터를 저장하고, 나중에 그 데이터를 필요할 때 꺼내서 사용할 수 있지. 자바스크립트에서 변수를 선언할 때는 var, let, const 세 가지 키워드를 사용할 수 있어."

// 변수 선언 예시
var name = "Choco";   // 변수를 옛날 방식으로 선언하는 방법
let age = 20;         // 변할 수 있는 값을 선언할 때 사용
const country = "South Korea";  // 변하지 않는 상수를 선언

var는 과거 방식으로 변수를 선언하는 방법이지만, 지금은 잘 사용하지 않아.
let은 변할 수 있는 변수를 선언할 때 사용돼. 나중에 값을 변경할 수 있어.
const는 변하지 않는 상수를 선언하는 키워드로, 값을 한 번 할당하면 변경할 수 없어.

이제 이 코드를 HTML 파일에 포함시켜 실제로 실행해보고 결과를 확인해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>변수와 데이터 타입 예제</title>
</head>
<body>
    <h2>자바스크립트 변수와 데이터 타입 예제</h2>

    <script>
        // 변수 선언 및 출력
        var name = "Choco";
        let age = 20;
        const country = "South Korea";

        // 변수 값 출력
        console.log("이름: " + name);  
        console.log("나이: " + age);  
        console.log("국가: " + country);

        // 변수 값 변경
        name = "Choco의 풀스택 도전기";
        age = 21;
        // const 변수는 값을 변경할 수 없으므로, 변경 시 오류 발생
        // country = "USA";  // 오류 발생

        console.log("변경된 이름: " + name);
        console.log("변경된 나이: " + age);
    </script>
</body>
</html>

콘솔에 다음과 같은 내용이 출력될 거야. 콘솔을 들어가려면, F12를 눌러서 들어가면 된단다.

3. 데이터 타입

멘토는 변수를 이해한 초코에게 자바스크립트의 데이터 타입을 설명했다. 자바스크립트에서 다루는 데이터에는 여러 가지 종류가 있는데, 대표적인 타입을 아래와 같이 살펴보자.

// 숫자
let score = 100;
let temperature = 36.5;

// 문자열
let greeting = "Hello, Choco!";

// 불리언
let isStudent = true;
let hasGraduated = false;

// null과 undefined
let job = null;
let position;

이 코드를 실제로 실행해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>데이터 타입 예제</title>
</head>
<body>
    <h2>자바스크립트 데이터 타입 예제</h2>

    <script>
        // 숫자
        let score = 100;
        let temperature = 36.5;

        // 문자열
        let greeting = "Hello, Choco!";

        // 불리언
        let isStudent = true;
        let hasGraduated = false;

        // null과 undefined
        let job = null;
        let position;

        // 콘솔에 출력
        console.log("점수: " + score);  // 100
        console.log("온도: " + temperature);  // 36.5
        console.log("인사말: " + greeting);  // Hello, Choco!
        console.log("학생인가요?: " + isStudent);  // true
        console.log("졸업했나요?: " + hasGraduated);  // false
        console.log("직업: " + job);  // null
        console.log("위치: " + position);  // undefined
    </script>
</body>
</html>

콘솔에 다음과 같은 내용이 출력될 거야.

점수: 100
온도: 36.5
인사말: Hello, Choco!
학생인가요?: true
졸업했나요?: false
직업: null
위치: undefined

숫자: score와 temperature는 숫자 값을 저장해.
문자열: greeting은 텍스트 데이터를 저장하는데, 따옴표로 감싸야 해.
불리언: isStudent와 hasGraduated는 참 또는 거짓 값을 저장해.
null과 undefined: job은 값이 없다는 것을 명시적으로 나타내는 null 값을 가지고, position은 선언되었지만 초기값이 지정되지 않았기 때문에 undefined 상태야.

4. 연산자

이제 초코는 변수를 사용해 데이터를 계산하거나 비교하는 방법을 배우고 싶어했다.

멘토는 자바스크립트에서 사용할 수 있는 다양한 연산자를 설명해주었다.

1. 산술 연산자

산술 연산자는 숫자를 계산하는 데 사용돼.

let a = 10;
let b = 5;

console.log(a + b);  // 더하기: 15
console.log(a - b);  // 빼기: 5
console.log(a * b);  // 곱하기: 50
console.log(a / b);  // 나누기: 2
console.log(a % b);  // 나머지: 0

2. 비교 연산자

비교 연산자는 두 값을 비교할 때 사용돼.

let a = 10;
let b = 5;

console.log(a == b);  // 같은가? false
console.log(a != b);  // 같지 않은가? true
console.log(a > b);   // a가 b보다 큰가? true
console.log(a < b);   // a가 b보다 작은가? false

3. 논리 연산자

논리 연산자는 여러 조건을 결합하거나 조건을 반전시킬 때 사용돼.

let isAdult = true;
let hasPermission = false;

console.log(isAdult && hasPermission);  // 둘 다 참일 때 true: false
console.log(isAdult || hasPermission);  // 하나라도 참이면 true: true
console.log(!isAdult);  // 반대 값: false

이 코드를 실제로 실행해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>연산자 예제</title>
</head>
<body>
    <h2>자바스크립트 연산자 예제</h2>

    <script>
        // 산술 연산자 예제
        let a = 10;
        let b = 5;

        console.log("더하기: " + (a + b));  // 15
        console.log("빼기: " + (a - b));    // 5
        console.log("곱하기: " + (a * b));  // 50
        console.log("나누기: " + (a / b));  // 2
        console.log("나머지: " + (a % b));  // 0

        // 비교 연산자 예제
        console.log("같은가?: " + (a == b));   // false
        console.log("a가 더 큰가?: " + (a > b));  // true

        // 논리 연산자 예제
        let isAdult = true;
        let hasPermission = false;
        
        console.log("성인이고 권한이 있는가?: " + (isAdult && hasPermission));  // false
        console.log("성인이거나 권한이 있는가?: " + (isAdult || hasPermission));  // true
        console.log("성인이 아닌가?: " + (!isAdult));  // false
    </script>

</body>
</html>

콘솔에 다음과 같은 내용이 출력될 거야:

더하기: 15
빼기: 5
곱하기: 50
나누기: 2
나머지: 0
같은가?: false
a가 더 큰가?: true
성인이고 권한이 있는가?: false
성인이거나 권한이 있는가?: true
성인이 아닌가?: false

산술 연산자는 숫자를 더하거나 빼고, 곱하고 나누는 등 기본적인 연산을 처리해.
비교 연산자는 두 값을 비교해서 참인지 거짓인지 결과를 알려줘.
논리 연산자는 여러 조건을 결합하거나 반전시켜, 더 복잡한 논리 연산을 처리할 수 있어.

5. 마무리하며

오늘은 자바스크립트의 기본 개념인 변수와 데이터 타입, 그리고 연산자에 대해 배웠다. 초코는 변수를 사용해 데이터를 저장하고, 연산자를 통해 데이터를 계산하고 비교하는 방법을 익혔다.

"이제 자바스크립트로 기본적인 연산을 할 수 있군요!" 초코는 기뻐했다.

멘토는 미소를 지으며 말했다.
"좋아, 초코야. 이제 자바스크립트에 대해서 더 깊이 공부해보자!"

'스토리텔링' 카테고리의 다른 글

초코의 풀스택 도전기 17: 조건문과 반복문으로 흐름을 제어하다 (0)	2024.10.20
초코의 풀스택 도전기 15: 자바스크립트, 웹의 숨은 마법사 (2)	2024.10.16
프로그래밍이란? 왜 배워야 할까? (5)	2024.10.10
초코의 풀스택 도전기 14: 반응형 이미지와 비디오 다루기 (2)	2024.10.09
초코의 풀스택 도전기 13: 웹 접근성을 고려한 CSS 적용 방법 (0)	2024.10.08

ABOUT ME

EduTech Hub EduTech Hub

1. 들어가면서

2. 변수란 무엇인가?

3. 데이터 타입

4. 연산자

1. 산술 연산자

2. 비교 연산자

3. 논리 연산자

5. 마무리하며

'스토리텔링' 카테고리의 다른 글

티스토리툴바

ABOUT ME

1. 들어가면서

2. 변수란 무엇인가?

3. 데이터 타입

4. 연산자

1. 산술 연산자

2. 비교 연산자

3. 논리 연산자

5. 마무리하며

'스토리텔링' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바