JavaScript 모던 자바스크립트의 특징

javascript

개발일지

이번 주에는 모던 자바스크립트를 학습하는 시간을 가졌습니다. 과거에 이미 자바스크립트를 학습한 경험이 있어, 이번 학습은 복습의 개념으로 접근했습니다. 기본기의 중요성을 잘 알기에, 꾸준한 학습을 통해 더욱 탄탄한 기본기를 쌓으려 합니다. 이 글에서는 모던 자바스크립트에 대해 간단히 정리해보겠습니다.

모던 자바스크립트란?

“모던 자바스크립트(Modern JavaScript)”는 최신 기능, 표준, 개발 방법론을 포함하는 자바스크립트의 현대적인 사용 방식을 가리킵니다. 이는 특정 버전의 자바스크립트를 의미하기보다는, 최신 ECMAScript(ES) 표준을 따르는 자바스크립트 코딩 스타일, 기능, 패러다임을 말합니다. 여기에는 ES6(ES2015) 이후에 도입된 여러 중요한 개선사항들이 포함됩니다.

모던 자바스크립트 주요 특징

ECMAScript 6 (ES6) 및 그 이후 버전의 도입: ES6는 2015년에 출시되어 자바스크립트에 많은 새로운 기능과 개선 사항을 가져왔습니다. 이후 버전들도 지속적으로 새로운 기능들을 추가하고 있습니다.
렛(let)과 컨스트(const)를 이용한 변수 선언: var 대신 let과 const를 사용하여 블록 스코프 변수와 상수를 선언합니다. 이는 코드의 가독성과 유지보수성을 향상시킵니다.
화살표 함수: function 키워드 대신 =>를 사용하는 간결한 함수 표현 방식입니다.
템플릿 리터럴: 백틱(`)을 사용하여 문자열을 표현하는 방식입니다. 이를 통해 멀티라인 문자열과 문자열 내 변수 삽입이 쉬워집니다.
디스트럭처링 할당: 객체나 배열로부터 속성이나 요소를 쉽게 추출하여 변수에 할당할 수 있습니다.
스프레드 연산자 (…): 배열이나 객체의 요소를 확장하거나 복사할 때 유용합니다.
기본 매개변수: 함수에서 매개변수에 기본값을 설정할 수 있습니다.
모듈 시스템 (import / export): 코드를 모듈로 분리하고 필요한 부분만 가져올 수 있게 해줍니다.
프로미스와 비동기 프로그래밍: Promise 객체를 사용하여 비동기 작업을 더욱 효율적으로 관리할 수 있으며, async와 await를 이용해 비동기 코드를 동기적으로 작성할 수 있습니다.
클래스 문법: 객체지향 프로그래밍을 위한 class 키워드를 도입하여, 생성자 함수보다 명확하고 직관적인 클래스 정의 방법을 제공합니다.
새로운 컬렉션 타입 (Map, Set 등): 전통적인 객체와 배열 외에도 데이터를 저장하고 관리하기 위한 새로운 자료 구조가 도입되었습니다.
심볼 타입: 고유하고 변경 불가능한 데이터 타입으로, 주로 객체 속성의 키로 사용됩니다.

예시

렛(let)과 콘스트(const)를 사용한 변수 선언

let은 블록 스코프 지역 변수를 선언하는데 사용되며, const는 블록 스코프 읽기 전용 상수를 선언하는데 사용됩니다.

JavaScript

let x = 10;
if (x === 10) {
  let x = 20; // 다른 변수
  console.log(x); // 20
}
console.log(x); // 10

const y = 50;
// y = 60; // 오류 발생, const는 재할당 불가

JavaScript

화살표 함수 (Arrow Functions)

간결한 문법을 가진 함수 표현 방식입니다.

JavaScript

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

JavaScript

클래스 (Classes)

자바스크립트에 전통적인 클래스 기반 개념을 도입하여 객체지향 프로그래밍을 쉽게 구현할 수 있습니다.

JavaScript

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const john = new Person('John');
john.greet(); // Hello, my name is John

JavaScript

템플릿 리터럴 (Template Literals)

백틱(“)을 사용하여 문자열을 표현하며, 내장된 표현식을 사용할 수 있습니다.

JavaScript

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

JavaScript

디스트럭처링 할당 (Destructuring Assignment)

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있습니다.

JavaScript

const obj = { a: 1, b: 2, c: 3 };
const { a, b } = obj;
console.log(a); // 1
console.log(b); // 2

const arr = [1, 2, 3];
const [x, y] = arr;
console.log(x); // 1
console.log(y); // 2

JavaScript

프로미스 (Promises)와 비동기 프로그래밍

비동기 작업을 보다 쉽게 처리할 수 있는 객체입니다. Promise는 비동기 작업이 마치면 결과값 또는 오류를 반환합니다.

JavaScript

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Success!");
  }, 1000);
});

myPromise.then((value) => {
  console.log(value); // Success!
});

JavaScript

마무리

이번 주에 모던 자바스크립트를 공부하며, 이전에 배웠던 내용들을 다시금 되새길 수 있는 좋은 기회였습니다. 모던 자바스크립트는 ES6 이후로 많은 변화와 개선을 겪었고, 이러한 변화들은 자바스크립트를 사용하는 개발자들에게 더 나은 개발 환경과 효율적인 코딩 방법을 가능하게 합니다.

let과 const를 사용한 변수 선언, 화살표 함수, 클래스 문법, 템플릿 리터럴, 디스트럭처링 할당, 프로미스와 비동기 프로그래밍 등은 모던 자바스크립트의 대표적인 특징들입니다. 이러한 기능들은 코드의 가독성과 유지보수성을 높여주며, 개발자는 보다 쉽고 효율적으로 작업할 수 있습니다.

이 글을 통해 모던 자바스크립트의 핵심적인 특징들과 그 예시들을 살펴보았습니다. 앞으로도 이러한 지식을 바탕으로 지속적인 학습과 실습을 통해 더욱 발전된 개발자가 되려 합니다. 모던 자바스크립트의 이해는 웹 개발의 현대적인 흐름을 따라가는 데 중요한 역할을 하며, 이를 통해 개발자로서의 역량을 한층 더 강화할 수 있을 것입니다.

suover