javascript
-
[JavaScript] ??=JavaScript 2023. 12. 1. 18:53
x ??= 2 ??= 코드를 처음 보았다. 추측을 하면 '아마 x가 null이나 undefined (널 병합 연산자) 면 x에 2로 할당한다는 의미이지 않을까?'는 생각이 들었고 찾아보니 내 예상이 맞았다. Nullish coalescing assignment (??=) - JavaScript | MDN The nullish coalescing assignment (??=) operator, also known as the logical nullish assignment operator, only evaluates the right operand and assigns to the left if the left operand is nullish (null or undefined). developer.moz..
-
[JavaScript] 다중 조건 정렬JavaScript 2023. 10. 12. 21:16
const array = [[3,5,4], [1,4,3], [1,2,5]] array 배열을 정렬할 때, 배열의 첫번째 값을 기준으로 오름차순 정렬을 하면 다음과 같이 할 수 있다. array.sort((a,b) => a[0]-b[0]) console.log(array) //[[1,4,3], [1,2,5], [3,5,4]] 첫번째 값이 동일할 시 두번째 값을 기준으로 정렬하고 싶을 때가 있다. 그럴 땐 간단하게 다음과 같이 할 수 있다. array.sort((a,b) => a[0]-b[0] || a[1]-b[1]) console.log(array) //[[1,2,5], [1,4,3], [3,5,4]] 앞의 연산이 0일 경우 두 값이 동일하다고 판단되어 다음 조건으로 판단된다. array.sort((a,b..
-
[JavaScript] 커링이란?JavaScript 2023. 9. 20. 00:12
커링이란? 커링이라는 단어를 처음보고 찾아보게 되었다. 만약에 function(a,b)와 같이 두 개의 매개 변수를 받는다고 가정하자. 이 함수는 매개 변수를 한 번에 받아 한 번만 호출하도록 구현됐음을 알 수 있다. 하지만 커링은 function(a)(b)처럼 인수를 하나씩 받는 방법을 의미한다. function hello(name){ return function(age){ return function(job){ return `이름: ${name}, 나이: ${age}, 직업: ${job}` } } } hello('아이유')(30)('가수') // 이름: 아이유, 나이: 30, 직업: 가수 다음과 같이 사용할 수 있다. 커링된 함수는 첫 번째 인수를 받아서 그에 따른 함수를 반환하고, 그 반환된 함수에..
-
[JavaScript] Array.fill() 사용 시 주의할 점JavaScript 2023. 8. 13. 00:44
[ [0,0,0,0], [0,0,0,0], [0,0,0,0], [0,0,0,0] ] 위와 같은 다차원 배열을 만들어야 할 때가 있었다. const board = Array.from({length: 4}).fill(Array.from({length: 4}).fill(0)) 배열을 만드는 방법은 여러가지가 있었지만 나는 위와 같이 작성했었다. 원래 Array.from()의 두번째 인자에 매핑함수를 작성했어야 했는데 작성 시에 실수로 뒤에 fill() 메서드를 붙여 작성했던 것 같다 아무튼 배열 board는 위와 같은 배열과 똑같이 만들어졌다. 이때 어느 한 요소를 변경하고 싶었다. board[0][0] = 1 // 예상 결과 [ [1,0,0,0], [0,0,0,0], [0,0,0,0], [0,0,0,0] ]..
-
[JavaScript] 조합 알고리즘 코드 이해하기JavaScript 2023. 5. 17. 19:10
const getCombinations = (arr, selectNumber) => { const results = [] if (selectNumber === 1) return arr.map((value) => [value]) arr.forEach((fixed, index, origin) => { const rest = origin.slice(index + 1) const combinations = getCombinations(rest, selectNumber - 1) const attached = combinations.map((combination) => [fixed, ...combination]) results.push(...attached) }); return results } const resu..
-
[JavaScript] Number + (undefined, null, false)와 NaNJavaScript 2023. 4. 25. 21:07
reduce를 쓰다가 특정 조건이면 falsy한 값이 되도록 falsy 한 값들을 더해보았는데 false와 null을 더하니 자바스크립트에서 임의로 0으로 평가되어 1이 나오고 undefined는 NaN이 나왔다. 아 그래서 undefined를 더하면 되겠다. 하고서 나온 결과값으로 if문을 사용하였는데 뭔가 찝찝해서 NaN에 대해서 살펴보니 NaN === false와 NaN === true가 false이고 타입은 숫자형이었다. 찾아보니 NaN은 isNaN() 메소드를 사용하여야 했다. 뭔가 알수록 굉장히 혼란스러웠다. 이렇게 사용하는 방식은 혼란을 줄 수 있어 앞으로는 NaN이 나오는 결과값에 대해서는 피하는 게 좋다고 생각하였다.
-
[Javascipt] Clipboard API 사용JavaScript 2023. 3. 4. 17:50
갈틱폰 사이트를 보면 방 입장시 브라우저 표시줄의 주소가 깔끔하다는 것을 볼 수 있다. 로비에서 초대 버튼을 누르면 아래와 같이 쿼리스트링을 통해 채널번호를 명시해둔 걸 볼 수 있다. 초대 링크를 붙여넣기 하면 /lobby로 이동하게 된다. (생각해보니 방송 스트리밍 시 주소창을 보고 방의 링크를 알 수 있는 상황이 생길 수 있는 듯) // 초대 링크 https://garticphone.com/ko/?c=채널번호 // 입장시 https://garticphone.com/ko/lobby 나는 Next.js를 사용하였기에 useRouter의 push와 replace 메소드 두번째 인수인 as를 통해 브라우저 URL 표시줄에 표시할 경로를 명시할 수 있어 /room에 입장하면 useEffect를 통해 표시줄에는..
-
[JavaScript] 특정 요소에 따른 스크롤 자동 조정 : scrollIntoView()JavaScript 2023. 1. 3. 22:49
element.scrollIntoView scrollIntoView()를 호출하면 호출된 요소가 사용자에게 보여지도록 상위 요소의 스크롤이 이동된다. element.scrollIntoView(); element.scrollIntoView(alignToTop); // Boolean 파라미터 element.scrollIntoView(scrollIntoViewOptions); // Object 파라미터 alignTop true : 상단을 기준으로 스크롤 - scrollIntoViewOptions: {block: "start", inline: "nearest"}와 동일하다. false : 하단을 기준으로 스크롤 - scrollIntoViewOptions: {block: "end", inline: "nearest..