본문 바로가기

Language

 (107)
[Javascript] async, await async, await를 사용하면 Promise의 then 함수를 체이닝 형식으로 호출하는 것보다 가독성이 좋아진다. async 함수 앞에 async를 붙이면 항상 Promise를 반환한다. async function getName() { return "Mike"; } console.log(getName()); // Promise {: "Mike"} getName().then((name) => { console.log(name); // "Mike" }); 리턴값이 프로미스이면 리턴한 프로미스를 그대로 사용한다. async function getName() { return Promise.resolve('Tom'); } getName().then((name) => { console.log(name); // ..
[Javascript] 프로미스(Promise) 상점에 가서 물건을 주문하는데 그 물건이 나올 때까지 시간이 걸린다고 가정해보자. 언제 완료되는지 알 수 없고, 물건을 만들다가 실패하는 경우도 있다. 이럴 때 소비자는 10초에 한 번씩 "다 됐나요?"라고 물어본다. 판매자는 "아니요" 또는 "다 됐습니다"라고 대답한다. 실패했다고 말하는 경우도 있다. 그러면 물건을 다시 주문해야한다. 이럴 때 상점에 주문을 하고 상품이 준비되었거나 실패되었으면 알려달라고 하면서 전화번호를 주고 나오는 게 낫다. 상품이 준비되는 동안 다른 작업도 할 수 있다. 상점은 이 번호를 기억했다가 작업이 완료되거나 실패하면 소비자에게 알려준다. 이와 같은 상황에서 사용할 수 있는 것이 Promise이다. 프로미스는 다음과 같이 사용한다. const pr = new Promise..
[Javascript] 클래스(Class) 지금까지 비슷한 형태의 객체를 생성하기 위해 생성자 함수를 사용했었다. const User = function(name, age){ this.name = name; this.age = age; this.showName = function(){ console.log(this.name); }; }; const mike = new User("Mike", 30); 클래스로도 비슷한 형태의 객체를 만들 수 있다. 클래스는 ES6에 추가된 스펙이다. class User2 { constructor(name, age){ this.name = name; this.age = age; } showName(){ console.log(this.name); } } const tom = new User2("Tom", 10); cl..
[Javascript] 상속, 프로토타입(Prototype) const user = { name : 'Mike' } user.name; // "Mike" user.hasOwnProperty('name'); // true user.hasOwnProperty('age'); // false hasOwnProperty는 자신이 프로퍼티를 가지고 있는지 확인하는 함수이다. user 객체에 name이라는 프로퍼티가 있으므로 true가 나오고, age라는 프로퍼티는 없으므로 false가 나온다. hasOwnProperty는 만든 적이 없는데 어디에 있는 것일까? __proto__라는 객체에 들어있다. 객체에서 프로퍼티를 찾으려고 하는데 없으면 여기에서 찾는다. const user = { name : 'Mike' hasOwnProperty : function(){ console..
[Javascript] call, apply, bind 함수 호출 방식과 관계없이 this를 지정할 수 있는 call, apply, bind 메서드에 대해 알아보자. call call 메서드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있다. const mike = { name : "Mike", }; const tom = { name : "Tom", }; function showThisName(){ console.log(this.name); } showThisName(); // ? showThisName 메서드를 호출했을 때 아무것도 뜨지 않는다. 여기에서 this는 window를 가리킨다. window.name이 빈 문자열이기 때문에 아무것도 뜨지 않는 것이다. showThisName.call(mike); // Mike showThi..
[Javascript] setTimeout / setInterval setTimeout : 일정 시간이 지난 후 함수를 실행 function fn(){ console.log(3) } setTimeout(fn, 3000); setTimeout은 두 개의 매개변수를 갖는다. 첫 번째는 일정 시간이 지난 뒤 실행하는 함수이고, 두 번째는 시간이다. 3000은 3초를 의미한다. setTimeout(function(){ console.log(3) }, 3000); 함수를 매개변수 안에 직접 쓰는 것도 가능하다. const tId = function showName(name){ console.log(name); } setTimeout(showName, 3000, 'Mike'); clearTimeout(tId); 함수에 인수가 필요하다면 시간 뒤에 적어준다. 'Mike'는 name에..
[Javascript] 어휘적 환경(Lexical Environment), 클로저(Closure) 어휘적 환경(Lexical Environment)let one;one = 1;function addOne(num){ console.log(one + num);}addOne(5);코드가 위에서부터 아래로 어떻게 동작하는지 알아보자.Lexical 환경one : 초기화X  사용 불가addOne : function 사용 가능프로그램이 실행되면 스크립트 내에서 선언한 변수들이 lexical 환경에 올라간다. let으로 선언한 변수는 초기화 되어 있지 않기 때문에 사용할 수 없다. 반면 함수 선언문은 바로 초기화되어 사용할 수 있다. (함수 표현식은 불가능) let one;Lexical 환경one : undefined  사용 가능addOne : function아직 할당은 안 되어 있기 때문에 undefined..
[Javascript] 나머지 매개변수(Rest parameters), 전개 구문(Spread syntax) 인수 전달 function showName(name){ console.log(name); } showName('Mike'); // 'Mike' showName('Mike', 'Tom'); // ? showName(); // undefined 자바스크립트에서 함수에 넘겨주는 인수의 개수에는 제한이 없다. 인수의 개수를 정해놓고 함수를 만들어도, 함수를 호출할 때 정확히 그 개수를 맞출 필요가 없다. 따라서 위 코드에서 에러가 발생하지 않는다. 함수의 인수를 얻는 방법은 두 가지가 있다. 1) arguments 2) 나머지 매개변수 과거에는 argument만 사용할 수 있었지만 지금은 여러 가지 장점이 있는 나머지 매개변수를 쓰는 추세이다. **화살표 함수에는 argument가 없다!! 1) argument..

티스토리툴바