본문 바로가기

js11

백틱 tagged templates tagged templates를 사용하면 함수의 인자를 구분지을 수 있습니다. 태그 함수의 첫번째 인자는 문자열 값의 배열이고 나머지는 인수 표현식과 관련됩니다. var person = 'Mike'; var age = 28; function myTag(strings, personExp, ageExp) { /* strings: [ "that ", " is a ", "" ] */ var str0 = strings[0]; var str1 = strings[1]; var str; ageExp > 99 ? str = 'centenarain' : str = 'youngster' return str0 + personExp + str1 + str; } var output = myTag `that ${ person } .. 2023. 5. 19.
memoize Memoize는 동일한 인수로 연산 비용이 많이 드는 루틴을 여러 번 호출하는 것을 방지하기 위해 특정 함수의 결과를 캐싱하는 용도로 사용된다. 입력 변수를 기반으로 복잡한 계산을 수행하는 함수가 있다면, 결과 값을 캐싱하고 동일한 입력값으로 여러 번 호출될 때 즉시 값을 가져올 수 있도록 memoize() 함수를 사용할 수 있다. function memoize(func) { const cache = new Map(); return function() { const key = JSON.stringify(arguments); if (cache.has(key)) { return cache.get(key); } const result = func.apply(this, arguments); cache.set(k.. 2023. 3. 22.
브라우저에서 '사이트에서 나가시겠습니까?' 표시하는 방법 window.addEventListener("beforeunload", (event) => { event.returnValue = true; }); window.onbeforeunload = () => { return true; }; 이 이벤트를 사용하면 사용자에게 실제로 페이지를 나갈것인지 묻는 alert창이 뜹니다. 확인하면 새 페이지로 이동하고 취소하면 해당 페이지에 머무릅니다. 2023. 2. 9.
JSDoc JSDoc을 사용하면 자바스크립트 소스코드에 타입 힌트를 제공할 수 있다. JSDoc 주석은 /** ... */ 사이에 기술한다. 일반적인 자바스크립트 주석 /* ... */은 무시된다. TypeScript를 사용하는 것처럼 타입을 추론하고 디버깅을 쉽게 할 수 있다는 장점이 있다. 코드에 맞는 JSDoc 태그의 사용법은 https://jsdoc.app/ 에서 볼 수 있다. 변수 /** @type {string} */ let str; /** @type {number} */ let num; /** @type {boolean} */ let bool; /** @type {*} */ let any; /** @type {?} */ let unknown; /** @type { {id: number, content:.. 2022. 8. 30.
for loop 에서 우선순위 찾기 배열에서 우선순위에 있는 요소를 찾아 리턴해주는 방법입니다. const arr1 = ["blue sea", "banana yellow", "red apple", "green wood", "white egg"]; const arr2 = ["banana yellow", "green wood", "blue sea"]; const priorityArray = ["red", "blue", "green", "yellow"]; function findPriorityElement(arr) { for (p of priorityArray) { const match = arr.find(v => v.includes(p)); if (match) { return match; } } } console.log(findPriority.. 2022. 6. 9.
더 깔끔한 조건문 사용하기 function test(fruit) { if (fruit === 'apple' || fruit === 'strawberry') { console.log('red'); } } 이러한 조건문이 있는데 여기에 조건을 더 추가를 한다면 || 를 확장하게 될겁니다. function test(fruit) { if (fruit === 'apple' || fruit === 'strawberry' || fruit === 'cherry' || fruit === 'cranberries' ) { console.log('red'); } } 이것을 Array.includes 를 사용하여 간결하게 쓸 수 있습니다. function test(fruit) { const fruitsList = ['apple', 'strawberry'.. 2022. 5. 12.