본문 바로가기

JavaScript

(16)
CallBack Function 동기(synchronous) : 요청하면 바로 응답을 받는다. 비동기(asynchronous) : 요청한 내용을 언젠간 응답해 줄 것이라는 약속. 콜백함수 자바스크립트 비동기를 표현하고 관리하는 가장 일반적인 기법. Blocking Code : 콜백함수 사용하지 않는 코드 var fs = require("fs"); var data = fs.readFileSync('input.txt'); console.log(data.toString()); console.log("Program has ended"); 결과 : input.txt 파일의 내용을 다 읽어온 후 'Program has ended' 출력 Non-Blocking Code : 콜백함수 사용하는 코드 var fs = require("fs"); // re..
arrow function 더 짧은 함수와 바인딩 되지않은 this. 자바스크립트는 함수의 인자로 함수를 넣을 수 있고, 반환값으로 함수를 사용할 수 있다. 이때 arrow 함수를 사용하면 코드가 보기가 좀더 낫다. 또한 화살표 함수에는 this가 없다. 화살표 함수를 포함하는 객체 값이 사용된다. arrow function은 자신을 포함하는 외부 scope에서 this를 계승받는다. arrow function 사용법 // 기존 function var multiply= function(x){ return x*2; } // arrow function const multiply = (x) => { return x*2; } // 매개변수가 1개인 경우 소괄호 생략 가능 const multiply = x => {return x*2} //..
구조분해할당 개념 : 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식. // 배열과 객체 선언에서 분리한 할당 및 변수에 나머지 할당 var a, b, rest; [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b); // 20 ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); console.log(a); // 10 console.log(b); // ..
setTimeout(), Promise, async/await 비교 setTimeout() 예시 function testSetTimeout(callback) { console.log("1. Before callback"); setTimeout(function () { console.log("2. callback function"); if (typeof callback === "function") { callback(); } else { console.log(" Callback is not func!"); } }, 3000); console.log("3. After callback"); } (function runA() { testSetTimeout(function () { console.log(" Call about setTimeout callback func!!"); ..
클로저 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것 클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다. function outter(){ var title = 'coding everybody'; return function(){ alert(title); } } inner = outter(); inner(); 코드 설명 함수 outter를 호출하고 있다. 그 결과가 변수 inner에 담긴다. 그 결과는 이름이 없는 함수다. outter 함수는 실행이 끝났기 때문에 이 함수의 지역변수는 소멸되는 것이 자연스럽다. 하지만 함수 inner를 실행했을 때 coding everybody가 출력된 ..
JSON JSON.parse()란? parse 메소드는 string 객체를 json 객체로 변환시켜줍니다 JSON.stringify란? stringify 메소드는 json 객체를 String 객체로 변환시켜 줍니다. Reference https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON
async await callback이나 promise와 같이 비동키 코드를 작성하는 새로운 방법 Promise chain function getData() { return promise1() .then(response => { return response; }) .then(response2 => { return response2; }) .catch(err => { //TODO: error handling // 에러가 어디서 발생했는지 알기 어렵다. }); } Async / Await chain async function getData() { const response = await promise1(); const response2 = await promise2(response); return response2; } Asyn..
call(), apply(), bind() call,apply,bind는 함수의 메서드(프로퍼티)다. 즉, 함수이름.call() , 함수이름.apply() , 함수이름.bind() call() 과 apply() const obj = { name: "KimJye" }; const say = function(city) { console.log(`Hello, my name is ${this.name}, I live in ${city}`); }; say("seoul"); say.call(obj, "seoul"); say.apply(obj, ["seoul"]); 결과 Hello, my name is undefined, I live in seoul Hello, my name is KimJye, I live in seoul Hello, my name is K..