FE BE 개발 메모장/Javascript
비동기 처리, 콜백함수
비동기처리란? 특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고, 순차적으로 다음 코드를 먼저 실행하는 자바스크립트의 특성(싱글스레드, 콜스택). 즉, 요청을 보낸 후 응답에 관계없이 다음 동작을 실행한다. 동기와 비동기의 차이점 동기(sync): 요청을 보낸 후 해당 응답을 받아야 다음 동작을 실행한다. 비동기(async: 요청을 보낸 후 응답에 관계없이 다음 동작을 실행한다. 비동기 처리를 위해서 사용하는 메소드중 대표적인 setTimeout()이 있다. Web API의 한 종류로 코드를 바로 실행하지 않고, 지정한 시간만큼 기다렸다가 로직을 실행한다. //5초후에 console.log를 띄움 setTimeout( () => { console.log('this is timer'); }, 5..
자바스크립트 Prototype과 Instance
프로토타입 객체 프로토타입(Prototype)의 등장 일반적으로 객체를 만들어서 해당 객체를 복사하여 사용할 경우, 객체에 들어있는 프로퍼티와 함수가 복사한 객체 개수만큼 생성이 되는 매우 비효율적인 상황이 발생한다. 그래서 이 문제를 해결하기 나온 것이 프로토타입(Prototype)이다. 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이다. 클래스 기반의 객체지향 프로그래밍 언어에선 먼저 클래스를 정의하고, 인스턴스라는 객체를 생성했다. 프로토타입 기반의 객체지향 언어는 클래스(class)없이 객체를 생성이 가능하며, 자바스크립트가 해당했다.(ES6에서 class가 추가됨) 자바스크립트 Prototype 생성자 함수로 생성한 객체들이 프로퍼티와 메소드를 공유하기 위해 사용하는 객체이다. 함수만..
객체(Object)와 객체를 생성하는 방법.
객체(Object)란? 일반적인 상황에서 객체는 실제로 존재하는 사물과 그 각각 사물의 행동을 포함하는 개념이다. 자바스크립트에서는 여덟가지 자료형이 있는데, 일곱 개는 원시타입(문자열, 숫자 등....)을 제외한 다양한 데이터를 담을 수 있다. 예를 들면 서랍장이 하나있다. 서랍장 안에 각각 파일의 이름표와 파일에 담긴 내용들이 있을 것이다. 파일의 이름표는 'key', 파일 내용은 'value'로 키값 쌍으로 이루어진 프로퍼티(속성, property)들이 존재한다. 객체 생성 방법 1. Object() 생성자 함수 이용 const vrGear = new Object(); //객체 인스턴스를 생성해 objA에 담는다. vrGear.color = 'white'; vrGear.weight = '1kg'; ..
함수 메소드(call, apply, bind)
call call은 함수(Function)의 메소드이다. 이미 할당되어 있는 다른 객체의 함수나 메소드를 해당 객체에 재할당 할때 사용된다 //this가 없을 경우 Func.call(null, arg, arg1, ...) //this가 있을 경우 Func.call(this, instance1, instance2, ...) ㅣㅣㅣs let divs = document.querySelectorAll('div') //divs를 console.log로 찍어보면 NodeList라는 유사배열에 담겨 출력된다. //divs를 this로 지정하면 다음 코드는 이렇게된다. [].map.call(divs, function(el) { return el.className }) // divs는 유사배열로 map 메소드를 사용할..
window 객체와 this
window 객체 This 키워드 자바스크립트에서 this는 함수 호출(invocation)방법에 의해 결정되는 특수한 객체이다. 함수가 실행되는 맥락(execution context)에 따라 this는 다르게 결정된다. this는 메소드를 호출한 객체가 저장되어 있는 속성이다. 함수 실행의 5가지 방법 1. Global: 함수가 아닌 전역에서 this를 참조할 때를 의미한다. console.log(this) 바인딩 되는 객체: window (strict mode에서는 undefined), ex modue.exports 2.Function 호출 func() 바인딩 되는 객체: window (strict mode에서는 undefined), global 클로저 형식의 함수와 일반 함수에서 this는 wind..
자바스크립트 배열(Array)
Array 자바스크립트에서 배열은 '순서'가 있으며, 여러 객체중 특별한 형태로 취급된다. 이 배열은 수많은 데이터를 저장하고 처리하기 위함이기도 하고, 중복된 변수의 선언을 줄이기 위한 용도와 반복문을 이용해 요소들을 쉽게 처리하기 위해 사용된다. 배열은 담겨있는 각각의 값을 요소(Element)라고 하고, 그 요소의 위치를 인덱스라고 불리는 표지판이 붙어있다 arr = ['a', 'b', 'c', 'd', 'e'] index = 0 1 2 3 4 arr[0] // 0번째 요소는 'a' arr[1] // 1번째 요소는 'b' 배열생성 방법 배열 리터럴 let arr = []; let arr = ['a','b','c','d']; Array() 생성자 함수 let arr = new Array(); let ..
Array.prototype. filter, map, reduce
Array.prototype.filter() filter() 메소드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. array.filter(callback(element, idx, array), thisargs...){ statement }); . element (처리할 현재 요소) . index (처리할 현재 요소의 인덱스) . array (filter()을 호출한 배열) . thisArg (callback을 실행할 때 this로 사용되는 값) 예시)) 짝수를 필터링 const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] //[original] const filteredIsEven = arr.filter(function (el){ if(typeof(e..
함수와 고차함수
함수는 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다. 자바스크립트에서의 함수는 하나의 데이터 타입(data type)으로, 변수를 대입한다거나, 함수에 프로퍼티를 지정하는 것도 가능하다. 또한 여러번 중첩하여 고차함수로 활용할 수 있다. 함수의 정의 1. 함수이름 함수이름은 함수 내부 코드에서 자신을 재귀적으로 호출하거나, 해당 함수를 구분하는 식별자로 사용한다. 2. 괄호 안에 쉼표( , )로 구분되는 함수의 매개변수(parameter) 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 우해 사용하는 변수 3. 중괄호 { } 안에서 함수를 정의하는 자바스크립트 구문 -실행문 -반환문 return[option] : 반환문을 통해 함수의 실행된 결과를 전달받는다. 배열이나 객..