본문 바로가기
개발/웹 개발

Day 18: ES6+ 필수 문법

$ecu_Log 2024. 8. 21.

1. 오늘의 학습 목표

학습 목표: 코드를 더 간결하고 읽기 쉽게 만들어주는 ES6(ECMAScript 2015) 이후의 주요 문법들을 배웁니다. 화살표 함수(Arrow Functions), 비구조화 할당(Destructuring), 그리고 코드를 파일 단위로 분리하여 재사용할 수 있게 해주는 모듈 시스템(import/export)을 익힙니다.

핵심 요약: ES6+ 문법은 이제 현대 JavaScript 개발의 표준입니다. 이 문법들을 자유자재로 사용하면 코드의 품질과 개발 생산성을 크게 향상시킬 수 있습니다.

2. 핵심 개념 파헤치기

2.1. 화살표 함수 (Arrow Functions)

function 키워드 대신 =>를 사용하여 함수를 더 간결하게 표현하는 방법입니다

기본 문법: (parameter1, parameter2) => { statements }

특징

  • 코드가 한 줄이면 {}와 return을 생략할 수 있습니다. (a, b) => a + b;
  • function 키워드로 만든 함수와 this가 가리키는 대상이 다릅니다. (화살표 함수는 자신만의 this를 갖지 않고, 자신을 감싼 상위 스코프의 this를 그대로 물려받습니다.)

2.2. 비구조화 할당 (Destructuring Assignment)

배열이나 객체의 속성을 쉽게 분해하여 개별 변수에 담을 수 있게 해주는 문법입니다. 코드의 길이를 줄이고 가독성을 높여줍니다

  • 객체 비구조화: const person = { name: 'Alice', age: 25 }; const { name, age } = person; // name='Alice', age=25
  • 배열 비구조화: const fruits = ['Apple', 'Banana']; const [first, second] = fruits; // first='Apple', second='Banana'

2.3. 모듈 시스템 (Modules: import / export)

JavaScript 코드를 여러 파일로 분리하여 관리할 수 있게 해주는 기능입니다. 이를 통해 코드의 재사용성을 높이고, 유지보수를 용이하게 만듭니다

export: 다른 파일에서 사용할 수 있도록 함수, 객체, 변수 등을 내보냅니다

  • export const name = '...'; (이름 있는 내보내기)
  • export default function() { ... } (기본 내보내기, 파일당 하나만 가능)

import: 다른 파일에서 export한 모듈을 가져옵니다

  • import { name } from './utils.js';
  • import myFunc from './utils.js';

3. 코드로 배우기

3.1. 구현 목표

사용자 정보를 다루는 간단한 코드를 ES5 방식으로 작성한 후, ES6+의 화살표 함수, 비구조화 할당, 모듈 시스템을 적용하여 리팩토링합니다.

 

3.2. [1단계: 모듈 분리를 위한 파일 준비]

두 개의 JavaScript 파일을 만듭니다. 하나는 유틸리티 함수를 담을 utils.js, 다른 하나는 메인 로직을 담을 app.js입니다

 

3.3. [2단계: utils.js 작성 (export)]

사용자 배열을 export하고, 성인인지 판별하는 함수를 화살표 함수로 만들어 export합니다

//utils.js
export const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 17 },
  { id: 3, name: 'Charlie', age: 32 }
];

//화살표 함수 사용
export const isAdult = (user) => user.age >= 19;

 

3.4. [3단계: app.js 작성 (import 및 비구조화 할당)]

utils.js에서 내보낸 users와 isAdult를 import합니다. filter와 map 메서드 안에서 비구조화 할당을 사용하여 코드를 더 간결하게 만듭니다.

//app.js
import { users, isAdult } from './utils.js';

//filter 안에서 비구조화 할당 사용
const adults = users.filter(user => isAdult(user));

//map 안에서 비구조화 할당 사용
const adultNames = adults.map(({ name }) => name);

console.log('성인 사용자 이름:', adultNames);

 

3.5. [4단계: HTML에서 모듈 로드하기]

HTML 파일에서 JavaScript를 로드할 때 <script> 태그에 type="module" 속성을 추가해야 모듈 시스템이 동작합니다.

<!-- index.html -->
<body>
  <h1>ES6+ Modules Test</h1>
  <script type="module" src="app.js"></script>
</body>

4. 전체 코드

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>ES6+ Syntax</title>
</head>
<body>
  <h1>F12를 눌러 개발자 도구 콘솔을 확인하세요.</h1>
  <!-- type="module"을 반드시 추가해야 합니다. -->
  <script type="module" src="app.js"></script>
</body>
</html>
 //utils.js
export const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 17 },
  { id: 3, name: 'Charlie', age: 32 }
];

//화살표 함수
export const isAdult = (user) => user.age >= 19;
//app.js
import { users, isAdult } from './utils.js';

console.log('--- ES6+ Syntax Test ---');

//filter를 통과한 성인 사용자들
const adults = users.filter(isAdult);

//map 안에서 객체 비구조화 할당 사용
const adultNames = adults.map(({ name, age }) => `${name} (${age}세)`);

console.log('성인 사용자 정보:', adultNames);

 

저작자표시 비영리 변경금지 (새창열림)

'개발 > 웹 개발' 카테고리의 다른 글

Day 20: React 기초 (JSX와 생명주기)  (1) 2024.08.24
Day 19: 컴포넌트 기반 아키텍처 (CBA)  (2) 2024.08.22
Day 17: JavaScript 비동기 (Async/Await)  (1) 2024.08.20
Day 16: JavaScript 비동기 (콜백과 프로미스)  (0) 2024.08.18
Day 15: JavaScript와 DOM  (2) 2024.08.14

'개발/웹 개발' 관련글

티스토리툴바