09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초

아르누보 스타일, dall-e

 

JavaScript 변수 선언 및 데이터 타입 이해하기

 

01. 변수 선언: var, let, const

1) var: 함수 스코프를 가지며 재선언과 재할당이 가능합니다.

var greeting = "Hello";
var greeting = "Hi"; // 재선언 가능
greeting = "Hey"; // 재할당 가능
console.log(greeting); // 출력: Hey
    

2) let: 블록 스코프를 가지며 재할당은 가능하지만 재선언은 불가능합니다.

let age = 30;
// let age = 25; // 오류 발생: 재선언 불가
age = 35; // 재할당 가능
console.log(age); // 출력: 35
    

3) const: 블록 스코프를 가지며 재선언과 재할당이 모두 불가능합니다.

const birthYear = 1990;
// const birthYear = 1985; // 오류 발생: 재선언 불가
// birthYear = 1985; // 오류 발생: 재할당 불가
console.log(birthYear); // 출력: 1990
    

 

02. 데이터 타입

1) 숫자(Number): 정수와 실수를 모두 포함합니다.

let temperature = 37.5;
console.log(temperature); // 출력: 37.5
    

2) 문자열(String): 텍스트 데이터를 나타내며, 큰따옴표나 작은따옴표로 감쌉니다.

let welcomeMessage = 'Hello, World!';
console.log(welcomeMessage); // 출력: Hello, World!
    

3) 불리언(Boolean): true 또는 false 값을 가집니다.

let isJavaScriptFun = true;
console.log(isJavaScriptFun); // 출력: true
    

4) 객체(Object): 키-값 쌍의 컬렉션입니다.

let car = { make: "Toyota", model: "Corolla", year: 2021 };
console.log(car); // 출력: { make: "Toyota", model: "Corolla", year: 2021 }
    

5) 배열(Array): 순서가 있는 값의 목록입니다.

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // 출력: ["Apple", "Banana", "Cherry"]
    

6) null: 값이 없음을 나타내는 특별한 키워드입니다.

let job = null;
console.log(job); // 출력: null
    

7) undefined: 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다.

let uninitialized;
console.log(uninitialized); // 출력: undefined
    

 

03. 스코프(Scope)

1) 함수 스코프(Function Scope): 함수 내에서 선언된 변수는 함수 내부에서만 접근할 수 있습니다.

function testFunction() {
    var localVariable = "I'm inside a function";
    console.log(localVariable); // 출력: I'm inside a function
}
testFunction();
// console.log(localVariable); // 오류 발생: localVariable is not defined
    

2) 블록 스코프(Block Scope): 중괄호 {}로 감싸진 블록 내에서만 접근할 수 있습니다.

if (true) {
    let blockScopedVariable = "I'm inside a block";
    console.log(blockScopedVariable); // 출력: I'm inside a block
}
// console.log(blockScopedVariable); // 오류 발생: blockScopedVariable is not defined
    

 

04. 재선언(Re-declaration)

1) var: 재선언이 가능합니다.

var city = "New York";
var city = "Los Angeles"; // 재선언 가능
console.log(city); // 출력: Los Angeles
    

2) let과 const: 동일한 스코프 내에서 재선언이 불가능합니다.

let country = "USA";
// let country = "Canada"; // 오류 발생: 재선언 불가
country = "Canada"; // 재할당 가능
console.log(country); // 출력: Canada
    

 

05. 재할당(Re-assignment)

1) var와 let: 재할당이 가능합니다.

var language = "English";
language = "Spanish"; // 재할당 가능
console.log(language); // 출력: Spanish
    

2) const: 재할당이 불가능합니다.

const continent = "Asia";
// continent = "Europe"; // 오류 발생: 재할당 불가
console.log(continent); // 출력: Asia
    

 

06. 실습

다양한 데이터 타입의 변수를 선언하고 콘솔에 출력합니다.

// 숫자
let age = 25;
console.log(age); // 출력: 25

// 문자열
const name = "Alice";
console.log(name); // 출력: Alice

// 불리언
var isStudent = true;
console.log(isStudent); // 출력: true

// 객체
let person = {
    firstName: "John",
    lastName: "Doe"
};
console.log(person); // 출력: { firstName: "John", lastName: "Doe" }

// 배열
let colors = ["red", "green", "blue"];
console.log(colors); // 출력: ["red", "green", "blue"]

// null
let emptyValue = null;
console.log(emptyValue); // 출력: null

// undefined
let unknown;
console.log(unknown); // 출력: undefined
    

위 실습을 통해 변수 선언과 데이터 타입을 익히고 콘솔 출력으로 결과를 확인합니다.

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.03 - [Study] - 05. CSS 박스 모델 학습 | 웹 개발 기초

05. CSS 박스 모델 학습 | 웹 개발 기초

2024.07.01 - [Study] - 04. CSS 선택자와 기본 스타일링 학습 | 웹 개발 기초

04. CSS 선택자와 기본 스타일링 학습 | 웹 개발 기초

2024.06.30 - [Study] - 03. HTML 시맨틱 태그 학습 : 웹 페이지 구조와 의미를 명확하게 | 웹 개발 기초

03. HTML 시맨틱 태그 학습 : 웹 페이지 구조와 의미를 명확하게 | 웹 개발 기초

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)