본문 바로가기
IT/Javascript

JS 기초 문법

by Cyber_ 2025. 4. 5.

1. 변수 선언

let name = "Alice"; // 변경 가능한 변수
const age = 25;  // 변경 불가능한 변수
var city = "Seoul"; // 변경 가능한 변수(구)

let: 재할당 가능 , 블록 범위
const: 재할당 불가능(상수), 블록 범위
var: 함수 범위(호이스팅 발생가능)

2. 함수

// 선언식
function sayHello(name){
     return 'Hello, ${name}!"; 
}

// 표현식
const sayBye = function(name) {
      return 'Bye, ${name}!';
}

// 화살표 함수(Arrow fuction)
const double = (x) => x * 2;

3. 조건문

1) if - else if - else

2) switch - case

4. 반복문

1) for

for (let i = 0; i < 5; i++) {
  console.log(i);
}

2) while

let j = 0;
while (j < 3) {
  console.log(j);
  j++;
}

3) for - of : 배열 요소 순회

let fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
     console.log(fruit); 
}

4) for - in (객체 키 순환)

let user = { name: "Tom", age: 30};
for (let key in user) {
    console.log(key, user[key])z
}

5. 객체(Object)

const person = {
  name: "Alice",
  age: 28,
  greet: function() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

console.log(person.name);     // "Alice"
person.greet();               // "Hi, I'm Alice"

6. 배열(Array)

const nums = [10, 20, 30];

// 요소 접근
console.log(nums[1]);   // 20

// 요소 추가/제거
nums.push(40);         // 뒤에 추가
nums.pop();            // 뒤에서 제거
nums.unshift(5);       // 앞에 추가
nums.shift();          // 앞에서 제거

// 반복/변형 메서드
nums.forEach((n) => console.log(n));
const doubled = nums.map((n) => n * 2);

7. 기타 자료구조

// Set: 중복 없는 값의 집합
const mySet = new Set([1, 2, 2, 3]);
mySet.add(4);
console.log(mySet.has(2)); // true

// Map: 키-값 쌍 저장 (객체보다 다양한 키 허용)
const myMap = new Map();
myMap.set("name", "John");
myMap.set(1, "numberKey");
console.log(myMap.get("name"));  // "John"

8. class

class Animal {
  constructor(name) { // 생성자
    this.name = name;
  }

  speak() {
    console.log(`${this.name}이(가) 소리를 냅니다.`);
  }
}

class Dog extends Animal { //extends 상속
  speak() {
    console.log(`${this.name}이(가) 멍멍 짖습니다.`);
  }
}

const myDog = new Dog("바둑이");
myDog.speak(); // 바둑이이(가) 멍멍 짖습니다.

class BankAccount {
  #balance = 0; // '#' = private

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const acc = new BankAccount();
acc.deposit(1000);
console.log(acc.getBalance()); // 1000
console.log(acc.#balance);     // ❌ SyntaxError: private 필드 접근 불가

class MathUtil {
  static add(x, y) { 
    return x + y;
  }
}

console.log(MathUtil.add(2, 3)); // 5, static은 인스턴스가 아닌 클래스 자체에서 호출

9. typeof

console.log(typeof "hello");   // "string"
console.log(typeof 42);        // "number"
console.log(typeof true);      // "boolean"
console.log(typeof null);      // "object" ← 오래된 버그
console.log(typeof undefined); // "undefined"
console.log(typeof {});        // "object"
console.log(typeof []);        // "object" (배열은 객체의 특수형)