본문 바로가기

JavaScript

(4)
[Javascript] falsy? 논리적 NOT(!) 은 다음과 같은 값들을 false라고 칭한다. undefined null NaN 0, -0 "", '', `` false console.log(!undefined); // true console.log(!null); // true console.log(!NaN); // true console.log(!0); // true console.log(!-0); // true console.log(!''); // true console.log(!false); // true 모두 true가 나온다는 점을 미루어 봤을 때 앞서 나열한 것들은 모두 논리적인 false 임을 알 수 있다. 따라서 undefined, null인 것들을 판별하고 싶을 때 단순히 if(!data) 이렇게 구현하는 것은 의도..
[javascript] 범위 슬라이더(range slider)와 시작, 배속, 중지 버튼 구현 시작, 배속, 중지버튼으로 컨트롤하는 범위 슬라이더를 만들어보았다. input type="range" 를 사용하였고 Vanila Js로 작성하였다. 완성한 slider는 이러하다. See the Pen CodePen JavaScript Console Template by 윤다솜 (Dasom Yun) (@datoybi) on CodePen. 요구사항 play 버튼을 클릭시 play버튼을 처음 누른 경우 버튼 명이 pause로 바뀐다. slide가 돌면서 slide value를 업데이트 해준다. span 태그 안에 값을 slide value로 바꾼다. pause에서 play를 누른경우 slider가 멈춘다. slide value가 100일 때 interval을 초기화 한다. slider value 값을 0으..
[JavaScript] 클린코드 참고자료 - 2 (객체) 객체 Object freeze 1차원적인 것만 가능 OPTIONS 같은 경우는 freeze 되지 않는다. const STATUS = Object.freeze({ PENDING: "PENDING", SUCCESS: "SUCCESS", FAIL: "FAIL", OPTIONS: { GREEN: "GREEN", RED: "RED", }, }); STATUS.PENDING = "P"; console.log(STATUS.PENDING); // PENDING - 변하지않음 STATUS.NEW_PROP = "PP"; console.log(STATUS); // {"PENDING":"PENDING","SUCCESS":"SUCCESS","FAIL":"FAIL"} - 추가되지 않음 console.log(Object.isFro..
[Javascript] IIFE (즉시 실행 함수) IIFE란? IIFE(Immediately-Invoked Function Expressions) 정의되자마자 즉시 실행되는 함수 표현식 사용이유? 전역 스코프에 불핑요한 변수의 추가를 방지하고 IIFE 내부에 다른 변수들이 접근하는것을 막을 수 있다. 즉, 데이터 프라이버시와 코드 모듈화 문법 (function() { console.log('hi IIFE') }()); (function() { console.log('hi IIFE') })(); // 화살표 함수 사용 (() => console.log('IIFE with arrow'))(); (() => { console.log('IIFE with arrow'); })(); 첫번째 괄호 : function을 감싸는 첫번째 괄호는 익명함수 임을 정의한다. ..