본문 바로가기
반응형

분류 전체보기68

비동기 처리를 위한 Promise Promise는 JavaScript에서 비동기 처리를 다루기 위한 객체다. 비동기 작업이 완료되었거나 실패했을 때의 결과 값을 나타내는데 사용된다. Promise는 비동기 코드를 좀 더 효율적으로 다룰 수 있게 하며, 콜백 헬(callback hell)을 피할 수 있도록 도와준다. Promise는 일반적으로 세 가지 상태를 가지고 있다 1) Pending (대기): 비동기 작업이 완료되지 않은 상태. 초기 상태다. 2) Fulfilled (이행): 비동기 작업이 성공적으로 완료된 상태. 결과 값이 존재한다. 3) Rejected (거부): 비동기 작업이 실패한 상태. 실패 이유가 존재한다. const myPromise = new Promise((resolve, reject) => { // 비동기 작업 수.. 2023. 11. 25.
JavaScript에서의 비동기 처리 - async/await async와 await는 JavaScript에서 비동기 코드를 더 쉽게 다룰 수 있게 해주는 키워드다. 주로 Promise 기반의 비동기 작업을 보다 간결하고 동기적으로 보이게 작성할 수 있도록 도와준다. async와 await는 ECMAScript 2017(ES8)에서 도입되었다. 1. async async 함수는 비동기 작업을 수행하는 함수를 선언할 때 사용되며, 항상 Promise를 반환한다. 이 함수가 호출되면, 그 결과로 해결되는 Promise 객체를 얻게 된다. async function fetchData() { return 'Data Fetched!'; } fetchData().then(data => { console.log(data); // 출력: Data Fetched! }); 2. aw.. 2023. 11. 25.
Javascript 배열 순회 forEach 메서드 forEach 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 한 번씩 실행하는 메서드로 새로운 배열을 반환하지 않고, 기존 배열을 변경하지도 않는다. array.forEach(callback(currentValue, index, array)); callback : 각 요소에 대해 실행할 함수로, 세 개의 인자를 받는다. currentValue : 현재 배열의 요소. index : 현재 배열의 인덱스. array : 메서드가 호출된 배열. const numbers = [1, 2, 3, 4, 5]; // 각 요소 출력 numbers.forEach((num, index) => { console.log(`Index ${index}: ${num}`); }); // 출력: // Index 0: 1 // Ind.. 2023. 11. 21.
Javascript에서 배열을 필터링하는 filter메서드 filter 메서드는 배열의 각 요소를 평가하여 조건을 만족하는 요소들로 이루어진 새로운 배열을 반환하는 메서드이다. 주어진 조건에 따라 배열을 필터링하므로, 데이터의 조건부 추출이나 변형에 자주 활용된다. const newArray = array.filter(callback(currentValue, index, array)); callback : 각 요소에 대해 실행할 함수로, 참/거짓을 반환하는 조건을 포함한다. currentValue : 현재 배열의 요소. index : 현재 배열의 인덱스. array : 메서드가 호출된 배열. const numbers = [1, 2, 3, 4, 5]; // 짝수만 필터링 const evenNumbers = numbers.filter((num) => num % 2 .. 2023. 11. 21.
Javascript에서 배열 합성과 가공을 하는 reduce 메서드 reduce는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하면서 하나의 값을 누적하는 메서드이다. 이를 통해 배열의 요소들을 단일 값으로 축소할 수 있다. array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue); callback : 각 요소에 대해 실행할 함수로, 네 개의 인자를 받는다. accumulator : 누적된 값. currentValue : 현재 배열의 요소. currentIndex : 현재 배열의 인덱스. array : 메서드가 호출된 배열. initialValue : 누적 값의 초기값으로, 생략할 수 있다. const numbers = [1, 2, 3, 4, 5]; // 배열의 모든 요소를 .. 2023. 11. 21.
Javascript 배열 처리를 위한 메서드들 1. map 배열의 각 요소에 대해 주어진 함수를 호출하고 그 결과로 새로운 배열을 생성한다. 원본 배열은 변경되지 않으며, 새로운 배열이 반환된다. JavaScript에서 배열을 변형하거나 수정할 때 자주 사용되는 고차 함수 중 하나이다. const numbers = [1, 2, 3]; const squaredNumbers = numbers.map(num => num ** 2); console.log(squaredNumbers); // 출력: [1, 4, 9] 2. filter 주어진 함수의 조건을 만족하는 배열의 요소만으로 새로운 배열을 생성한다. const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter(num => num % 2 ===.. 2023. 11. 20.
JavaScript에서 배열 변형과 데이터 가공을 위한 map메서드 JavaScript에서 배열을 다룰 때 많은 경우에 데이터의 변형이 필요하다. 이때 사용되는 유용한 메서드 중 하나가 map()이다. map()은 기존 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새로운 배열을 생성한다. 이를 통해 코드를 간결하게 작성하고 데이터를 가공할 수 있다. const newArray = originalArray.map((currentValue, index, array) => { // 변형 또는 수정할 작업을 수행하고 반환 return transformedValue; }); - currentValue : 현재 처리 중인 요소의 값 - index : 현재 처리 중인 요소의 인덱스 - array : map을 호출한 배열 map() 메서드 활용 1) 데이터 변형 및 가공.. 2023. 11. 17.
JavaScript에서 많이 사용하는 함수들 1. setTimeout setTimeout 함수는 일정 시간이 지난 후에 한 번만 특정 함수를 실행하는 데 사용하고 함수 실행 이후에는 타이머가 해제된다. setTimeout(() => { console.log('After 1 second'); }, 1000); - 비동기 작업 후 일정 시간 동안 대기할 때. - 애니메이션 제어 및 타이밍 조절에 활용. 2. setInterval setInterval 함수는 일정한 간격으로 특정 함수를 반복해서 실행하는 데 사용되고 타이머를 해제하려면 clearInterval 함수를 사용한다. // 1초 간격으로 실행되는 함수 const intervalId = setInterval(function() { console.log('Function executed every.. 2023. 11. 17.
JavaScript에서의 함수 유형 1. 일반 함수 (Function Declarations) 함수 선언문은 function 키워드를 사용하여 정의되는 일반적인 함수이다. 주로 함수 선언문은 전역 스코프나 함수 스코프에서 사용된다. function add(a, b) { return a + b; } 2. 함수 표현식 (Function Expression) 함수가 변수에 할당되는 방식으로, 함수가 값으로 취급된다. 주로 변수에 함수를 할당하는 경우나 익명 함수를 사용할 때 주로 사용된다. 함수 표현식은 익명 함수일 수도 있고, 이름이 있는 함수일 수도 있다. const add = function(x, y) { return x + y; }; 2-1. 익명 함수 (Anonymous Function) 함수 이름이 없는 함수를 익명 함수라고 한다. .. 2023. 11. 17.
변수선언 키워드 var, let, const의 특징과 주의점 var, let, const 키워드는 변수를 선언할 때 사용되는 키워드로, 특징과 사용시의 주의점을 명확히 알고 있어야 한다. 0. 시작하기 전에 | 호이스팅(hoistion) 호이스팅은 변수 선언이 스코프 내에서 최상단으로 끌어올려지는 현상이다. | 스코프(Scope) 스코프는 변수와 함수의 유효 범위를 나타내는 개념으로, 코드 내에서 변수나 함수에 접근할 수 있는 범위를 결정하며, JavaScript에서는 크게 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나눌 수 있다. 1. var 'var'는 ES6 이전의 문법이므로 현대적인 JavaScript에서는 let과 const를 주로 사용한다. function example() { if (true) { var y = 10;.. 2023. 11. 16.
반응형

티스토리툴바