분류 전체보기 (39) 썸네일형 리스트형 6.9 call/apply와 데코레이터, 포워딩 📢 자바스크립트는 함수를 다룰 때 탁월한 유연성을 제공한다. 함수는 이곳저곳 전달될 수도 있고, 객체로도 사용될수 있다. 코드 변경 없이 캐싱 기능 추가하기 ◾️ CPU를 많이 잡아먹지만 결과는 안정적(x 가 같으면 호출결과도 같다)인 함수 slow(x) ◾️ slow(x)가 자주 호출된다면, 결과를 어딘가에 저장(캐싱)해 재연산에 걸리는 시간을 줄일 수 있다. ◾️ 래퍼 함수를 만들어 캐싱 기능을 추가한다. function slow(x) { // CPU 집약적인 작업 console.log(`slow(${x})을 호출`); return x; } function cachingDecorator (func) { let cache = new Map(); return function(x) { if (cache.h.. 6.8 setTimeout과 setInterval을 이용한 호출 스케줄링 📢 호출 스케줄링(scheduling a call) : 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출) 할 수있게 하는 것 호출 스케줄링 구현 방법 ◾️ setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법 ◾️ setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법 setTimeout ◾️ setTimeout 문법 let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...) ◾️ 매개변수 func|code : 실행하고자 하는 코드. (함수 또는 문자열 형태. 대개 함수가 들어간다) delay : 실행 전 대기 시간. 단위는 밀리초(millisecond, 1000밀리초 = 1초) 기본값 = 0 arg1.. 6.7 new Function 문법 📢 함수를 만들 수 있는 방법 중 하나 문법 ◾️ new Function 문법을 사용하면 함수를 만들 수 있다. let func = new Function ([arg1, arg2, ...argN], functionBody); ◾️ 두개의 인수를 가진 함수 let sum = new Function('a', 'b', 'return a + b'); console.log( sum(1, 2) ); // 3 ◾️ 인수가 없고 함수 본문만 있는 함수 let sayHi = new Function('console.log("Hello")'); sayHi(); // Hello ◾️ new Function을 사용해 함수를 만드는 방법의 가장 큰 차이는 런타임에 받은 문자열을 사용해 함수를 만들 수 있다. ◾️ 함수 표현식과 .. 6.6 객체로서의 함수와 기명 함수 표현식 📢 자바스크립트에서 함수는 값으로 취급된다. ◾️ 함수의 자료형은 객체이다. ◾️ 함수는 호출이 가능한(callable) 행동 객체이다. ◾️ 함수를 호출할 수도 있고, 객체처럼 함수에 프로퍼티를 추가, 제거하거나 참조를 통해 전달할 수도 있다. name 프로퍼티 ◾️ name 프로퍼티를 사용하면 함수 이름을 가져올 수 있다. function sayHi() { console.log("Hi"); } console.log(sayHi.name); //sayHi ◾️ 함수 객체에 이름을 할당해주는 로직은 익명 함수라도 자동으로 이름이 할당된다. let sayHi = function () { console.log("Hi"); } console.log(sayHi.name); // sayHi ◾️ 기본값을 사용해 이.. 6.5 전역 객체 📢 전역 객체를 사용하면 어디서나 사용 가능한 변수나 함수를 만들 수 있다. ◾️ 전역 객체는 언어 자체나 호스트 환경에 기본 내장되어 있는 경우가 많다. ◾️ 브라우저 환경 → window ◾️ Node.js 환경 → global ◾️ 전역 객체 이름의 표준화 → globalThis ◾️ 전역 객체의 모든 프로퍼티는 직접 접근할 수 있다. console.log('Hello'); // Hello window.console.log('Hello'); // Hello ◾️ 브라우저에서 let이나 const가 아닌 var로 선언한 전역 함수나 전역 변수는 전역 객체의 프로퍼티가 된다. ◾️ 권장하는 방법은 아님 var gVar = 5; console.log(window.gVar); // 5 ◾️ let을 사용하.. 6.4 오래된 'var' ⚠️ 오래된 스크립트를 읽는 데 도움을 주는 글입니다. ◾️ 변수 선언 방법 let const var ◾️ let과 const는 렉시컬 환경 측면에서 정확히 같은 방식으로 동작한다. ◾️ var는 초기 자바스크립트 구현 방식 때문에 전혀 다른 방식으로 동작한다. function sayHi () { var phrase = "Hello"; // 'let'대신 'var'를 사용해 지역 변수를 선언 console.log(phrase); //Hello } sayHi(); // Hello console.log(phrase); // Error, phrase is not defined var는 블록 스코프가 없다. ◾️ var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프이다. ◾️ 블록 기준으로 스코프가 생.. 6.3 변수의 스코프 📢 자바스크립트는 함수 지향 언어이다. 코드 블록 ◾️ 코드 블록 {...} 안에서 선언한 변수는 블록안에서만 사용할 수 있다. { let message = 'Hello'; console.log(message); // Hello } console.log(message); // ReferenceError: message is not defined ◾️ 고유한 작업을 수행하는 코드를 한데 묶는 용도로 활용할 수 있다. { let message = 'Hi'; console.log(message); // Hi } { let message = 'Hello'; console.log(message); // Hello } ⚠️ 블록이 없으면 에러가 발생할 수 있다. ◾️ 이미 선언된 변수와 동일한 이름을 가진 변수를 .. 6.2 나머지 매개변수와 전개 문법 📢 많은 자바스크립트의 내장 함수는 인수의 개수에 제약을 두지 않는다. ◾️ 임의의 수의 인수를 받는 방법 ◾️ 함수의 매개변수에 배열을 전달하는 방법 나머지 매개변수 ... ◾️ 함수 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수엔 제약이 없다. ◾️ 함수를 정의할 땐 인수를 두 개만 받도록 하고, 실제 함수를 호출할 땐 이보다 더 많은 인수를 전달했지만 에러가 발생하지 않는다. ◾️ 반환 값은 처음 두 개의 인수만을 사용해 계산된다. function sum(a, b) { return a + b; } console.log( sum(1, 2, 3, 4, 5) ); // 3 ◾️ 여분의 매개변수는 그 값들을 담을 배열 이름을 마침표 세 개 뒤에 ...붙여주면 함수 선언부에 포함시킬 수 있다. ◾️ .... 6.1 재귀와 스택 재귀(recursion) 📢 함수가 자기 자신을 호출하는 것 ◾️ 큰 목표 작업 하나를 동일하면서 간단한 작업 여러 개로 나눌 수 있을 때 유용한 프로그래밍 패턴이다. ◾️ 목표 작업을 간단한 동작 하나와 목표 작업을 변형한 작업으로 단순화 시킬 때도 재귀를 사용 ◾️ 특정 자료구조를 다뤄야 할 때도 재귀가 사용 두 가지 사고방식 ◾️ x를 n 제곱해 주는 함수 pow(x, n)을 만들어 보자 // pow 예시 pow(2, 2) = 4 pow(2, 3) = 8 pos(2, 4) = 16 1. 반복적인 사고를 통한 방법 : 🔎 for loop function pow(x, n) { let result = 1; for (let i = 0; i < n; i++) { result *= x; } return res.. 4.8 객체를 원시형으로 변환하기 1. 객체는 논리 평가 시 true를 반환한다. 따라서 객체는 숫자형이나 문자형으로만 형 변환이 일어난다. 2. 숫자형으로의 형 변환은 객체끼리 빼는 연산을 할 때나 수학 관련 함수를 적용할 때 일어난다. (객체 Date끼리 차감하면 두 날짜의 시간 차이가 반환된다.) 3. 문자형으로의 형 변환은 대게 alert(obj)같이 객체를 출력하려고 할 때 일어난다. ToPrimitive 📢 특수 객체 메서드를 사용하면 숫자형이나 문자형으로의 형 변환을 원하는 대로 조절 할 수 있다. ◾️ 객체 형 변환은 'hint'라 불리는 값을 기준으로 세 종류로 구분된다. ⚠️ hint : 목표로 하는 자료형 ◾️ hint가 string일 때 : 문자열을 기대하는 연산을 수행할 때(객체 - 문자형 변환) // 객체를 출력.. 이전 1 2 3 4 다음
