[JavaScript]
기초
- [JS] Js기초
- [JS] Js기초 변수
- [JS] Js기초 자료형
- [JS] Js기초 형변환
- [JS] Js기초 연산자
- [JS] Js기초 반복문
- [JS] Js기초 switch
- [JS] Js기초 function
- [JS] Js기초 객체
- [JS] Js기초 배열
중급
- [JS] Js중급 호이스팅(Hoisting)과 TDZ(Temporal Dead Zone)
- [JS] Js중급 생성자함수
- [JS] 객체 메소드(Object methods), 계산된 프로퍼티(Computed property)
- [JS] 심볼(Symbol)
- [JS] WeakMap WeakSet
- [JS] 숫자, 수학 method (Number, Math)
- [JS] 문자열 메소드(String methods)
- [JS] 배열 메소드(Array methods)
- [JS] 구조 분해 할당 (Destructuring assignment)
- [JS] 매개변수 리스트와 전개 문법(Rest parameters and spread syntax)
- [JS] 클로저(Closure)
- [JS] setTimeout / setInterval
- [JS] call / apply / bind
- [JS] 상속, 프로토타입(Prototype)
- [JS] 클래스(Class)
- [JS] 클로미스(Promise)
- [JS] 비동기 처리(Async/Await)
- [JS] Generator
- [JS] 메모리 릭(Memory Leak)
JavaScript 변수에 대해 더 자세히 설명해드리겠습니다.
1. 변수란?
변수는 데이터를 저장하는 ‘컨테이너’입니다. 쉽게 말해서 값을 담는 상자라고 생각하면 됩니다.
2. 변수 선언 방법과 특징
1
2
3
4
5
6
7
8
9
10
| // 1. let - 재할당 가능, 블록 스코프
let age = 25;
age = 26; // 가능
// 2. const - 재할당 불가능, 블록 스코프
const name = "Kim";
// name = "Lee"; // 에러 발생!
// 3. var - 재할당 가능, 함수 스코프 (사용 권장하지 않음)
var old = "예전 방식";
|
3. 변수 선언 규칙
1
2
3
4
5
6
7
8
9
10
11
12
13
| // 1. 문자, 숫자, _, $ 사용 가능
let user_name = "Kim";
let $price = 1000;
// 2. 숫자로 시작할 수 없음
// let 1name = "Kim"; // 에러!
// 3. 예약어 사용 불가
// let let = "test"; // 에러!
// 4. 대소문자 구분
let apple = "사과";
let Apple = "애플";
|
4. 변수 스코프 (범위)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // 1. 전역 스코프
let globalVar = "전역 변수";
function test() {
// 2. 함수 스코프
let functionVar = "함수 변수";
if (true) {
// 3. 블록 스코프
let blockVar = "블록 변수";
console.log(blockVar); // 접근 가능
console.log(functionVar); // 접근 가능
console.log(globalVar); // 접근 가능
}
// console.log(blockVar); // 에러! 블록 밖에서 접근 불가
}
|
5. 변수 호이스팅
1
2
3
4
5
6
7
| // var의 호이스팅
console.log(hoistedVar); // undefined
var hoistedVar = "값";
// let과 const는 TDZ(Temporal Dead Zone) 적용
// console.log(letVar); // 에러!
let letVar = "값";
|
6. 변수 네이밍 컨벤션
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| // 1. 카멜 케이스 (일반적인 변수/함수명)
let userName = "Kim";
let firstName = "Chuck";
// 2. 파스칼 케이스 (클래스명)
class UserProfile {
constructor() {
this.name = "Kim";
}
}
// 3. 스네이크 케이스
let user_age = 25;
// 4. 상수는 대문자와 언더스코어
const MAX_SIZE = 100;
const API_KEY = "abc123";
|
7. 변수의 생명주기
1
2
3
4
5
6
7
8
9
10
11
12
| function lifecycle() {
// 1. 변수 선언
let temp;
// 2. 초기화
temp = "Hello";
// 3. 사용
console.log(temp);
// 4. 블록 스코프 종료시 메모리에서 해제
}
|
8. 실제 활용 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| // 사용자 정보 관리
const userInfo = {
name: "Kim",
age: 25,
isAdmin: false,
};
// 설정 관리
let appSettings = {
theme: "dark",
fontSize: 16,
language: "ko",
};
// 상태 관리
let isLoading = false;
let currentPage = 1;
let errorMessage = null;
// 임시 데이터 저장
let tempData = [];
function processData(data) {
tempData = [...data]; // 데이터 임시 저장
// 처리 로직...
}
|
9. 주의사항
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // 1. const로 선언한 객체의 속성은 변경 가능
const user = {
name: "Kim",
};
user.name = "Lee"; // 가능
// user = {}; // 에러!
// 2. 변수 재선언 불가 (let, const)
let x = 1;
// let x = 2; // 에러!
// 3. 블록 스코프 이해
{
let blockScoped = "안녕";
}
// console.log(blockScoped); // 에러!
|
이러한 변수의 특성들을 잘 이해하고 활용하면:
- 코드의 가독성이 향상됩니다.
- 버그 발생 가능성이 줄어듭니다.
- 메모리를 효율적으로 관리할 수 있습니다.
- 유지보수가 용이해집니다.
변수는 프로그래밍의 기초이므로, 이러한 개념들을 잘 숙지하시면 좋습니다! 👍