안녕하세요. 현생을 사느라 포스팅이 조금 늦었습니다. 요즘 앱이나 웹에서 아래의 이미지와 같이 스크롤을 내리고나서 "위로가기" 버튼 많이 이용하시나요? (혹은 맨 아래로) 오늘은 간단하게 자바스크립트로 "위로가기" 버튼을 만들고자 아래의 코드를 공유합니다. const element = document.documentElement; // 스크롤 이벤트 리스너 window.addEventListener('scroll', () => { const btnStyle = document.getElementById('btn-scroll-to-top').style; // 스크롤을 했을때 100px을 초과하면 보이고 아니면 none 처리 btnStyle.display = element.scrollTop > 100 ? '..

병합 연산자란 null이나 undefined를 체크하고자 할때 사용한다. 현업에서 null이나 undefined 체크를 할때 나의 경우는 or연산자를 많이 써서 체크했었다. 하지만 숫자 0의 경우는 false로 구분하기에 자칫 실수를 할 수도 있다. ES11 문법에서 추가된 내용으로 병합 연산자를 소개하고자 한다. 첫째로 아래와 같이 변수들을 정의해 보았다. const isZero = 0; const isNull = null; const isUndefined = undefined; const isEmpty = ''; 1. OR 연산자를 쓸 경우 //# OR 연산자 const orCode1 = isZero || 'this is [Null] or [Undefined]'; const orCode2 = isNu..

Javascript 클로저란? (바로 하단의 블로그를 참고하여 정의해보면) 하단의 일반적으로 어떤 함수가 자신의 내부가 아닌 외부에서 선언된 변수에 접근하는 것이다. 이렇게 서술하면 무슨말인지 잘 모르겠다면, 더 풀어서 설명하면 정의한 함수를 리턴하고 실제 클로저의 사용은 스코프 정의한 함수를 리턴하고 사용은 밖에서 사용한다. 라고 설명하면 또 무슨소린가 와닿지 않을경우 아래와 같이 코딩을 해보았다. function getfn() { const text = 'closure!!!'; return function() { return text; }; } const closure = getfn(); console.log(closure()); // @결과 : closure!!! 위와 같이 getfn안에 funct..

오늘은 Javascript reduce에 대해서 포스팅 해봅니다. reduce 메소드는 현업에서도 종종 쓰이며, 알고리즘 꽤 많은 것을 구현할 수 있습니다. Reduce reduce에서 첫번째 인자인 누적값(accumulator)과 두번째 인자인 현재값(currentValue)을 가지고 있습니다. 보통 배열의 합을 구하거나, 특정 배열의 중복 제거, 같은 값을 찾을 때 사용할 수 있습니다. // 1. 배열의 합 const arr = [1, 7, -8, 5, 2]; //sum = 7 const result = arr.reduce((accu, curr) => { //accu : 누산값, curr 현재 누산할 값 // console.log('[accu] : ', accu, ', [curr] : ', curr,..