260414_강의 정리 (1. Javascript)

■ Javascript

• 웹 개발에서 널리 사용되는 언어로 비동기 처리와 유연한 객체 모델을 기반으로 동작하는 것이 특징

● 실행 방식

• 싱글 스레드(Single Thread) 언어
  • 즉, 한 번에 하나의 작업만 처리 가능
  • 비동기 처리 + 이벤트 루프 => 실제로는 여러 작업을 동시에 처리하는 것처럼 보임
  • Blocking vs Non-Blocking
    • Blocking : 작업이 끝날 때까지 다음 코드 실행 X
    • Non-Blocking : 작업을 맡기고 다음 코드 실행 O

// callback
function getUser(callback) {
  setTimeout(() => {
    const user = { id: 1, name: "Kim" };
    callback(user);
  }, 2000);
}
getUser((user) => {
  console.log("유저 정보:", user);
});

// Promise
function getUser() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = { id: 1, name: "Kim" };
      resolve(user);
    }, 2000);
  });
}

getUser()
  .then((user) => {
    console.log("유저 정보:", user);
    return user.id;
  })
  .catch((error) => {
    console.error("에러:", error);
  });

// async/await
function getUser() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ id: 1, name: "Kim" });
    }, 2000);
  });
}

async function fetchUser() {
  try {
    const user = await getUser();
    console.log("유저 정보:", user);
  } catch (error) {
    console.error("에러:", error);
  }
}

fetchUser();

 

 

● 데이터 타입

• Primitive Type (원시 타입)
  • 값 자체를 저장
  • 불변 (immutable)
  • string, number, boolean, null, undefined, symbol, bigint
• Reference Type (참조 타입)
  • 주소(참조)를 저장
  • 가변 (mutable)
  • object, array, function

 

● 함수 (Function)

• Javascript에서 함수는 1급 객체(First-class citizen)
• 변수에 할당 가능
• 함수의 인자로 전달 가능
• 함수의 반환값으로 사용 가능

// 일반 함수
const greet = function (name) {
  return `안녕하세요, ${name}님`;
};

// 화살표 함수
const arrow = (name) => {
  return `안녕하세요, ${name}님`;
};

console.log(greet("철수"));
console.log(arrow("영희"));

• 콜백 함수
  • 다른 함수의 인자로 전달되는 함수
  • 즉, 언제 실행할지 모를 때를 위해 사용 (필요할 때 호출해서 실행)
  • 이벤트 처리, 비동기 처리

// 언제 클릭될지 모름
button.addEventListener("click", () => {
  console.log("클릭됨");
});

// or

function greet(name, callback) {
  console.log("안녕하세요 " + name);
  callback(); // 나중에 실행됨
}

function sayBye() {
  console.log("안녕히 가세요");
}

greet("철수", sayBye);

 

 

● 객체와 클래스

• Javascript는 프로토타입 기반 언어
• new
  • 새로운 객체 생성
  • this 바인딩
  • prototype 연결

class Member {
  constructor(name, city, role) {
    this.name = name;
    this.city = city;
    this.role = role;
  }

  getIntroduction() {
    return `안녕하세요, ${this.city}에 사는 ${this.name}(${this.role})입니다.`;
  }
}

const newMember = new Member("홍길동", "부산", "관리자");

console.log(newMember.getIntroduction());

 

 

● 변수 선언

키워드	재선언	재할당	스코프
var	O	O	함수 스코프
let	X	O	블록 스코프
const	X	X	블록 스코프

• 호이스팅 (Hoisting)
  • 변수와 함수 선언이 코드 실행 전에 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상

console.log(a);
var a = 10;

 

• TDZ (Temporal Dead Zone)
  • let / const 에서 발생
  • 변수는 선언됐지만, 아직 초기화되지 않아서 접근할 수 없는 구간

// 호이스팅되어 선언은 올라가지만, 접근해서 사용은 불가능
console.log(b); // ❌ ReferenceError
let b = 10;

• Scrope (스코프)
  • Global Scope (전역 스코프)
    • 어디서든 접근 가능
  • Function Scope (함수 스코프)
    • 함수 내부에서만 접근 가능
  • Block Scope (블록 스코프)
    • {} 기준으로 범위 생성