반응형 JavaScript 최신 기능 시리즈 (ES6 이후)7 [JavaScript 최신 기능 시리즈] 7일차: JavaScript의 새로운 빌트인 객체들: Map, Set 이해하기 7. 새로 추가된 빌트인 객체들 (Map, Set 등)새로운 빌트인 객체란 무엇인가?ES6에서는 기존의 객체(Object)와 배열(Array) 외에 새로운 자료 구조인 Map과 Set을 도입했습니다. 이들은 각각 키-값 쌍과 고유한 값의 집합을 관리하는 데 유용합니다.Map 객체Map 객체는 키-값 쌍을 저장하며, 모든 데이터 유형을 키로 사용할 수 있습니다.1. Map 생성let map = new Map();2. 요소 추가map.set('name', 'Alice');map.set('age', 25);console.log(map); // 출력: Map(2) {"name" => "Alice", "age" => 25}3. 요소 접근console.log(map.get('name')); // 출력: Alic.. 2024. 8. 7. [JavaScript 최신 기능 시리즈] 6일차: JavaScript 모듈 시스템 이해하기 6. 모듈 시스템모듈 시스템이란 무엇인가?모듈 시스템은 코드의 재사용성과 유지보수성을 높이기 위해 코드를 독립적인 단위로 분리하는 방법을 제공합니다. ES6 이전에는 CommonJS와 AMD와 같은 모듈 시스템이 사용되었지만, ES6에서 표준 모듈 시스템이 도입되었습니다.ES6 모듈ES6 모듈은 import와 export 키워드를 사용하여 모듈을 정의하고 불러올 수 있습니다.1. 모듈 내보내기 (Export)모듈에서 변수, 함수, 클래스 등을 내보내기 위해 export 키워드를 사용합니다.기본 내보내기 (Default Export)모듈에서 하나의 기본 값을 내보낼 수 있습니다.// math.jsconst add = (a, b) => a + b;export default add;이름 내보내기 (Named .. 2024. 8. 6. [JavaScript 최신 기능 시리즈] 5일차: JavaScript 클래스와 상속 이해하기 5. 클래스와 상속클래스란 무엇인가?ES6에서 도입된 클래스(Class)는 JavaScript에서 객체 지향 프로그래밍(OOP)을 구현하는 새로운 방법입니다. 클래스는 프로토타입 기반 상속을 더 명확하고 간결하게 작성할 수 있게 해줍니다.클래스 선언클래스를 선언하는 방법은 다음과 같습니다.1. 기본 클래스 선언class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); }}const alice = new Person('Alice', 30);alice... 2024. 8. 5. [JavaScript 최신 기능 시리즈] 4일차: JavaScript 화살표 함수 이해하기 4. 화살표 함수화살표 함수란 무엇인가?화살표 함수(Arrow Function)는 ES6에서 도입된 새로운 함수 선언 방식으로, 보다 간결한 문법과 함께 this 바인딩의 차이를 가지고 있습니다. 화살표 함수는 특히 콜백 함수나 간단한 함수를 작성할 때 유용합니다.화살표 함수의 기본 문법화살표 함수는 function 키워드 대신 => (화살표)를 사용하여 선언합니다.1. 기본 문법// 일반 함수function add(a, b) { return a + b;}// 화살표 함수const add = (a, b) => { return a + b;};// 더 간결한 형태 (단일 표현식)const add = (a, b) => a + b;console.log(add(2, 3)); // 출력: 52. 매개변수가 하.. 2024. 8. 4. [JavaScript 최신 기능 시리즈] 3일차: JavaScript 디스트럭처링 할당 이해하기 3. 디스트럭처링 할당디스트럭처링 할당이란 무엇인가?디스트럭처링 할당(Destructuring Assignment)은 배열이나 객체의 값을 개별 변수로 쉽게 추출할 수 있게 해주는 ES6의 새로운 문법입니다. 이 문법을 사용하면 코드의 가독성과 작성 편의성이 크게 향상됩니다.배열 디스트럭처링배열 디스트럭처링을 사용하면 배열의 요소를 개별 변수에 할당할 수 있습니다.1. 기본 배열 디스트럭처링let fruits = ['Apple', 'Banana', 'Cherry'];let [a, b, c] = fruits;console.log(a); // 출력: Appleconsole.log(b); // 출력: Bananaconsole.log(c); // 출력: Cherry2. 기본값 지정배열의 요소가 없는 경우 .. 2024. 8. 3. [JavaScript 최신 기능 시리즈] 2일차: JavaScript 템플릿 리터럴 이해하기 2. 템플릿 리터럴템플릿 리터럴이란 무엇인가?템플릿 리터럴(Template Literal)은 ES6에서 도입된 새로운 문자열 표기법으로, 백틱(backtick, `)을 사용하여 문자열을 정의합니다. 템플릿 리터럴은 문자열을 더 쉽게 조작할 수 있는 기능들을 제공합니다.템플릿 리터럴의 기본 사용법템플릿 리터럴은 백틱(``)을 사용하여 문자열을 감쌉니다.let greeting = `Hello, World!`;console.log(greeting); // 출력: Hello, World!문자열 내 변수 삽입 (Interpolation)템플릿 리터럴을 사용하면 문자열 내에서 변수와 표현식을 쉽게 삽입할 수 있습니다. 변수와 표현식을 ${}로 감싸서 사용합니다.let name = 'Alice';let messag.. 2024. 8. 2. [JavaScript 최신 기능 시리즈] 1일차: JavaScript의 let과 const 키워드 이해하기 1. let과 const 키워드let과 const 키워드란 무엇인가?ES6(ECMAScript 2015)에서 도입된 let과 const 키워드는 변수를 선언하는 새로운 방법을 제공합니다. 이들은 var 키워드에 비해 몇 가지 중요한 개선 사항을 가지고 있습니다.let 키워드let 키워드는 블록 스코프를 가지며, 변수의 재할당이 가능합니다.1. 블록 스코프let으로 선언된 변수는 블록 내에서만 유효합니다.{ let x = 10; console.log(x); // 출력: 10}// console.log(x); // 오류 발생: x is not defined2. 재할당 가능let으로 선언된 변수는 값을 재할당할 수 있습니다.let y = 20;y = 30;console.log(y); // 출력: 30.. 2024. 8. 1. 이전 1 다음 반응형