1.5.1 let과 const

약 6분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

1.5.1 let과 const

let과 const는 ES6에서 추가된 변수 선언 키워드로, 변수의 범위(scope)와 재할당 가능성(immutability)에 차이를 둡니다. 이 두 키워드는 전통적인 var 키워드의 단점을 보완하기 위해 설계되었습니다.

let

let으로 선언된 변수는 블록 스코프(block scope)를 가집니다. 이는 변수가 선언된 블록 내부에서만 접근 가능하다는 것을 의미합니다.
let으로 선언한 변수는 재할당이 가능합니다.

const

const로 선언된 변수도 블록 스코프를 가집니다. 하지만 const는 상수(constant)를 의미하므로 한 번 할당된 값은 변경할 수 없습니다. 단, 객체와 배열의 경우 내부 값은 변경이 가능합니다.

예제

아래 예제를 통해 let과 const의 사용법을 살펴보겠습니다. HTML에서 버튼 클릭 시 현재 시간과 함께 메시지를 표시하는 간단한 웹 애플리케이션을 만들어 보겠습니다.

HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>let과 const 예제</title>
</head>
<body>
    <h1>Let과 Const 예제</h1>
    <button id="showTimeBtn">현재 시간 보기</button>
    <p id="message"></p>
    <script src="script.js"></script>
</body>
</html>

CSS 코드

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

h1 {
    color: #333;
}

#showTimeBtn {
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
}

#message {
    margin-top: 20px;
    font-size: 18px;
    color: #555;
}

JavaScript 코드

// 버튼 클릭 이벤트를 처리하는 함수
const showTime = () => {
    // 현재 시간 저장
    let currentTime = new Date().toLocaleTimeString();
    // 메시지 요소에 시간 표시
    document.getElementById('message').textContent = `현재 시간: ${currentTime}`;
};

// 버튼에 이벤트 리스너 추가
document.getElementById('showTimeBtn').addEventListener('click', showTime);

실습

HTML 파일, CSS 파일, JavaScript 파일을 생성하고 코드를 각 파일에 붙여넣습니다.
브라우저에서 HTML 파일을 열고 버튼을 클릭하여 현재 시간을 출력하는지 확인합니다.
let과 const의 차이점을 이해하기 위해 currentTime을 const로 바꾸고 실행해 보세요. 어떤 오류가 발생하는지 확인해 보세요.

응용

let과 const를 사용하여 사용자로부터 입력받는 값을 저장하고, 입력값을 기반으로 메시지를 동적으로 생성하는 웹 애플리케이션을 만들어 보세요.
사용자 입력을 유도하는 폼을 추가하고, 제출 시 입력값을 기반으로 메시지를 표시하는 기능을 추가해 보세요.

정리

let은 재할당이 가능하고 블록 스코프를 가집니다.
const는 재할당이 불가능하지만 블록 스코프를 가집니다.
실습을 통해 let과 const의 사용법을 익힐 수 있습니다. 이러한 개념들은 JavaScript 프로그래밍의 기본이며, 정확한 비즈니스 로직 구현에 필수적입니다.

1.5.1 let과 const

1.5.1 let과 const

let

const

예제

HTML 코드

CSS 코드

JavaScript 코드

실습

응용

정리

댓글 0