자바스크립트 기초 문법(자료형)1

자바스크립트에서 변수를 선언할 때 사용하는 키워드var, let, const

1. var

var는 ES6(ECMAScript 2015) 이전부터 존재하던 변수 선언 방식입니다. 몇 가지 주요 특징이 있습니다.

• 변수 재선언 허용: 동일한 이름의 변수를 다시 선언할 수 있습니다.
• Function Scope: var로 선언한 변수는 함수 범위(Function Scope)를 가집니다. 즉, 함수 내에서 선언된 var 변수는 함수 내부에서만 접근할 수 있으며, 함수 밖에서는 접근이 불가합니다.
• Hoisting: var로 선언된 변수는 호이스팅(Hoisting)되므로 선언 위치에 상관없이 함수의 최상단으로 끌어올려진 것처럼 동작합니다. 이 때문에 선언 전에 접근해도 undefined로 초기화됩니다.

function example() {
    console.log(a); // undefined (호이스팅 발생)
    var a = 10;
    console.log(a); // 10
}

example();

 

2. let

let은 ES6부터 도입된 변수 선언 방식으로, var보다 더 안정적이고 직관적인 변수 선언을 가능하게 합니다.

• 변수 재선언 불가: 동일한 이름의 변수를 다시 선언할 수 없습니다.
• Block Scope: let으로 선언한 변수는 블록 범위(Block Scope)를 가집니다. 즉, { }로 감싼 블록 내부에서만 접근할 수 있습니다.
• Hoisting: let도 호이스팅되지만 초기화는 선언된 위치에서 이루어집니다. 따라서, 선언 전에 접근하려고 하면 에러가 발생합니다.

function example() {
    console.log(b); // ReferenceError (초기화 이전에 접근 불가)
    let b = 20;
    console.log(b); // 20
}

example();

 

3. const

const도 ES6부터 도입된 상수 선언 방식으로, 변수를 변경할 필요가 없을 때 사용합니다.

• 상수: const로 선언한 변수는 값을 재할당할 수 없습니다. 선언과 동시에 초기화가 필요합니다.
• Block Scope: const도 let과 동일하게 블록 범위를 가집니다.
• 객체와 배열의 경우: const로 객체나 배열을 선언하면, 객체나 배열 자체는 변경할 수 없지만 그 내부의 프로퍼티나 요소는 수정이 가능합니다.

const c = 30;
c = 40; // Error: 재할당 불가

const person = { name: "Alice" };
person.name = "Bob"; // 내부 프로퍼티 수정 가능
console.log(person.name); // Bob

 

주로 하던 C나C++과 문법은 유사해서 코드 읽기가 편하고 배우기 편할거 같다.

자바스크립트는 동적 타이핑을 지원하는 언어라 변수를 선언할 때 타입을 지정하지 않는다. 이것은 런타임 시점에 변수에 할당되는 값에 따라 자동으로 데이터 타 입이 결정된다는 점이 마음에 든다. c배울때 수많은 이제와서 생각해보니 딱히 쓰지도 않던 자료형들을 달달 외웠었는데 그럴필요 없다.

 

자바스크립트의 데이터 타입

 

자바스크립트의 데이터 타입은 크게 원시 타입(Primitive Type :Number, BigInt, String, Boolean, Undefined, Null, Symbol) 과 참조 타입(Reference Type:Object, Array, Function 등) 으로 나뉩니다. 

 

1. 원시 타입 (Primitive Type)

원시 타입은 데이터 자체가 하나의 고유한 값을 가지며, 변경 불가능(immutable)합니다.(변경 불가능 하다는게 무슨 소리인가? 밑에서 다시 알아보겠다.) 자바스크립트의 주요 원시 타입은 다음과 같습니다.

1.1 Number (숫자형)

숫자를 나타내는 타입으로, 정수와 실수를 모두 포함합니다. 자바스크립트에서 Number 타입은 64비트 부동 소수점 숫자로 저장됩니다.

• Infinity: 무한대를 나타내는 값입니다. 예를 들어, 1 / 0은 Infinity를 반환합니다.
• -Infinity: 음의 무한대를 나타냅니다. 예를 들어, -1 / 0은 -Infinity를 반환합니다.
• NaN: 숫자가 아님(Not-a-Number)을 뜻합니다. 숫자가 아닌 값을 숫자 연산에 사용할 때 발생합니다. 예를 들어, "hello" * 3은 NaN을 반환합니다.

let num = 10; // 일반 숫자 
let infinity = 1 / 0; // Infinity
let nanValue = "text" * 2; // NaN

1.2 BigInt

매우 큰 정수 값을 나타낼 때 사용합니다. BigInt는 숫자 끝에 n을 붙여서 선언하며, 일반적인 Number 타입의 한계를 넘어서는 정수 값을 다룰 수 있습니다.

let bigIntValue = 1234567890123456789012345678901234567890n;

1.3 String (문자열형)

