Front-end (37) 썸네일형 리스트형 [JavaScript] setTimeout과 setInterval을 이용한 호출 스케줄링 '호출 스케줄링(scheduleing a call)'이란 일정 시간이 지난 후에 원하는 함수를 예약실행 할 수 있게 하는 것. 1. setTimeout let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...) //func|code :실행하고자 하느 코드로, 함수 또는 문자열 형태. 이 자리에는 함수가 들어감 //[delay] :실행 전 대기시간으로 단위는 밀리초, 기본값은 0 // [arg1], [arg2], ... :함수에 전달될 인수들 function sayHi(who, phrase) { alert( who + ' 님, ' + phrase ); } setTimeout(sayHi, 1000, "이서영", "안녕하세요."); //1초뒤에 '이서.. [JavaScript] new Function 1. new Function new Function 문법을 사용하면 함수를 만들 수 있다. (하지만 잘 사용하는 방법이 아니며, 이 방법 외에는 대안이 없을 때 사용.) let func = new Function ([arg1, arg2, ...argN], functionBody); // 인수와 함수 본문으로 구성됨 new Function 예시 let sum = new Function('a', 'b', 'return a + b'); alert( sum(1, 2) ); // 3 // 인수가 있는 ver let sayHi = new Function('alert("Hello")'); sayHi(); // Hello // 인수가 없는 ver --> 기존의 함수 생성방법과 new Function을 사용해 함수를 만.. [JavaScript] 객체로서의 함수와 기명 함수 표현식 자바스크립트에서 함수는 값으로 취급되는데, 그렇다면 함수의 자료형은 무언인가?? --> 객체!! 함수는 호출이 가능한(callable)'행동객체'이다. 즉, 함수를 호출할 수 있을 뿐만 아니라 객체처럼 함수에 프로퍼티를 추가/제거하거나 참조를 통해 전달할 수도 있다는 뜻이다. 1. 'name'프로퍼티 'name'프로퍼티를 사용하면 함수 이름을 가져올 수 있다. function sayHi() { alert("Hi"); } alert(sayHi.name); // sayHi let sayHi = function() { alert("Hi"); }; alert(sayHi.name); // sayHi // 익명함수라도 이름이 자동으로 할당된다. 객체 메서드의 이름도 'name'프로퍼티를 이용해 가져올 수 있다. l.. [JavaScript] 전역객체 1. 전역객체 전역객체를 사용하면 어디서나 사용가능한 함수를 만들 수 있다. 브라우저 환경에선 전역객체를 window, Node.js환경에선 global이라고 부른다. //전역객체의 모든 프로퍼티는 아래와 같이 직접 접근할 수 있다.(밑의 두 코드는 동일하게 동작) alert('Hello'); window.alert('Hello'); //브라우저에서 let 이나 const가 아닌 var로 선언한 전역함수나 전역변수는 전역객체의 프로퍼티가 된다. var gVar = 5; alert(window.gVar); // 5 //let을 사용하면 전역객체를 통해 변수에 접근할 수 없다. let gLet = 5; alert(window.gLet); // undefined **중요한 변수라서 모든 곳에서 사용할 수 있게.. [JavaScript] 변수의 유효범위와 클로저 자바스크립트는 함수지향언어이다. --> 함수를 동적으로 생성할 수 있고, 생성한 함수를 다른 함수에 인수로 넘길 수 있으며, 생성된 곳이 아닌 곳에서 함수를 호출할 수도 있다. (( 변수 선언을 let, const로 했을 때를 가정함)) 1. 코드블록 코드블록 {...} 안에서 선언한 변수는 블록 안에서만 사용할 수 있다. 이런 블록의 특징은 특정 작업을 수행하는 코드를 한데 묶어두는 용도로 활용할 수 있다. (블록 안엔 작업 수행에만 필요한 변수가 들어간다.) 코드블록은 if, for, while문 등에서의 {...}블록을 모두 포함하는 말. 2. 중첩함수 함수 내부에서 선언한 함수는 '중첩(nested)' 함수라고 부른다. 중첩함수는 코드르 정돈하는데 사용할 수 있다. function makeCoun.. [JavaScript] 나머지 매개변수(...)와 스프레드 문법 상당수의 자바스크립트 내장 함수는 인수의 개수에 제약을 두지 않는다. 1. 나머지 매개변수 (...) function sum(a, b) { return a + b; } alert( sum(1, 2, 3, 4, 5) ); 뜨헉쓰🤯 함수를 정의할 땐 인수를 두개만 받고, 실제 함수를 호출할 땐 이보다 더 많은 '여분의' 인수를 전달했지만 에러가 발생하지 않는다. 다만 반환값은 처음 처음 두개의 인수만을 사용해 계산된다. 여분의 매개변수는 그 값들을 담을 배열 이름을 마침표 세 개 (...) 뒤에 붙여주면 함수 선언부에 포함시킬 수 있다. 이 때 마침표 세개는 "남아있는 매개변수들을 한데 모아 배열에 집어넣어라"는 의미임 function sumAll(...args) { let sum = 0; for (let .. [JavaScript] 재귀와 스택 (recursion & stack) 1. 재귀(recursion) 재귀는 큰 목표 작업 하나를 동일하면서 간단한 작업 어려 개로 나눌 수 있을 때 유용한 프로그래밍 패턴이다. • 목표 작업을 간단한 동작 하나와 목표 작업을 변형한 작업으로 단순화 시킬 때 • 특정 자료구조를다룰 때 사용됨. 문제 해결을 하다보면 함수에서 다른 함수를 호출해야 할 때가 있는데, 이 때 함수가 자기 자신을 호출할 때 이것을 "재귀"라고 부른다. 2. 재귀 예시 ** x를 n제곱해주는 함수 pow(x,n)을 만들 때** •for 문을 활용한 방법 function pow(x, n) { result = 1; for (let i=0; i < n; i++) { result *= x; } return result; } •재귀를 활용한 방법 function pow(x,n).. [JavaScript] 재귀함수 호출 예시 pow (2, 3)를 호출하는 순간, 실행 컨텍스트엔 변수 x = 2, n = 3이 저장되고, 실행 흐름은 함수의 첫 번째 줄에 위치합니다. 이를 도식화하면 다음과 같습니다. Context: { x: 2, n: 3, 첫 번째 줄 } pow(2, 3) 위 그림은 함수 실행이 시작되는 순간을 나타낸 것입니다. 지금 상태론 조건 n == 1을 만족하지 못하므로 실행 흐름은 if의 두 번째 분기로 넘어갑니다. function pow(x, n) { if (n == 1) { return x; } else { return x * pow(x, n - 1); } } alert( pow(2, 3) ); 변수는 동일하지만, 실행 흐름의 위치가 변경되면서 실행 컨텍스트도 다음과 같이 변경됩니다. Context: { x: 2,.. 이전 1 2 3 4 5 다음 목록 더보기
