ES6는 JavaScript의 중요한 업데이트로, 개발 생산성을 높이고 코드를 더 간결하고 읽기 쉽게 만드는 다양한 기능을 도입했다.1. let과 constvar 대신 블록 스코프를 가지는 변수 선언 방식이다.let: 재할당 가능const: 재할당 불가능 (상수)let a = 10;a = 20; // 가능const b = 30;b = 40; // 오류: 상수에 재할당 불가2. 화살표 함수간결한 함수 표현식으로, this는 상위 스코프를 유지한다.// 일반 함수function sum(a, b) { return a + b;}// 화살표 함수const sum = (a, b) => a + b; // 단일 표현식에서 return 생략 가능// 매개변수가 하나라면 괄호 생략 가능const square = x =>..

이 글은 제가 공부하며 정리한 내용으로, 작성 과정에서 모든 내용을 다루지 못했거나 부족한 부분이 있을 수 있으니 참고용으로 활용해 주세요. 피드백도 환영입니다! 🙌배경자바스크립트는 싱글 스레드 언어이다. 한 번에 하나의 작업만을 처리할 수 있다. 이러한 특성 때문에 네트워크 요청이나 파일 읽기와 같이 시간이 오래 걸리는 작업들은 비동기적으로 처리된다.ES6 이전의 비동기 처리실행 환경자바스크립트 코드는 브라우저나 Node.js와 같은 런타임 환경에서 실행된다. 이 환경은 크게 세 부분으로 구성된다:자바스크립트 엔진코드를 실행하고 Call Stack을 통해 함수 호출을 관리예: V8 (Chrome, Node.js), SpiderMonkey (Firefox)Web APIs브라우저에서 제공하는 비동기 작업..

Promise의 한계점ES6에서 도입된 Promise는 콜백 지옥을 해결하고 비동기 처리를 체계화했지만, 복잡한 비동기 로직을 다룰 때 여전히 한계가 있었다:then 메서드의 연속적인 체이닝으로 인한 가독성 저하복잡한 비동기 흐름에서 코드 추적의 어려움에러 처리 로직이 분산되는 문제async/await의 등장 (ES7)이러한 Promise의 한계를 극복하기 위해 ES7에서는 async/await가 도입되었다. 이를 통해 개발자는 비동기 코드를 마치 동기 코드처럼 작성할 수 있게 되었다.코드 비교 예시// 1. Promise를 사용한 비동기 처리const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { ..

JavaScript 배열 메서드 정리1. push()배열 끝에 값을 추가하고, 추가 후 배열의 길이를 반환한다.let numbers = [1, 2, 3];numbers.push(4, 5, 6); // return 6// numbers: [1, 2, 3, 4, 5, 6]2. pop()배열의 마지막 요소를 제거하고, 제거된 요소를 반환한다.let numbers = [1, 2, 3, 4];numbers.pop(); // 4 제거let removedNumber = numbers.pop(); // 33. unshift()배열의 처음에 요소를 추가하고, 추가 후 배열의 길이를 반환한다.let numbers = [2, 3, 4];numbers.unshift(1); // return 4// numbers: [1, 2,..

이 글은 제가 공부하며 정리한 내용으로, JavaScript의 비동기 처리와 Promise에 대해 간단히 설명한 글입니다. 😊비동기 처리와 Promise의 등장 배경자바스크립트의 비동기 처리는 초기에 콜백 패턴을 사용했으나, 콜백 헬(Callback Hell) 문제로 인해 코드 가독성과 유지보수가 어려웠다. 이를 해결하기 위해 ES6에서 Promise가 도입됐다.비동기 처리가 필요한 작업들Timer (setTimeout/setInterval)HTTP 요청DOM 이벤트 처리이러한 작업들은 메인 스레드와 별개로 실행되어 다른 작업을 방해하지 않고 병렬 처리가 가능하다.Promise의 구조와 특징상태(State)Promise는 다음 네 가지 상태를 가진다:pending: 초기 상태, 작업 진행 중fulfil..