본문 바로가기

FE/javascript10

[JS] Array.prototype.sort()의 허점 06.20.20241. JavaScript Sort Method의 이상한 점JS를 쓰면서 sort를 사용해야 할 일이 있을 때 사실 빌트인 정렬 함수를 많이 쓰곤 했다.굳이 정렬 메소드를 재생성해야할 필요가 없었기 때문이다. 그런데 유데미 강의를 들으며 이상한 점을 알게되었다.["B", "C", "A"].sort();// ["A", B", "C"][6, 4, 15, 10].sort();// [10, 15, 4, 6] 자바스크립트에서는 이 코드가 동작하지 않는다는 것이다.분명 sort 메소드를 쓸 때 실행 오류를 한 번도 마주한 적이 없는데 이런 기본적인 함수에서 숫자가 정렬되지 않는다는게 믿겨지지가 않았다.2. Why?왜 자바스크립트의 정렬 함수는 숫자를 정렬하지 못하는 것일까?그 답은 공식 문서에서 찾.. 2024. 6. 20.
[JavaScript] 마이크로 태스크(Micro Task)와 매크로 태스크(Macro Task) 03.24.2024 0. Background 요즘 코딩 컨텐츠 검수 아르바이트를 하는 중인데 그 곳에서 알게된 개발자님이 컨텐츠 중 한 문제를 보내주셔서 풀어본 문제를 정리해보려 한다. 1. 코드 function a() { console.log('a1'); b(); console.log('a2'); } function b() { console.log('b1'); c(); console.log('b2'); } async function c() { console.log('c1'); setTimeout(() => console.log('setTimeout'), 0); await d(); console.log('c2'); } function d() { return new Promise(resolve => { c.. 2024. 3. 25.
[JS] Swap in JavaScript 01.04.2023 1. Temporary Variable Temp 변수를 이용하여 Swap 구현 let a = 1; let b = 2; let temp; temp = a; a = b; b = temp; console.log(a); // => 2 console.log(b); // => 1 2. Destructuring assignment (구조 분해 할당) 원래 하던 Swap에서 동등 연산자를 기준으로 괄호를 추가해주면 된다. let a = 1; let b = 2; [a, b] = [b, a]; console.log(a); // => 2 console.log(b); // => 1 꼭 양 변의 갯수가 맞지 않더라도 동작은 한다. 그러나 이 경우 주의해야 할 점이 있는데, 왼쪽항의 변수 갯수가 오른쪽 항의 .. 2024. 1. 4.
[Web] Lazy Loading이란 08.08.2023 1. Lay Loading의 탄생배경 2011년-2019년 사이 웹의 사이즈가 커지면서 필요한 assets(특히 이미지들)이 많아졌습니다. mdn web docs에 따르면 데스크탑의 경우 페이지의 평균 리소스 사이즈는 100KB~450KB에 위치하며, 그 중 이미지의 사이즈는 250KB~900KB에 해당하게 되었습니다. 이것을 해결하기위해 Lazy Loading이 등장하게 되었습니다. 2. Lazy Loading이란 Lazy Loading은 쉽게 말하면 화면에 보여지는 부분에 필요한 리소스들의 로딩을 하지 않고, 사용자가 현재 보는 부분에서 피룡한 리소스들만 로드하는 기술입니다. 더 자세히 말하자면, Critical Rerendering Path의 길이를 줄이는 것입니다. Critic.. 2023. 8. 8.
JavaScript spread 와 rest 21.02.09 1. spread spread는 원래 객체를 건드리지 않고 새로운 객체에 기존 객체의 값을 포함시킬 수 있다. Spread와 Rest 둘 다 ES6 문법이다. 1-1. 객체에 spread사용 기존 코드 const slime = { name: '슬라임' }; const cuteSlime = { name: '슬라임', attribute: 'cute' }; const purpleCuteSlime = { name: '슬라임', attribute: 'cute', color: 'purple' }; spread 사용 코드 const slime = { name: '슬라임' }; const cuteSlime = { ...slime, attribute: 'cute' }; const purpleCuteSli.. 2021. 2. 9.
JavaScript 단축 평가 논리 계산법, 비구조화 할당 21.02.04(+21.02.05) 1. 단축 평가 (short-circuit evaluation) 논리 계산법 논리 연산자를 조금 더 유용하게 사용하는 방법이다. 논리 연산자를 사용할 때, 우리는 꼭 boolean값만 사용 할 수 있는 것은 아니다. 예시. const student = { name : "빠니몽" }; function returnName(person) { if(person) return person.name; else return undefined; } console.log(returnName(student)); 위의 문장을 더 간단하게 줄일 수 있다. const student = { name : "빠니몽" }; function returnName(person) { return perso.. 2021. 2. 5.