본문 바로가기

JavaScript84

[2주차] JavaScript의 조건문과 반복문 1월 20일 자 학습 내용 정리입니다. ✅ 조건문 조건문이란 주어진 조건에 따라 결괏값을 출력하는 구문이다. 조건으로는 비교 연산자 또는 논리 연산자를 사용한다. if문 if(조건) { ... } if문에 주어진 조건이 참이라면 중괄호 안의 코드를 실행한다. 코드가 한 줄로 간단한 형식이라면 중괄호를 생략하고 작성해도 된다. if ... else문 if(조건) { ... } else { ... } if문의 조건이 참이라면 if문의 코드를 실행하고 if문의 조건이 거짓이라면 else문의 코드를 실행한다. if ... else if ... else문 if (조건) { ... } else if (조건) { ... } else { ... } 여러 개의 조건 분기를 생성할 때 사용한다. if문이 거짓이라면 다음 .. 2022. 1. 20.
[2주차] JavaScript의 연산자 1월 20일 자 학습 내용 정리입니다. ✅ 산술 연산자 산술 연산자는 두 개 이상의 값을 피연산자로 받아 하나의 값을 반환한다. 표준 산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/)가 있으며 JS는 표준 산술 연산자 외에도 나머지(%), 거듭제곱(**) 등을 제공한다. 숫자에 적용 var a = 10, b = 2; console.log(a+b); console.log(a-b); console.log(a*b); console.log(a/b); console.log(a%b); console.log(a**b); // output // 12 // 8 // 20 // 5 // 0 // 100 기본적으로 숫자에 산술 연산자를 사용한 경우 해당 연산자로 계산한 값이 반환된다. 사칙연산(+, -, .. 2022. 1. 20.
[2주차] JavaScript와 데이터 타입 1월 18일 자 학습 내용 정리입니다. ✅ JavaScript 리액트와 같은 라이브러리를 쓰지 않는 한 기본적인 웹의 구조는 HTML, CSS, JavaScript로 구성되어 있다. HTML은 웹 사이트의 구조를 만들고 CSS는 웹 사이트를 꾸며준다. 그리고 JavaScript는 이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적 웹사이트를 제작할 때 사용한다. 정리하자면 JavaScript는 웹 사이트에서 사용자와 상호작용을 하기 위해 존재한다. HTML, CSS와는 달리 JavaScript는 변수 안에 값을 저장할 수 있고 문자열을 다룰 수 있으며 이벤트를 처리할 때 사용하기도 한다. 이러한 JavaScript라는 프로그래밍 언어는 IoT, 하이브리드 앱, 서버 개발 등 다양한 곳에서 사용된다.. 2022. 1. 18.
[FP&ES6+] go, pipe, reduce에서 비동기 제어 함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 정리한 내용입니다. ✅ go, pipe, reduce에서 비동기 제어 const go = (...args) => reduce((a, f) => f(a), args); const pipe = (f, ...fs) => (...as) => go(f(...as), ...fs); const reduce = curry((f, acc, iter) => { if (!iter) { iter = acc[Symbol.iterator](); acc = iter.next().value; } else iter = iter[Symbol.iterator](); let cur; while(!(cur = iter.next()).done) { const a = cur.value.. 2022. 1. 8.
[FP&ES6+] Klesli Composition 관점에서의 Promise 함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 정리한 내용입니다. ✅ Klesli Composition 관점에서의 Promise Promise는 Klesli Composition을 지원하는 도구이다. Klesli Composition은 오류가 있을 수 있는 상황에서 함수 합성을 안전하게 하기 위한 하나의 규칙이다. 오류가 있을 수 있는 상황은 여러 가지가 있는데 들어오는 인자가 잘못된 값이라 함수에서 오류가 나는 상황과 정확한 인자가 들어왔더라도 함수가 의존하고 있는 외부의 상태에 따라 결과를 정확히 전달할 수 없는 상황이 대표적이다. Klesli Composition은 위와 같은 상황을 안전하게 해결하기 위해 존재한다. f(g(x)) = f(g(x)) f·g에 대해 수학적으로 위의 식은 .. 2022. 1. 5.
[FP&ES6+] 합성 관점에서의 Promise와 Monad 함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 정리한 내용입니다. ✅ 합성 관점에서의 Promise 결론부터 이야기하자면 Promise는 비동기 상황에서 함수 합성을 안전하게 하기 위한 도구이자 모나드이다. 함수 합성이란 f · g을 말하며 g 함수를 먼저 적용한 결괏값에 f 함수를 적용하는 것이다. x라는 값이 있다고 할 때 f · g는 f(g(x))와 같다. 연속적으로 함수가 실행되고 함수 합성을 할 때 상황에 따라 안전하게 합성할 수 있게 하기 위해 모나드라는 개념이 필요하다. 그리고 그 구현체 중 비동기 상황을 안전하게 합성하기 위해 Promise를 사용한다. 즉, Promise는 모나드의 일종이다. ✅ Monad 모나드(Monad)는 값을 담는 컨테이너의 일종이며 Functor를 .. 2022. 1. 5.
[FP&ES6+] 일급 값으로의 Promise 활용 함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 정리한 내용입니다. ✏️ 예제 const go1 = (a, f) => f(a); const add5 = (a) => a + 5; console.log(go1(10, add5)); // output // 15 go1 함수는 값과 함수를 인자로 받아 함수에 값을 적용한 결과를 단순 리턴하는 함수이다. go1 함수가 제대로 동작하려면 다음과 같은 전제 조건이 필요하다. 인자로 주어지는 함수 f가 동기적으로 동작해야 한다. 인자로 주어지는 값 a가 동기적으로 바로 값을 알 수 있는 값이어야 한다. 즉, go1 함수의 인자로 비동기 상황이 일어난 값이 아닌(Promise가 아닌) 값이 들어와야 정상적으로 원하는 결과를 얻을 수 있다. console.lo.. 2022. 1. 3.
[큐] 공주 구하기 자바스크립트 알고리즘 문제풀이 강의를 듣고 정리한 내용입니다. 📋 문제 괴물에게 잡힌 이웃나라의 공주를 구하기 위해 N명의 왕자가 나섰다. 공주를 구할 단 한 명의 왕자를 고르기 위해 왕은 다음과 같은 방법으로 공주를 구하러 갈 왕자를 고르기로 했다. 왕은 왕자들을 1부터 N까지 순서를 매겼다. 그리고 1번 왕자부터 시계방향으로 돌아가며 동그랗게 앉게 한 후 1부터 번호를 외치게 했다. 한 왕자가 특정한 숫자 K를 외치면 그 왕자는 공주를 구하러 가는 데서 제외되고 원 밖으로 나온다. 그리고 다음 왕자부터 다시 1부터 시작해 번호를 외친다. 이렇게 해서 마지막에 남은 왕자가 공주를 구하러 갈 수 있다. 예를 들어 8명의 왕자가 있고 3을 외친 왕자가 제외된다고 하면 제외되는 순서는 3, 6, 1, 5, .. 2022. 1. 3.
[FP&ES6+] callback, Promise를 이용한 비동기 동시성 프로그래밍 함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 정리한 내용입니다. ✅ callback을 이용한 비동기 동시성 프로그래밍 callback은 함수에 파라미터로 들어가는 함수이다. 코드를 순차적으로 실행하고 싶을 때 콜백 함수를 사용한다. 자바스크립트는 특성상 비동기적으로 처리되기 때문에 함수의 실행을 순차적으로 작성했다고 하더라도 이 함수들이 해당 순서대로 동작하는 것은 보장할 수 없다. 따라서 순서를 확실하게 보장하고 싶은 경우 먼저 실행할 함수에 다음 실행할 함수를 인자로 넣어 순차적으로 실행하게 하는 것이다. function add10(a, callback) { setTimeout(() => callback(a + 10), 100); } add10(5, (res) => { console... 2022. 1. 2.

티스토리툴바