반응형
1.1 변수 선언 (var, let, const)
var a = 10; // 함수 스코프, 재선언 가능 (사용 x)
let b = 20; // 블록 스코프, 재할당 가능
const c = 30; // 블록 스코프, 재할당 불가능
권장: let과 const 사용! (var는 호이스팅 문제로 비권장)
var 의문제점 • 중간에 같은 이름의 변수를 다시 선언해도 기존의 변수에 덮어 씌움
• 그리고 변수가{블록단위} 에서 끝나는 것이 아니라, 자기 맘대로 전역으로 돌아다니고 영향력을 행사함 → 의도치 않은 문제발생!
• 따라서 ES6 문법부터는 var대신 let, const 사용을 하시는 편이 좋습니당
const와 let은 모두 변수를 선언할 때 사용하지만, 중요한 차이점이 있음
const vs let 차이점 요약
키워드 재할당 가능 여부 재선언 가능 여부 블록 범위(scope)
| const | ❌ (불가능) | ❌ (불가능) | ✅ (블록 범위) |
| let | ✅ (가능) | ❌ (불가능) | ✅ (블록 범위) |
1. const는 재할당 불가능 ❌
const PI = 3.14;
console.log(PI); // 3.14
PI = 3.1415; // ❌ TypeError: Assignment to constant variable.
const로 선언한 변수는 값을 변경할 수 없음 XXXXXXXX!
2. let은 재할당 가능
let age = 25;
console.log(age); // 25
age = 30; // ✅ 가능
console.log(age); // 30
let은 변수를 선언한 후 값을 변경할 수 있음 OOOOOOOOO!
3. const는 선언과 동시에 초기화해야 함
const name; // ❌ SyntaxError: Missing initializer in const declaration
name = "Alice";
const는 반드시 선언과 동시에 값을 할당해야 함
4. const로 선언한 객체와 배열은 내부 값 변경 가능
const는 변수 자체를 변경할 수 없지만, 객체나 배열 내부 값은 변경 가능!
const person = { name: "John", age: 25 };
person.age = 30; // ✅ 가능 (객체 속성 변경)
console.log(person); // { name: "John", age: 30 }
person = { name: "Alice", age: 20 }; // ❌ TypeError: Assignment to constant variable.
객체의 속성 변경은 가능하지만, 새로운 객체 할당은 불가능!
5. let과 const는 블록 스코프를 가짐
if (true) {
let x = 10;
const y = 20;
}
console.log(x); // ❌ ReferenceError: x is not defined
console.log(y); // ❌ ReferenceError: y is not defined
let과 const는 블록 {} 내부에서만 유효해서, 바깥에서 접근할 수 없음 XXXXXXX
언제 const와 let을 사용할까?
값을 변경하지 않을 변수 → const 사용
값을 변경할 가능성이 있는 변수 → let 사용
결론: const를 기본으로 쓰고, 변경해야 하는 경우 let을 사용하는 게 좋아용!
1.2 자료형
자료형 예시
| Number | let num = 10; |
| String | let str = "Hello"; |
| Boolean | let isTrue = true; |
| Undefined | let x; // 값 할당 안하면 undefined |
| Null | let y = null; |
| Object | let obj = {name: "Alice", age: 25}; |
| Array | let arr = [1, 2, 3]; |
1.3 연산자
연산자 설명
| + - * / % | 사칙연산 및 나머지 |
| ++ -- | 증가 / 감소 |
| == === | 값 비교 / 값 & 타입 비교 |
| != !== | 값 비교 / 값 & 타입 비교 (부정) |
| && | and |
| ? : | 삼항 연산자 |
console.log(10 == "10"); // true (값만 비교)
console.log(10 === "10"); // false (타입까지 비교)
반응형
'프론트엔드 > JavaScript' 카테고리의 다른 글
| (JavaScript) 6. ES6+ 주요 기능 정리 (0) | 2025.05.02 |
|---|---|
| (JavaScript) 5. 비동기 처리 (Async & Promise) (0) | 2025.05.01 |
| (JavaScript) 4. 배열과 객체 (0) | 2025.05.01 |
| (JavaScript) 3. 함수 (Function) (0) | 2025.05.01 |
| (JavaScript) 2. 조건문과 반복문 (0) | 2025.05.01 |