JavaScript 기초부터 심화까지 완벽 가이드

JavaScript의 핵심 개념부터 고급 기술까지 단계별로 학습합니다. 변수, 함수, 비동기 처리, 클로저 등 실무에서 필요한 JavaScript 개념을 실전 예제와 함께 마스터합니다.

---

---

들어가며

이 글에서는 JavaScript 기초부터 심화까지 완벽 가이드에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. 변수_선언과_스코프
2. 화살표_함수
3. 구조_분해_할당
4. 스프레드_연산자
5. Promise와_비동기_처리
6. async_await_문법
7. 클로저_Closures
8. 배열_메서드_체이닝
9. 템플릿_리터럴
10. 옵셔널_체이닝
11. Nullish_Coalescing
12. 모듈_import_export

---

1. 변수 선언과 스코프

개요

let, const, var의 차이점과 블록 스코프의 개념을 이해합니다.

코드 예제

const name = 'Alice';
let age = 25;

if (true) {
  let age = 30; // 블록 스코프
  console.log(age); // 30
}
console.log(age); // 25

설명

const는 재할당 불가, let은 블록 스코프를 가지며 var와 달리 블록 내부에서만 유효합니다.

---

2. 화살표 함수

개요

ES6의 화살표 함수 문법과 this 바인딩의 차이를 알아봅니다.

코드 예제

const multiply = (a, b) => a * b;
console.log(multiply(5, 3)); // 15

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]

설명

화살표 함수는 간결한 문법을 제공하며, 상위 스코프의 this를 자동으로 바인딩합니다.

---

3. 구조 분해 할당

개요

배열과 객체에서 값을 쉽게 추출하는 구조 분해 할당 문법입니다.

코드 예제

const user = { name: 'Bob', age: 28, city: 'Seoul' };
const { name, age } = user;

const [first, second] = [10, 20, 30];
console.log(name, age); // Bob 28
console.log(first, second); // 10 20

설명

객체나 배열의 값을 변수로 간편하게 추출할 수 있어 코드가 간결해집니다.

---

4. 스프레드 연산자

개요

배열이나 객체를 펼쳐서 복사하거나 병합하는 스프레드 연산자입니다.

코드 예제

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(arr2); // [1, 2, 3, 4, 5]

설명

...연산자로 배열과 객체를 쉽게 복사하고 병합할 수 있으며, 불변성을 유지합니다.

---

5. Promise와 비동기 처리

개요

비동기 작업을 처리하는 Promise의 기본 사용법을 배웁니다.

코드 예제

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

fetchData().then(data => console.log(data));

설명

Promise는 비동기 작업의 성공(resolve) 또는 실패(reject)를 처리하는 객체입니다.

---

6. async await 문법

개요

Promise를 더 직관적으로 사용할 수 있는 async/await 문법입니다.

코드 예제

const loadUser = async () => {
  try {
    const response = await fetch('/api/user');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
};

설명

async/await는 비동기 코드를 동기 코드처럼 작성할 수 있게 해주며, try-catch로 에러 처리가 가능합니다.

---

7. 클로저 Closures

개요

함수가 선언될 때의 환경을 기억하는 클로저의 개념입니다.

코드 예제

function makeCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

설명

내부 함수가 외부 함수의 변수에 접근할 수 있어 데이터 은닉과 상태 관리가 가능합니다.

---

8. 배열 메서드 체이닝

개요

map, filter, reduce 등 배열 메서드를 연결해서 사용하는 방법입니다.

코드 예제

const numbers = [1, 2, 3, 4, 5];
const result = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 2)
  .reduce((sum, n) => sum + n, 0);
console.log(result); // 12

설명

배열 메서드를 체이닝하면 데이터를 순차적으로 변환하고 처리할 수 있습니다.

---

9. 템플릿 리터럴

개요

백틱을 사용한 문자열 템플릿과 표현식 삽입 기능입니다.

코드 예제

const name = 'Kim';
const age = 30;
const message = `안녕하세요,
${name}님! 나이는 ${age}세입니다.
내년엔 ${age + 1}세가 되시네요.`;

console.log(message);

설명

백틱(`)으로 여러 줄 문자열을 작성하고 ${}로 변수나 표현식을 삽입할 수 있습니다.

---

10. 옵셔널 체이닝

개요

객체의 깊은 속성에 안전하게 접근하는 옵셔널 체이닝 연산자입니다.

코드 예제

const user = {
  profile: { name: 'Lee' }
};

console.log(user?.profile?.name); // Lee
console.log(user?.address?.city); // undefined
console.log(user.address.city); // Error!

설명

?.연산자로 중첩된 객체의 속성에 접근할 때 에러 없이 안전하게 처리할 수 있습니다.

---

11. Nullish Coalescing

개요

null이나 undefined일 때만 기본값을 사용하는 ?? 연산자입니다.

코드 예제

const value1 = null ?? '기본값'; // '기본값'
const value2 = 0 ?? '기본값'; // 0
const value3 = '' ?? '기본값'; // ''

console.log(value1, value2, value3);

설명

||연산자와 달리 ??는 null과 undefined만 체크하므로 0이나 빈 문자열도 유효한 값으로 처리합니다.

---

12. 모듈 import export

개요

ES6 모듈 시스템으로 코드를 분리하고 재사용하는 방법입니다.

코드 예제

// utils.js
export const add = (a, b) => a + b;
export default function multiply(a, b) {
  return a * b;
}

// main.js
import multiply, { add } from './utils.js';
console.log(add(2, 3)); // 5

설명

export로 함수나 변수를 내보내고 import로 가져와 코드를 모듈화하고 재사용성을 높입니다.

---

마치며

이번 글에서는 JavaScript 기초부터 심화까지 완벽 가이드에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#JavaScript #AsyncAwait #Closures #Promises #ES6Features