본문 바로가기
반응형
함수형 자바스크립트 기본기 정리 함수형 자바스크립트에서의 기본기 평가란? 코드가 계산(Evaluation) 되어 값을 만드는 것 // 🌱 평가(Evaluation)하기 const log = console.log; log(1); // 1로 평가 log(1 + 2); // 3으로 평가 log(3 + 4); // 7로 평가 log([1, 2]); // 배열 [1, 2]로 평가 log([1, 2 + 3]); // 배열 [1, 5]로 평가 log([1, 2, [3, 4]]); // 배열 [1, 2, [3, 4]]로 평가 log([1, 2, ...[3, 4]]); // 배열 [1, 2, 3, 4]로 평가 일급이란? 값으로 다룰 수 있다. 변수에 담을 수 있다. 함수의 인자로 사용될 수 있다. 함수의 결과로 사용될 수 있다. // 🌱 일급이란? /.. 2021. 10. 3.
함수형과 객체지향의 다른점 데이터(객체)가 먼저? 함수가 먼저? 데이터(객체) 기준 cat.moveLeft(); cat.moveRight(); dog.moveLeft(); dog.moveRight(); 객체를 기준으로 객체가 먼저 나온다. 객체지향 프로그래밍은 데이터를 먼저 디자인한 후 그 데이터에 맞는 메서드를 만드는 방식으로 프로그래밍을 한다. 예를 들면 moveLeft()를 갖기 위해 Animal 클래스를 만든 다음 cat과 dog가 상속을 받아 메서드를 갖게 되고, 같은 규격의 객체가 된다. 함수 기준 moveLeft(dog); moveRight(cat); moveLeft({ x: 5, y: 2}); moveRight(dog); 함수를 기준으로 함수가 먼저 나온다. 함수형 프로그래밍에서는 함수를 만든 후 그 함수에 맞게 데.. 2021. 9. 22.
일급 함수 함수형 프로그래밍과 일급 함수 함수형 프로그래밍의 이점들을 활용해 로직을 구현하고, 컨셉을 이해하기 위해 일급 함수에 대해 먼저 알아보자. 자바스크립트에서 함수는 일급 함수이다. 다시 말해 함수를 값으로 다룰 수 있다는 뜻이다. 함수를 변수에 담기 // ✅ 일급 함수는 변수에 함수를 담을 수 있다. const foo = function (a) { return a * a; }; console.log(foo); // ƒ (a) { // return a * a; // } 위 예제를 보면 변수 foo에 함수를 할당하고 출력해보면 함수가 담긴 것을 확인할 수 있다. 변수를 사용하여 끝에 괄호 ()를 추가하면 함수를 호출할 수 있다. // ✅ 변수 끝에 괄호 ()를 사용해서 함수를 호출할 수 있다. const fo.. 2021. 9. 21.
순수 함수 성공적인 프로그래밍은 무엇을 의미 할까? 모든 프로그래밍 패러다임은 성공적인 프로그래밍을 위해 존재한다. 좋은 프로그램을 만드는 일은 곧 성공적인 프로그래밍을 의미한다. 좋은 프로그램은 사용성, 성능, 확장성, 기획 변경에 대한 대응력 등이 좋다. 위와 같은 사항들을 효율적이고 생산적으로 이루는 일이 성공적인 프로그래밍이다. 그 중 함수형 프로그래밍은.. 함수형 프로그래밍은 성공적인 프로그래밍을 위해 부수 효과를 최소화, 조합성을 강조하는 프로그래밍 패러다임이다. 부수 효과를 최소화 한다? -> 순수 함수를 만든다. 조합성을 강조한다? -> 모듈화 수준을 높인다. 순수 함수 순수 함수란 들어온 인자가 같다면 항상 동일한 결과를 리턴하는 함수를 뜻한다. 그리고 순수함수는 함수가 받은 인자 외에 다른 외부의.. 2021. 9. 20.
IntersectionObserver API로 TOC 만들기 IntersectionObserver API 특정 요소에 관측자(observer)를 생성해서 교차점을 관측할 수 있게 해주는 Web API이다. 따라서 클라이언트의 뷰포트(옵션 기본값)에 따라 다양한 동작을 넣을 수 있다. 이미지나 컨텐츠의 지연 로딩(lazy-loading) -> 초기 렌더링 시간 ⬇️ 사용자 경험 ⬆️ 사용자가 다른 페이지에 이동하지 않아도 되는 무한 스크롤(infinite-scroll) -> 예를 들면 유튜브, 앱 사용 시간 ⬆️ 뷰포트에 따라 애니메이션 효과 구현 -> 예를 들면 페이드인(fade-in), 페이드아웃(fade-out) 광고 수익을 계산하기 위한 용도로 광고의 가시성 보고 -> 사용자가 해당 광고를 봤는지 안봤는지 관측 나는 IntersectionObserver()로.. 2021. 9. 20.
클로저(Closure) 이해하기 클로저(Closure)란? 함수는 중첩이 가능한데, 내부 함수 객체가 생성되면 이 객체는 자신을 생성한 외부 함수에 대한 활성 객체의 참조를 가지게 된다. 이를 클로저(closure)라 한다. 즉, 클로저를 통해 내부 함수에서 외부 함수의 스코프에 접근 할 수 있다. ✅ 자바스크립트는 함수가 호출되면 활성 객체(activation object)가 만들어진다. 이것은 숨겨진 데이터 구조로써 호출된 함수의 반환 주소와 실행에 필요한 정보를 저장하고, 이를 호출된 함수에 바인딩 해준다. 렉시컬 스코핑(Lexical scoping) 이해하기 활성 객체(Activation object) 이해하기 클로저는 함수와 그 함수가 선언된 주변 객체에 대한 참조(렉시컬 환경)와의 조합이다. 렉시컬 스코핑(Lexical sc.. 2021. 9. 17.
HTTP 이해하기 나는 HTTP 통신에 대해 알고 있을까? 프로그래밍 공부를 하다보면 자주 접하는 단어지만 모호한 개념만 안 채로 찝찝하게 지나치는 경우가 있다. 그 중 하나가 HTTP이다. 그리고 내 머리는 며칠 내에 까먹을 것이 분명하다..! 어떻게 인터넷상에서 정보를 공유할 수 있을까? 🌐 당시 저는 우리가 정보를 다루는 방식에 새로운 틀을 짜보고 싶었습니다. 그래서 고안해 냈던 것이 월드와이드웹(WWW)이었죠. - Tim Berners-Lee · TED2009 HTTP(HyperText Transfer Protocol)에 대해 알기 전에 우리가 인터넷상에서 정보를 공유하는 방식에 대해 먼저 알아보자. 우리가 인터넷에 연결이 되어 있다면 웹이라는 거대한 서비스 공간에서 서로의 정보를 공유할 수 있다. 그 이유는 웹이.. 2021. 9. 13.
반응형

티스토리툴바