반응형 자바스크립트29 자바스크립트 - 객체 속성 기술자 (Object Property Descriptor) 자바스크립트 전체 링크 자바스크립트의 모든 객체는 자기 자신에 대한 정보를 담은 속성 기술자(Property Descriptor)를 가지고 있다. value 객체의 값 writable false라면 값 변경 불가 enumerable false라면 for in, Object.key 나열 불가 configurable false라면 속성 기술자 변경 불가 getOwnPropertyDescriptor를 통해 속성 기술자 객체를 확인해볼 수 있다. let car = { name: "tesla", color: ["red", "blue", "green"], }; console.log(Object.getOwnPropertyDescriptor(car, "name")); console.log(Object.getOwnPro.. 2021. 10. 4. 자바스크립트 - 태그드 템플릿 리터럴 (Tagged Template Literals) 자바스크립트 전체 링크 태그드 템플릿 리터럴을 이용하면, 템플릿 리터럴의 표현식을 분해할 수 있다. 다음과 같은 literal이 있다면, ABC, EFG, HIJ(,+ "")와 value1, value2, value3로 분해한다. `ABC${value1}EFG${value2}HIJ${value3}` 아래의 taggedTemplateLiterals의 str과 rest를 console로 출력해보자. taggedTemplateLiterals 뒤에 literal을 붙여주면 실행된다. function taggedTemplateLiterals(str, ...rest) { console.log(str); console.log(rest); return 0; } let value1 = 10; let value2 = "t.. 2021. 8. 20. 자바스크립트 - 자기 자신을 정의하는 함수 (Lazy Function Definition) 자바스크립트 전체 링크 자바스크립트에서 함수는 동적으로 할당할 수 있다. 이것은 자기 자신도 가능하다. 함수가 자기 자신을 재정의하면 최초로 A를 실행하고, 이후 B를 실행할 수 있다. let test = function() { console.log("hello!"); test = function() { console.log("world!"); }; }; test(); // hello! test(); // world! test(); // world! 첫 번째 test가 hello를 출력하고, test를 다시 새롭게 정의하였다. 따라서 다음부터는 world가 출력된다. 이러한 패턴을 Lazy Function Definition 이라고 한다. 이 패턴을 이용하면 초기화 준비 작업을 한 번만 수행할 수 있다... 2021. 8. 17. 자바스크립트 Symbol 자바스크립트 전체 링크 심볼(Symbol)은 유일한 토큰을 나타낼 수 있다. 심볼은 항상 유일하며, 어떤 심볼과도 일치하지 않는다. 심볼은 Symbol() 생성자로 만들 수 있다. const SYMBOL0 = Symbol(); const SYMBOL1 = Symbol("SymBol1"); const SYMBOL2 = Symbol("SymBol1"); console.log(SYMBOL0 === SYMBOL1); // false console.log(SYMBOL1 === SYMBOL2); // false console.log(SYMBOL0.description); // undefined console.log(SYMBOL1.description); // SymBol1 console.log(SYMBOL2.des.. 2021. 8. 14. 자바스크립트 async await 자바스크립트 전체 링크 프로미스 외에도 async await을 이용하면 프로미스를 반환할 수 있다. 아래의 코드를 보자. async function getData(data) { return data; } console.log(getData("test 1")); getData("test 2", 3000).then(data => console.log(data)); getData("test 3", 1000).then(data => console.log(data)); getData("test 1")이 Promise를 반환하는 것을 알 수 있다. getData가 Promise를 반환하기 때문에 then을 이용하여 반환된 값을 출력할 수 있다. await은 async 함수 내에서 사용한다. await은 프로미스의 .. 2021. 8. 3. 자바스크립트 - 시간 지연 함수 setTimeout, sleep 자바스크립트 전체 링크 setTimeout을 이용하면 함수를 X ms초 뒤에 실행할 수 있다. function show(str) { console.log(str); } setTimeout(show("test 1"), 3000); // 잘못된 사용 setTimeout(function() { show("test 2"); }, 3000); setTimeout(() => show("test 3"), 3000); 첫 번째 setTimeout은 잘못 사용한 경우다. setTimeout은 callback 함수를 받기를 원하지만, show("test 1")을 실행하여서 시작하자마자 test 1이 출력되었다. setTimeout(show("test 1"), 3000); // 잘못된 사용 따라서 아래와 같이 함수를 넘겨야.. 2021. 8. 1. 자바스크립트 프로미스 - Promise all, race 자바스크립트 전체 링크 Promise.all을 이용하면 여러 개의 프로미스를 병렬로 처리한다. 비동기 함수 간에 서로 의존성이 없는 경우 사용할 수 있다. 아래 getData는 동시에 실행된다. function getData(response, number) { return new Promise((resolve, reject) => { if(response) resolve(`resolve ${response} ${number}`); else reject(`reject ${response}`); // or reject(new Error(`reject Error! ${response}`)); }); } getData(true, 1).then(result => console.log(result)); getDat.. 2021. 7. 31. 자바스크립트 프로미스 - Promise resolve, reject 자바스크립트 전체 링크 프로미스(Promise)를 이용하면 비동기 상태의 값을 다룰 수 있다. Promise는 아래와 같이 new를 이용하여 만들 수 있다. const myPromise = new Promise((resolve, reject) => { //resolve(message or data); //reject(message or data); }); 작업이 성공한다면 resolve가 호출되고, 실패한다면 reject가 호출된다. resolve와 reject에서 받은 data 또는 message의 반환된 값을 then을 이용하여 받을 수 있다. 아래의 코드를 실행해보자. function getData(response) { return new Promise((resolve, reject) => { if.. 2021. 7. 29. 자바스크립트 - 매개변수 기본값 (Default Function Parameter) 자바스크립트 전체 링크 아래의 db에 key에 대응되는 data가 있다고 가정하자. 그리고 getData를 이용해 db의 data를 가져온다. const db = { key1: "data1", key2: "data2", key3: "data3", undefined: "data error", } function getData(key) { return db[key]; } console.log(getData("key1")); console.log(getData("key2")); console.log(getData()); console.log(getData("key3")); 세 번째의 getData에 변수를 넣지 않았으므로, key = undefined가 된다. 그래서 db["undefined"]가 호출되어 d.. 2021. 7. 26. 이전 1 2 3 4 다음 반응형
