Frontend Dev/JavaScript (17) 썸네일형 리스트형 고차 함수(higher order function)란 무엇일까? 👾 고차함수(higher order function)란? 고차 함수는 ① 함수를 전달인자(argument)로 받을 수 있고, ② 함수를 리턴할 수 있는 함수이다. ✔️ 1. 다른 함수를 인자로 받는 경우 다른 함수(caller)의 전달인자(argument)로 전달되는 함수를 콜백함수라고 한다. 콜백함수는 주로 어떤 작업이 완료되었을 때 호출하는 경우가 많다. 콜백 함수를 전달받은 고차 함수(caller)는, 함수 내부에서 이 콜백 함수를 호출(invoke)할 수 있고, 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있다. 아예 호출하지 않을 수도 있고, 여러 번 실행할 수도 있다. function double(num) { return num * 2; } // doubleNum은 다른 함수를 인자로 받.. 간단하게 알아보는 Fetch API 👾 Fetch API 자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공한다. Fetch API가 제공하는 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수 있다. (이전에는 XMLHttpRequest를 사용했었다. Fetch는 더 좋은 대체제이다.) Fetch API는 Request와 Response 객체, 그리고 기타 네트워크 요청에 관련된 것들을 사용하고, CORS와 HTTP Origin 헤더 행동 등 관련한 개념도 포함한다. fetch() 메서드는 하나의 필수 매개변수로 가져오려는 리소스 경로를 받는다. 반환 값은 해당 요청에 대한 Respo.. ES8, 비동기 처리를 위한 async / await 기본 문법 async/await 문법은 ES8에 해당하는 문법으로서, Promise 를 더욱 쉽게 사용 할 수 있게 해준다. ⬇︎ 프로미스는 아래 글 참고 ES6, 비동기 처리를 위한 프로미스 (Promise) 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여 fay-story.com async 함수에는 await연산자가 포함될 수 있으며, await는 async 함수의 실행을 일시 중지하고 전달 된 Promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환한다. async 함수는 항상 promise를 반환한다. 만약 async 함수의 반환값이 명시.. ES6, 비동기 처리를 위한 프로미스 (Promise) 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 👾 Promise Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체로, 기본적으로 Promise는 함수에 콜백을 전달하는 대신에, 콜백을 첨부하는 방식의 객체이다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 다만.. 자바스크립트의 프로토타입 (prototype) 자바스크립트와 프로토타입 자바스크립트는 프로토타입 기반 언어(prototype-based-language)로, 프로토타입은 원형 객체를 의미한다. 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미이다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지이다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이다. Java, C++ 과 같은 클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성한다. 하지만 프로토타입.. ES6, 자바스크립트의 클래스(class) 기본 문법과 클래스 상속 객체 지향 프로그래밍과 클래스 객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴이다. → 청사진을 클래스(class) → 청사진을 바탕으로 한 객체를 인스턴스 객체(instance object) 라고 부른다. 📌 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메서드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. 📌 자바스크립트에서 클래스는 함수의 한 종류로 기존 prototype 기반 패턴의 syntactic sugar(기존 문법을 쉽게 읽을 수 있게 만든 문법)이다. 💬 클래스는 ES6에서 추가된 문법으로, ES6 이전에는 클래스를 어떤.. 자바스크립트와 객체 지향 프로그래밍 (Object Oriented Programming) 👾 객체 지향 프로그래밍 (OOP) 이란? Java, C++, C# 등 현대의 언어들은 대부분 객체지향 프로그래밍을 지원한다. 객체지향 프로그래밍은 실세계에 존재하고 인지하고 있는 객체(Object)를 소프트웨어의 세계에서 표현하기 위해 객체의 핵심적인 개념 또는 기능만을 추출하는 추상화(abstraction)를 통해 모델링하려는 프로그래밍 패러다임을 말한다. 객체지향 프로그래밍은 함수들의 집합 혹은 단순한 컴퓨터의 명령어들의 목록이라는 전통적인 절차지향 프로그래밍과는 다른, 관계성있는 객체들의 집합이라는 관점으로 접근하는 소프트웨어 디자인으로 볼 수 있다. → 단순히 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어, 데이터의 접근과 데이터의 처리 과정에 대한 모형을 만들어 내는 방식으로 데이터와 기.. 디폴트 매개변수와 나머지 매개변수 (with arguments 객체) 디폴트 매개변수(default parameter)와 나머지 매개변수(rest parameter)는 ECMAScript 6부터 추가되었다. 이전 버전의 자바스크립트에서는 함수에서 매개변수의 개수를 동적으로 처리하기 위해 arguments 객체를 사용해야 했지만, ECMAScript 6부터는 나머지 매개변수를 사용해 인수를 배열 형태로 전달하는 것을 권장한다. 👾 디폴트 매개변수(default parameter) 디폴트 매개변수란 함수를 호출할 때 명시된 인수를 전달하지 않았을 경우에 사용하게 될 기본값이다. 자바스크립트에서 함수 호출 시 매개변수에 인수를 전달하지 않으면 그 값은 undefined 이 된다. 매개변수에 값을 전달하지 않아도 그 값이 undefined 가 되지 않게 하려면 함수를 선언할 때 .. 이전 1 2 3 다음
