본문 바로가기

자바스크립트10

Javascript - async/await 자바스크립트 비동기 처리 3가지 방식자바스크립트는 싱글 스레드 프로그래밍 언어기 때문에 멀티 작업을 하기 위해선 비동기 처리 방식이 자주 쓰인다.비동기 처리는 백그라운드로 동작되기 때문에 그 결과가 언제 반환될지 알수 없어, 완료되면 결과를 받아 처리하기 위해 사용되는 대표적인 방법으로 콜백 함수(Callback) 와 이를 개선한 프로미스 객체(Promise)가 있다.하지만 서비스 규모가 커질 수록 코드가 복잡해짐에 따라 코드를 중첩해서 사용하다가 가독성이 떨어지고 유지보수가 어려워지는 상황이 발생되게 되는데, 이를 Callback Hell, Promise Hell 이라고 불리운다.  자바스크립트 async / awaitasync/await는 ES2017에 도입된 문법으로, Promise 로직을 더 쉽고.. 2024. 12. 22.
Javascript - Promise 콜백 지옥을 탈출하는 새로운 문법자바스크립트에서 '비동기 처리' 란 현재 실행중인 작업과는 별도로 다른 작업을 수행하는 것을 말한다.예를 들어 서버에서 데이터를 받아오는 작업은 시간이 걸리기 때문에 자바스크립트의 서버 호출 함수는 비동기 함수(링크)로 이루어져 있다.비동기는 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 방식이기 때문에, 만일 비동기 작업의 결과에 따라 다른 작업을 수행해야 할 때는 전통적으로 콜백 함수를 사용했다. 콜백 함수란 비동기 작업이 완료되면 호출되는 함수의 의미로서, 비동기 함수의 매개변수로 함수 객체를 넘기는 기법을 말한다. 그래서 함수 내부에서 함수 호출을 통해 비동기 작업의 결과를 받아서 인자로 주면 이를 통해 후속 처리 작업을 수행할 수 있다.. 2024. 12. 21.
Javascript - this this란?JS에서 실행 컨텍스트에 따라 다르게 바인딩되는 객체this는 함수의 블록 스코프 내에서 선언되어야 작동 cf) 실행 컨텍스트란? - 실행할 코드에 제공할 환경 정보들을 모아놓은 객체let group = { title: "1모둠", students: ["보라", "호진", "지민"], title2 : this.title, title3() { console.log(this.title) }};console.log(group.title2); //undefinedgroup.title3(); // 1모둠  this의 기본 동작 원리'this'는 함수가 호출되는 방식에 따라 다르게 동작함- 일반 함수로 호출될 때: 전역 객체를 가리킴- 메소드로 호출될 때: 해당 메소드를 호출한 객체를 가리킴 왜냐.. 2024. 12. 21.
Javascript - Array의 map, reduce, forEach, filter 메소드 array.map()- 배열(array)내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 가진 새로운 배열을 만들어냄- 쉽게 말해, 맵 메서드로 맵핑해준다(매개변수로 함수가 들어가면 callback이라 함)let numbers = [1, 4, 9]let roots = numbers.map(function(num){ return Math.squrt(num)})//roots = [1, 2, 3]//numbers = [1, 4, 9]  array.reduce()- 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고 하나의 결과값 반환- 배열 축소의 원리로 작용. 즉 여러개의 값이 담긴 배열이 줄어서 최종적으로 하나의 값으로 만드는 과정[0,1,2,3,4].reduce(function(acc.. 2024. 12. 21.