AI와 데이터 사이언스의 이론과 실전
JavaScript - 변수(let, var)와 상수(const) 본문
오늘은 자바스크립트의 변수에 관련해서 포스팅 하겠습니다.
1. 변수
자바스크립트의 변수는 값을 저장하고 나중에 그 값을 사용하기 위한 이름표입니다. 변수는 프로그램에서 정보를 보관하고 조작하는데 사용되며 값이 변경될 수 있다는 특징이 있습니다. 변수는 다양한 데이터 유형(문자열, 숫자, 불리언, 객체 등)을 저장할 수 있으며 프로그램의 여러 부분에서 사용됩니다. 예를 들어, "name" 변수에 이름을 저장하거나 "age" 변수에 나이를 저장할 수 있으며, 이후에 이러한 변수를 사용하여 프로그램 내에서 데이터를 조작하거나 출력할 수 있습니다.
1.1. var
- 유연한 변수 선언 방식
- 지역변수, 전역변수와의 구별이 없음
- 같은 이름의 변수를 선언할 수 있음(때문에 사용 지양해야함)
1.2. let
- 지역변수, 전역변수의 구별이 확실
- 같은 이름의 변수를 선언할 수 있음
let 변수명 = 값
또는
let 변수명
변수명 = 값※ 변수 HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>변수</title>
</head>
<body>
<h2>변수</h2>
<script>
var num // 변수 선언
num = 10 // 값 대입
console.log(num)
str = 'hi' // 변수선언 없이 값 대입해도 작동(유연함)
console.log(str)
var str = '반갑습니다' //새로 만들어도 잘 들어감
console.log(str)
console.log(num)
{
let num = 10
console.log(num)
}
console.log(num) // 지역변수가 전역변수에게도 영향을 끼침
//---------let----------
// let num = 10
console.log(num) //위에 선언한 변수 재선언 불가(에러)
// 값 바꾸고 싶다면 변수선언없이 값대입만 진행 num=10
let val1 = 10
console.log(val1)
{
let val1 = 20
console.log(val1)
}
console.log(val1) // 전역변수 값인 10으로 잘 출력됨
</script>
</body>
</html>2. 상수(constant)
변수와 달리 한번 선언된 상수는 다시 재정의 할 수 없는 값입니다. 자바스크립트는 변수보다 상수를 더 많이 사용합니다.
변수와 상수 비교
- 변수의 경우 : 메모리에서 num변수 만들고 10을 다른 메모리에 만들고 num변수거 10 메모리 공간을 가르키게 만듦
let num
num = 10- 상수의 경우 : 메모리에 상수명을 만들고 다른 메모리공간에 값을 만들고 상수명이 값 공간만을 가르키게 만들고 수정 불가능하게 함
const 상수명 = 값;
상수명 = 값 (X, 불가능, 상수는 변할 수 없음)
※상수 HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상수</title>
</head>
<body>
<h2>상수</h2>
<script>
let str1
console.log(str1) // 값을 넣지 않아 undefined
str1 = '김사과'
console.log(str1) // 값을 넣어서 김사과 출력
// const str2;
// console.log(str2) // 상수는 값을 안넣으면 에러남 무조건 생성시 값 줘야함
const str2 = '김사과'
console.log(str2)
const obj = {id:'apple',name:'김사과',gender:'여자'}
console.log(obj.id)
console.log(obj.name)
console.log(obj.gender)
obj.id = 'banana'
obj.name = '반하나'
console.log(obj.id) // 값은 변환 가능
console.log(obj.name)
console.log(obj.gender)
</script>
</body>
</html>3. 자바스크랩트에서 상수를 변수보다 권장하는 이유
- 값의 불변성: const로 선언한 변수에 할당한 값은 변경할 수 없습니다. 이는 코드의 안정성과 가독성을 향상시키는데 도움이 됩니다. 프로그램이 실행 중에 값이 바뀌지 않으면 버그를 줄이고 예상치 못한 동작을 방지할 수 있습니다.
- 가독성: const를 사용하면 코드의 의도가 명확해집니다. 다른 개발자나 여러 코드 부분 간에 변수 값을 변경하지 않을 것임을 명시적으로 나타내므로 코드의 이해가 쉬워집니다.
- 스코프 제한: const는 블록 스코프를 가집니다. 이는 변수의 범위가 제한되어 특정 블록 내에서만 유효하며, 다른 곳에서 같은 이름을 사용하여 변수를 덮어쓰지 않도록 도와줍니다.
- 실수 방지: let과 var 변수는 값이 재할당될 수 있기 때문에 프로그래머의 실수로 인해 의도치 않은 변수 값 변경이 발생할 수 있습니다. const를 사용하면 이러한 실수를 방지할 수 있습니다.
- 성능 최적화: 자바스크립트 엔진은 const로 선언한 변수를 상수로 인식하고, 최적화 작업을 수행할 때 빠른 실행을 도와줄 수 있습니다.
데이터 타입
'HTML과 CSS > JavaScript' 카테고리의 다른 글
| JavaScript - 폼(form), Location, history, navigator객체 (0) | 2023.11.05 |
|---|---|
| JavaScript - 호이스팅, 화살표 함수, 객체, 프로퍼티, 상속, 프로토타입 (0) | 2023.11.03 |
| JavaScript - 자료구조(배열, 프러퍼티), 사용자 정의 함수 (0) | 2023.11.02 |
| JavaScript - 연산자(산술, 비교, 대입, 증감, 논리, 비트, 삼항) (0) | 2023.11.01 |
| JavaScript - 특징, 콘솔 출력 (1) | 2023.10.27 |