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

안전하게 객체에 deep하게 접근하기 위해 현업에서 &&연산자를 활용하여 접근했었다. 편하긴한데, 자주 사용하다보면 이게 꽤 지저분하게 보이는것을 확인할 수 있었다. 그래서 Optional Chaining 연산자를 활용해보며 조금 깔끔하게 사용하는 방법에 대해 공유를 합니다. 임직원 객체에 대한 정보가 아래와 같습니다. 예를들어 emp안에 info라는 객체 안에 job이라는 객체 안에 "pay"라는 값에 대해서 가져오고싶다고 가정합니다. const emp = { name: 'kim', info: { empNo: 1001, job: { position: 'FE-Dev', pay: 1234 }, }, }; 1. && 연산자 아래는 &&연산자를 활용하여 접근했습니다. 이렇게 접근하다보면 .으로 접근하여 같은 ..

병합 연산자란 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..