자바스크립트 변수와 상수, 데이터 타입 이해하기. let, const, var 사용법과 예제 코드 - 자바스크립트 #3

이 글은 자바스크립트 초보자를 위한 학습서로, 변수와 상수, 데이터 타입에 대한 기본적인 개념과 사용법을 설명하기 위해 작성되었습니다. 자바스크립트를 처음 배우는 사람들이 이 글을 통해 변수와 상수의 차이점, 데이터 타입의 종류와 특징을 이해하고, 다양한 예제 코드를 통해 실습해 볼 수 있도록 돕는 것이 목적입니다.

자바스크립트 변수와 상수, 데이터 타입

 

자바스크립트 변수와 상수

변수는 변할 수 있는 데이터를 저장하는 공간입니다. 자바스크립트에서 변수는 var, let, const 키워드를 사용하여 선언할 수 있습니다.

반응형

  1) var

var는 함수 스코프(function scope)를 가지며, 동일한 변수를 여러 번 선언할 수 있습니다. 하지만 최신 자바스크립트에서는 var보다는 let과 const를 사용하는 것이 권장됩니다. 

var name = "John"; console.log(name); // John var name = "Doe"; console.log(name); // Doe

  2) let

let은 블록 스코프(block scope)를 가지며, 동일한 블록 내에서 동일한 변수를 중복 선언할 수 없습니다. 블록 스코프는 변수가 선언된 블록 {} 내부에서만 유효하다는 것을 의미합니다. 

let age = 25; if (true) { let age = 30; console.log(age); // 30, 블록 내부의 age } console.log(age); // 25, 블록 외부의 age // let age = 35; // 에러 발생: 동일한 블록 내에서 중복 선언 불가

  3) const

const는 블록 스코프를 가지며, 상수를 선언하는 데 사용됩니다. 상수는 선언 후 값을 변경할 수 없습니다.

const pi = 3.14; console.log(pi); // 3.14 // pi = 3.14159; // 에러 발생: 상수의 값을 변경할 수 없음

  블록 스코프란

블록 스코프는 변수가 선언된 블록 {} 내부에서만 유효한 범위를 의미합니다.

let과 const 키워드로 선언된 변수는 블록 스코프를 가집니다. 이는 변수가 선언된 블록 내에서만 접근할 수 있으며, 블록 외부에서는 접근할 수 없습니다. 

{ let blockScopedVariable = "I am inside a block"; console.log(blockScopedVariable); // "I am inside a block" } console.log(blockScopedVariable); // 에러 발생: blockScopedVariable is not defined

 

자바스크립트 데이터 타입

데이터 타입은 크게 두 가지로 나눌 수 있습니다. 원시 타입(Primitive Type)과 객체 타입(Object Type).

  원시 타입

• 숫자(Number): 모든 숫자를 포함합니다. let num = 42;
• 문자열(String): 하나 이상의 문자를 포함합니다. let greeting = "Hello, world!";
• 불리언(Boolean): 참(true) 또는 거짓(false)의 값을 가집니다. let isJavaScriptFun = true;
• null: 의도적으로 값이 없음을 나타냅니다. let emptyValue = null;
• undefined: 값이 할당되지 않은 변수의 초기 상태를 나타냅니다. let notAssigned;
• 심벌(Symbol): 유일한 식별자를 생성합니다. let uniqueId = Symbol("id");

  객체 타입

• 객체(Object): 키-값 쌍의 집합입니다.

let person = { name: "John", age: 30 }; console.log(person.name); // John

• 배열(Array): 순서가 있는 데이터의 집합입니다.

let colors = ["red", "green", "blue"]; console.log(colors[0]); // red

 

• 함수(Function): 특정 작업을 수행하는 코드 블록입니다. 

function greet(name) { return "Hello, " + name; } console.log(greet("Alice")); // Hello, Alice

 

• 날짜(Date):날짜와 시간을 나타냅니다. 

let now = new Date(); console.log(now);

 

• 정규 표현식(RegExp): 패턴 매칭을 위한 문법입니다.

let pattern = /hello/; console.log(pattern.test("hello world")); // true

 

  예제코드

예제 코드 - 1) 변수와 상수

let userName = "Alice"; const birthYear = 1990; function calculateAge(currentYear) { let age = currentYear - birthYear; return age; } console.log(userName); // Alice console.log(birthYear); // 1990 console.log(calculateAge(2024)); // 34

예제 코드 - 2) 데이터 타입

let num = 100; // 숫자 let message = "JavaScript는 재미있다!"; // 문자열 let isAvailable = true; // 불리언 let emptyValue = null; // null let notAssigned; // undefined let uniqueId = Symbol("id"); // 심볼 let person = { name: "Alice", age: 30, job: "Developer" }; // 객체 let colors = ["red", "green", "blue"]; // 배열 function sayHello(name) { return `Hello, ${name}!`; } // 함수 let now = new Date(); // 날짜 let pattern = /js/; // 정규 표현식 console.log(num); // 100 console.log(message); // JavaScript는 재미있다! console.log(isAvailable); // true console.log(emptyValue); // null console.log(notAssigned); // undefined console.log(uniqueId); // Symbol(id) console.log(person.name); // Alice console.log(colors[1]); // green console.log(sayHello("Bob")); // Hello, Bob! console.log(now); console.log(pattern.test("I love js")); // true