프론트엔드/JavaScript

(JavaScript) 1. 기본 문법

그린티_ 2025. 5. 1. 21:11
반응형

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 (타입까지 비교)
반응형