본문 바로가기
카테고리 없음

웹개발자라면 알아야할 JavaScript 문법과 활용

by 노잉맨 2025. 2. 3.

최신 JavaScript 문법과 활용

JavaScript는 계속해서 발전하고 있어요. 특히 ES6 이후로 다양한 기능이 추가되면서 코드를 더 간결하고 효율적으로 작성할 수 있게 되었죠. 이번 글에서는 최신 JavaScript 문법과 비동기 처리 방법을 쉽고 친근하게 설명해 보려고 해요.

1. ES6+ 최신 문법 정리

1.1 let과 const

기존의 var는 함수 스코프를 가지지만, let과 const는 블록 스코프를 가지기 때문에 코드의 안정성이 높아져요.

let a = 10;
a = 20; // 가능

const b = 30;
b = 40; // 오류 발생 (const는 재할당 불가)

1.2 화살표 함수 (Arrow Function)

함수를 더 간결하게 쓸 수 있는 문법이에요. 특히 this가 기존 함수와 다르게 동작해서 헷갈리지 않고 사용할 수 있어요.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

1.3 구조 분해 할당 (Destructuring)

객체나 배열에서 원하는 값을 쉽게 꺼내 쓸 수 있어요.

const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name); // Alice
console.log(age); // 25

배열에서도 같은 방식으로 값을 추출할 수 있어요.

const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first); // 1
console.log(second); // 2

1.4 전개 연산자 (Spread & Rest Operator)

배열이나 객체를 쉽게 확장하거나 합칠 수 있는 기능이에요.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

함수의 인자를 유연하게 받을 수도 있어요.

const sum = (...numbers) => numbers.reduce((acc, num) => acc + num, 0);
console.log(sum(1, 2, 3, 4)); // 10

1.5 템플릿 리터럴 (Template Literals)

문자열을 더 편하게 다룰 수 있어요.

const name = "Alice";
console.log(`Hello, ${name}!`); // Hello, Alice!

1.6 객체 리터럴 향상 (Enhanced Object Literals)

변수를 그대로 객체의 속성으로 넣을 수 있어서 코드가 더 깔끔해져요.

const age = 25;
const person = { name, age };
console.log(person); // { name: "Alice", age: 25 }

1.7 클래스 (Class)

ES6부터는 class 문법을 사용할 수 있어서 객체지향 프로그래밍이 훨씬 쉬워졌어요.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const alice = new Person("Alice", 25);
alice.greet(); // Hello, my name is Alice

1.8 모듈 (Modules: import/export)

파일을 나눠서 관리할 수 있는 기능이에요.

math.js

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

main.js

import { add, subtract } from "./math.js";
console.log(add(3, 5)); // 8

2. JavaScript 비동기 처리

비동기 처리는 네트워크 요청이나 타이머처럼 시간이 걸리는 작업을 효율적으로 다루기 위해 꼭 알아야 하는 개념이에요.

2.1 Promise

비동기 작업을 체인 형태로 처리할 수 있어요.

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve("데이터 로드 완료"), 2000);
  });
};

fetchData().then((data) => console.log(data)); // 2초 후 "데이터 로드 완료" 출력

2.2 async/await

비동기 코드를 동기 코드처럼 직관적으로 작성할 수 있어요.

const fetchData = async () => {
  const data = await fetchData();
  console.log(data);
};

fetchData();

2.3 Fetch API 활용

서버에서 데이터를 가져오는 가장 기본적인 방법이에요.

const getUser = async () => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
    const user = await response.json();
    console.log(user);
  } catch (error) {
    console.error("데이터를 가져오는 중 오류 발생", error);
  }
};

getUser();

마무리

최신 JavaScript 문법을 잘 활용하면 코드가 훨씬 깔끔하고 효율적이에요. 특히 비동기 처리를 이해하면 네트워크 요청 같은 작업을 더 효과적으로 다룰 수 있죠. 직접 코드로 연습해 보면 더 쉽게 익숙해질거예요.

티스토리툴바