concept/javascript
-
recursion (재귀함수)concept/javascript 2020. 4. 18. 01:24
정의 : The act of a function calling itself, recursion is used to solve problems that contain smaller sub-problems. A recursive function can receive two inputs: a base case (ends recursion) or a recursive case (resumes recursion). -> 함수 자기 자신을 호출하는 행위. 예제로 살펴보는 것이 빠를 것이다. 예시 1 : 팩토리얼(!) 대표적인 예제로 팩토리얼(!)이 있다. 먼저 수학에서 팩토리얼이 어떻게 작동하는지를 알아보자. 5! 의 결과는? 5부터 1사이에 있는 모든 숫자들을 곱한 결과이다. 즉, 5 * 4 * 3 * 2 * 1..
-
this / call(), apply(), bind()concept/javascript 2020. 4. 14. 18:38
this => execution context, 엄밀하게 말해서는 execution context의 구성 요소 중 하나로 함수가 실행되는 동안 이용할 수 있다. => 이 execution context는 함수 단위로만 생긴다. => 그리고 함수가 호출되었을 때만 생긴다! => 모든 함수 scope 내에서 자동으로 설정되는 특수한 식별자 간단하게 말해서 현재 실행되고 있는 문맥을 말한다. 5 Patterns of Binding 'this' 1. Global invocation : window this // global reference //-> window 2. function invocation : window function bar() { console.log(this); } bar() // -> wi..
-
동기적 호출 vs 비동기적 호출concept/javascript 2020. 4. 14. 11:31
출처: 코드스테이츠 동기적 호출은 처음 함수를 배우며, 일반적으로 사용했던 함수가 동기적 호출에 해당한다. 그리고 비동기적 호출을 배워보자. 실제로 현업에서 JavaScript 코드를 작성하다보면, 코드의 작동이 비동기로 이루어지는 경우가 대부분이다. 동기적 호출 (blocking) 비동기적 호출 (non - blocking) 전화 (하던 일을 멈추고 받아야 한다.) 문자 (확인 후, 나중에 답장할 수 있다.) 요청에 대한 결과가 동시에 일어난다. 요청에 대한 결과가 동시에 일어나지 않는다. 비동기적 호출이 효율적인 이유? 동기적 호출 비동기적 호출 장점 설계가 매우 간단하고 직관적 그 시간동안 다른 작업을 할 수 있으므로 자원의 효율적 사용이 가능 단점 결과가 주어질 때까지 아무것도 못하고 대기 코드가..
-
DOM (Document Object Model)concept/javascript 2020. 4. 11. 20:58
HTML 문서의 구조적 관계와 속성에 대한 모델 DOM 은 html 문서를 object type으로 받아와서 javascript로 활용하는 것 HTMl 문서를 대표하는 트리 구조 JavaScript에서 document 객체를 통해 전역으로 접근할 수 있음 Dom이 JavaScript 언어의 한 부분은 아님! 자바스크립트 언어를 다루게 해주는 API 이다. console.dir($0) : element에 딸려있는 각 종 속성들을 확인할 수 있음. 자주 확인하는 속성들은 아래 참고 nodeName className : class 문자열 innerText: 엘리먼트에 담긴 내용 (문자만) innerHTML : 엘리먼트에 담긴 내용 (태그포함) ⇒ 실제로 내용을 바꿀 수 있다. 태그까지 포함해서! textCon..
-
Parameterconcept/javascript 2020. 4. 2. 23:01
function timeToGoHome(speed, distance) { let time = distance / speed; return time; } timeToGoHome(20, 100); 여기서 parameter(매개변수) 는 speed와 distance arguments(전달인자) 는 20, 100 만일 전달인자의 길이가 유동적이라면? ⇒ Rest Parameter를 이용해 매개변수를 지정해 준다. (ES6) 여기서 parameter 은 array의 형태로 전달된다. (array method 사용이 가능하다는 것!) function getMaxNum(...nums){ console.log(nums); // [3,5,8,10] } getMaxNum(3,5,8,10); ⇒ arguments 라는 키워..
-
객체 지향 JavaScript (Class)concept/javascript 2020. 4. 2. 22:17
하나의 모델이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴 ES5 클래스는 함수로 정의할 수 있다. function Car (brand, name, color) { // 인스턴스가 만들어질 때 실행되는 코드 this.brand = brand; this.name = name; this.color = color; } // => 클래스 속성의 정의 Car.prototype.refuel = function() { // 연료 공급을 구현하는 코드 } Car.prototype.drive = function() { // 운전을 구현하는 코드 } // => 클래스 메소드의 정의 ES6 에서는 class 라는 키워드를 이용해서 정의할 수 있다.ES6 에..
-
Closure (클로져)concept/javascript 2020. 4. 2. 21:38
클로저 : 외부 함수의 변수에 접근할 수 있는 내부 함수 (또는 이러한 작동 원리를 일컫는 용어) 클로저 함수 안에서는 지역 변수 (innerVar), 외부 함수의 변수(outerVar), 전역 변수(GlobarVar)의 접근이 전부 가능 function outerFn(){ let outerVar = 'outer'; console.log(outerVar); function innerFn(){ let innerVar = 'inner'; console.log(innerVar); } // --> innerFn은 클로저 함수 return innerFn; } outerFn() // --> 'outer' outerFn()() // --> 'outer' 'inner' let innerFn = outerFn(); //..
-
Scope (스코프)concept/javascript 2020. 4. 2. 20:58
Global Scope VS Local Scope Local scope 안 쪽에서 선언된 변수는 Local scope 바깥 (Global scope)에서 사용할 수 없다. Javascript 에서는 함수에서만 자신만의 Scope를 가질 수 있다. (= Javascript 는 function 단위의 scope를 가진다.) 안 쪽 함수에서 바깥 함수 접근은 가능 / 바깥 함수에서 안 쪽 함수 접근은 불가능 Scope는 중첩이 가능 (함수 안에 함수 가능) Global scope는 최상단 함수로 Global variable 은 어디든 접근 가능 Local scope는 함수 내에서 Global variable 보다 더 높은 우선 순위를 가짐 let greeting = 'Hello'; function greetS..