JavaScript 변수와 데이터 타입

소개

JavaScript 의 세계에 오신 것을 환영합니다! 이 실습에서는 프로그래밍의 가장 기본적인 두 가지 개념인 변수와 데이터 타입에 대해 배우게 됩니다. 변수는 정보를 저장하는 컨테이너와 같으며, 데이터 타입은 변수가 어떤 종류의 정보를 담을 수 있는지 정의합니다.

다음 내용을 다룰 것입니다:

• let 키워드를 사용하여 변수 선언하기.
• 세 가지 기본 데이터 타입 사용하기: String (텍스트), Number (숫자 값), Boolean (참/거짓).
• console.log() 함수를 사용하여 출력 표시하기.
• typeof 연산자를 사용하여 변수의 데이터 타입 확인하기.

이 실습이 끝나면 JavaScript 에서 데이터를 다루는 탄탄한 기초를 갖추게 될 것입니다.

let 키워드로 변수 선언하기

이 단계에서는 JavaScript 에서 변수를 선언하는 방법을 배우게 됩니다. 변수를 선언하기 위해 키워드를 사용하며, 가장 일반적인 키워드 중 하나는 let입니다. let 키워드는 나중에 다시 할당할 수 있는 새 변수를 생성하고 있음을 나타냅니다.

먼저, WebIDE 왼쪽의 파일 탐색기에서 script.js 파일을 찾으십시오. 해당 파일을 클릭하여 편집기에서 여십시오.

이제 script.js에 다음 코드 줄을 추가하여 message라는 변수를 선언하십시오.

let message;

이 줄은 JavaScript 엔진에게 message라는 변수를 위해 메모리에 공간을 예약하라고 지시합니다. 아직 값이 없으므로 기본적으로 값은 undefined입니다.

변수에 문자열 값 할당하기

변수를 선언했으니 이제 값을 할당해 보겠습니다. String 데이터 타입부터 시작하겠습니다. 문자열은 텍스트를 나타내는 데 사용되는 문자들의 시퀀스입니다. JavaScript 에서 문자열은 작은따옴표 (') 또는 큰따옴표 (") 로 묶습니다.

할당 연산자 (=) 를 사용하여 변수에 값을 할당합니다. 두 단계로 나누어 선언하고 할당할 수도 있지만, 한 줄로 처리하는 것이 더 일반적입니다.

script.js 파일을 수정하여 message 변수를 선언하고 한 줄에 문자열 값을 할당하십시오. 기존 코드를 다음으로 바꾸십시오:

let message = "Hello, LabEx!";

이 한 줄은 message 변수를 생성하고 그 안에 "Hello, LabEx!"라는 텍스트를 저장합니다.

숫자 값 할당 및 콘솔에 로깅하기

다음으로 Number 데이터 타입을 살펴보겠습니다. 이 타입은 정수 (예: 10) 와 소수 (예: 3.14) 를 포함한 모든 숫자 값에 사용됩니다.

이 단계에서는 console.log() 사용법도 배우게 됩니다. 이것은 브라우저의 개발자 콘솔에 정보를 출력하는 내장 JavaScript 함수입니다. 변수 값을 확인하고 코드를 디버깅하는 데 필수적인 도구입니다.

script.js 파일 끝에 다음 줄을 추가하십시오. 이렇게 하면 userCount라는 새 변수가 생성되고 그 값이 콘솔에 출력됩니다.

let userCount = 100;
console.log(userCount);

출력을 보려면 LabEx 인터페이스 상단의 Web 8080 탭을 클릭하십시오. 페이지에서 마우스 오른쪽 버튼을 클릭하고 "Inspect"를 선택한 다음 나타나는 개발자 도구 패널에서 "Console" 탭을 클릭하십시오. 콘솔에 숫자 100이 출력되는 것을 볼 수 있습니다.

변수에 boolean 값 (true 또는 false) 사용하기

다룰 세 번째 기본 데이터 타입은 Boolean입니다. Boolean 은 true 또는 false라는 두 가지 값 중 하나만 가질 수 있습니다. Boolean 은 프로그래밍에서 논리와 의사 결정의 기초입니다.

Boolean 변수를 선언해 보겠습니다. isComplete라는 변수를 생성하고 그 값을 로깅하기 위해 script.js 파일 끝에 다음 줄을 추가하십시오.

let isComplete = true;
console.log(isComplete);

이제 Web 8080 탭으로 돌아가 콘솔을 확인하십시오. 이전 단계의 100 아래에 새로운 출력 true가 출력되는 것을 볼 수 있습니다.

typeof 연산자로 변수 타입 확인하기

때로는 변수에 어떤 종류의 데이터가 저장되어 있는지 알아야 할 때가 있습니다. JavaScript 는 이를 위해 typeof 연산자를 제공합니다. 이 연산자는 피연산자의 타입을 나타내는 문자열을 반환합니다.

마지막 단계에서는 typeof를 사용하여 생성한 각 변수의 데이터 타입을 검사합니다. script.js 파일 끝에 다음 줄을 추가하십시오.

console.log(typeof message);
console.log(typeof userCount);
console.log(typeof isComplete);

코드를 추가한 후 Web 8080 탭으로 전환하고 필요한 경우 페이지를 새로고침하십시오. 콘솔을 확인하면 각 변수의 데이터 타입이 출력되는 것을 볼 수 있습니다.

콘솔의 예상 출력은 다음과 같습니다.

string
number
boolean

요약

이 랩을 완료하신 것을 축하드립니다! 변수와 기본 데이터 타입에 대해 학습하며 JavaScript 프로그래밍의 첫걸음을 내디뎠습니다.

이 랩에서는 다음을 배웠습니다.

• let 키워드를 사용하여 변수를 선언하는 방법.
• 할당 연산자 (=) 를 사용하여 변수에 값을 할당하는 방법.
• String, Number, Boolean의 세 가지 필수 데이터 타입을 다루는 방법.
• console.log()를 사용하여 값을 검사하고 코드를 디버깅하는 방법.
• typeof 연산자를 사용하여 변수의 데이터 타입을 결정하는 방법.

이러한 개념들은 모든 JavaScript 애플리케이션을 작성하는 데 있어 기본적인 구성 요소입니다. 학습 여정을 계속하면서 이 기초 위에 더 복잡하고 상호작용적인 프로그램을 만들기 위해 발전해 나갈 것입니다.