문자열을 나타내며, 작은따옴표(' '), 큰따옴표(" "), 백틱(`)으로 감싸서 선언합니다. 문자열은 문자들의 집합이므로 각 문자에 접근할 수 있지만, 문자열 자체는 변경할 수 없습니다.

let greeting = "Hello, world!";

1.4 Boolean (불린형)

참(true) 또는 거짓(false)을 나타내는 논리형 타입입니다. 논리 연산이나 조건문에서 주로 사용됩니다.

let isActive = true; let isLoggedIn = false;

 

1.5 Undefined

변수가 선언되었으나 값을 할당받지 않았을 때 기본적으로 가지는 값입니다. 즉, 값이 "정의되지 않았다"는 의미를 나타냅니다.

let notAssigned; console.log(notAssigned); // undefined

1.6 Null

의도적으로 "비어 있다"는 것을 나타내기 위해 사용되는 값입니다. undefined와는 다르게 값이 할당되지 않았다는 의미보다는 값이 "없음"을 명시적으로 표현하는 용도로 사용됩니다.

let emptyValue = null;

1.7 Symbol

고유하고 변경 불가능한 값으로, 주로 객체의 속성 키를 만들 때 사용됩니다. 같은 값으로 생성하더라도 매번 고유한 Symbol이 생성됩니다.

let uniqueId = Symbol("id");

 

2. 참조 타입 (Reference Type)

참조 타입은 객체를 포함하며, 원시 타입과는 다르게 객체의 참조를 변수에 저장합니다. 객체 내부 값은 변경이 가능합니다.

2.1 Object (객체)

객체는 키-값 쌍을 가지며, 키를 통해 값을 저장하거나 검색할 수 있는 자료 구조입니다. {}로 선언하며, 배열과 함수도 객체의 일종으로 포함됩니다.

let person = { name: "John", age: 30 };

2.2 Array (배열)

배열은 순서가 있는 리스트 형태로, 여러 개의 값을 하나의 변수에 저장할 수 있습니다. 배열의 각 요소는 []를 사용하여 인덱스로 접근할 수 있습니다.

let numbers = [1, 2, 3, 4, 5];

2.3 Function (함수)

함수는 작업을 수행하는 코드 블록으로, 일급 객체로서 변수에 저장하거나 다른 함수에 전달할 수 있습니다.

function greet() { console.log("Hello"); }

2.4 Date

날짜와 시간을 다루기 위해 사용하는 내장 객체입니다.

let today = new Date();

 

자바스크립트에서 변경 불가능의 의미

 

자바스크립트에서 원시 타입이 "변경 불가능(immutable)"하다는 말은 한 번 생성된 원시 타입의 값은 바뀌지 않는다는 뜻입니다. 여기서 말하는 "변경 불가능"은 값을 수정할 수 없다는 의미가 아니라, 값 자체를 직접 수정하는 대신 새 값을 할당하여 변수의 참조를 변경하는 방식으로 다뤄진다는 의미입니다.

 

문자열(String) 예시

let text = "hello"; text[0] = "H"; // 시도는 가능하지만 실제로는 바뀌지 않음 
console.log(text); // "hello"

위 예시에서 text[0] = "H"로 첫 문자를 변경하려고 시도해도, 문자열 자체는 수정되지 않고 그대로 "hello"로 남아 있습니다. 원시 타입인 문자열은 내부의 특정 문자를 직접 바꿀 수 없습니다.

재할당을 통한 값 변경

그렇다면 원시 타입의 값을 수정하려면 어떻게 해야 할까요? 새로운 값을 변수에 재할당하는 방식으로 변경할 수 있습니다.

let greeting = "hello"; greeting = "Hello, world!"; // greeting에 새로운 문자열을 할당 
console.log(greeting); // "Hello, world!"

여기서 "hello" 문자열 자체가 수정된 것은 아니고, 변수 greeting이 "Hello, world!"라는 새로운 문자열을 가리키게 된 것입니다.

숫자(Number) 예시

숫자 역시 원시 타입이라 변경 불가능합니다. 변수를 선언하고 값을 바꾸려면, 새로운 숫자 값을 재할당해야 합니다.

let num = 5; num = num + 10; // 새로운 값을 계산하여num에 재할당 
console.log(num); // 15

이 경우 num이 5에서 15로 바뀌었지만, 실제로는 5라는 숫자가 변경된 것이 아니라 num 변수가 새로운 숫자 값인 15를 가리키게 된 것입니다.

요약

• 원시 타입의 "변경 불가능"은, 원래 값 자체를 직접 수정할 수 없다는 뜻입니다.
• 변수에 새 값을 재할당하여 변수의 참조만 새 값으로 변경할 수 있습니다.
• 원시 타입은 항상 값 자체가 고유하게 존재하며, 변경이 필요할 때는 새 값을 만들어서 참조를 바꾸는 방식으로 이루어집니다.

이와 달리 객체 타입(Object)은 값의 내부 속성을 직접 변경할 수 있어서 "변경 가능(mutable)"하다고 표현합니다.

 

조사 하면서도 이게 도통 무슨 소린지 모르겠다. 더 찾아보고 읽다보면 이해되리라 믿는다.