[JavaScript] Const에 관련하여

보통 var 형태를 썼었는데 const라는 변수 선언 방식을 알게 되었다. 이 const는 어디서, 왜 쓰이는 것인지 알아보겠다. 코드 예시를 보자면 다음과 같다.

// 페이지 로드 시 전화번호 입력 하이픈 추가
document.addEventListener('DOMContentLoaded', function() {
    // 전화번호 입력 필드 가져오기 - 이름 수정
    const phoneNumberField = document.querySelector('input[name="m_phone"]');

    if(phoneNumberField) { // null 체크 추가
        // 전화번호 입력 필드에 input 이벤트 리스너 추가
        phoneNumberField.addEventListener('input', function(e) {
            // 숫자만 추출
            const numbers = this.value.replace(/[^0-9]/g, '');

            // 추출된 숫자가 없으면 빈 값 설정
            if (numbers.length === 0) {
                this.value = '';
                return;
            }

            // 전화번호 형식에 맞게 하이픈 추가
            let formattedNumber = '';

            if (numbers.length <= 3) {
                formattedNumber = numbers;
            } else if (numbers.length <= 7) {
                formattedNumber = numbers.substring(0, 3) + '-' + numbers.substring(3);
            } else {
                formattedNumber = numbers.substring(0, 3) + '-' +
                    numbers.substring(3, 7) + '-' +
                    numbers.substring(7, 11);
            }

            // 최대 13자리로 제한
            this.value = formattedNumber.substring(0, 13);
        });
    }
});

 

회원가입 페이지에서 01012345678을 자동으로 010-1234-5678로 만들어주는 기능이다.

---

Const 란?

const는 JavaScript에서 변수를 선언하는 키워드 중 하나다. 2015년에 나온 ES6(ECMAScript 6)에서 도입되었으며, 상수(constant)를 선언할 때 사용한다.

---

const의 주요 특징

1. 재할당 불가능

const로 선언된 변수는 한 번 값이 할당되면 다시 다른 값으로 변경할 수 없다.

const myName = "민영";
myName = "다른이름"; // 오류 발생! 재할당 불가능

 

2. 선언과 동시에 초기화 필요

const로 변수를 선언할 때는 반드시 값을 함께 할당해야 한다.

const age; // 오류 발생! 초기값 없이 선언 불가능
const age = 25; // 올바른 사용법

 

3. 블록 스코프(Block Scope)

const는 블록 스코프를 가집니다. 즉, 변수가 선언된 블록({}) 내에서만 접근 가능하다.

{
    const message = "안녕하세요";
    console.log(message); // "안녕하세요" 출력
}
console.log(message); // 오류 발생! 블록 밖에서는 접근 불가

 

4. 객체와 배열의 내부 값은 변경 가능

const로 선언된 객체나 배열의 내부 값은 변경할 수 있다. 변경할 수 없는 것은 변수가 가리키는 참조(메모리 주소)이다.

const person = { name: "민영", age: 25 };
person.age = 26; // 가능! 객체의 내부 값은 변경 가능
console.log(person); // { name: "민영", age: 26 }

person = { name: "다른사람" }; // 오류 발생! 새로운 객체로 재할당 불가

---

var, let과의 차이점

var (오래된 방식)

• 함수 스코프를 가짐
• 재선언과 재할당 모두 가능
• 호이스팅(변수 선언이 코드 최상단으로 끌어올려지는 현상) 발생

let (ES6에서 도입)

• 블록 스코프를 가짐
• 재할당은 가능하지만 재선언은 불가능
• 선언 전 사용 불가

const (ES6에서 도입)

• 블록 스코프를 가짐
• 재할당과 재선언 모두 불가능
• 선언 전 사용 불가
• 선언과 동시에 초기화 필요

const를 사용하는 이유

1. 코드의 안정성: 변수 값이 변경되지 않도록 보장하여 버그 방지
2. 코드 가독성: 다른 개발자에게 이 변수는 변경되지 않는다는 의도를 명확히 전달
3. 최적화: JavaScript 엔진이 최적화하기에 유리함
4. 안전한 프로그래밍: 의도치 않은 변수 값 변경 방지

---

예시로 보는 const 활용

// 상수 값 정의
const PI = 3.14159;
const MAX_USERS = 100;

// DOM 요소 참조 (코드에서 본 예시)
const phoneNumberField = document.querySelector('input[name="m_phone"]');

// 설정 객체
const config = {
    apiUrl: "https://api.example.com",
    timeout: 5000
};

// 함수 정의
const calculateArea = (radius) => PI * radius * radius;