세줄코딩

null, undefined, ’‘, 0 을 손쉽게 체크하는 법~ 이래 저래 코딩을 하다보면 null, undefined 에 대한 부분을 체크하는 경우가 허다하다. 특히나 api 통신을 하다보면 해당 부분은 머 거의 달고 살 정도이다. 1. !(not) 연산자 활용 대략 다음과 같은 코딩을 주로 하게 된다. 명확해 보이기도 하다. if( testObj === null ) { // 어쩌고 저쩌고 } if( testObj === undefined ) { // 어쩌고 저쩌고 } if( testObj === '' ) { // 어쩌고 저쩌고 } if( testObj !== null ) { // 어쩌고 저쩌고 } if( testObj !== undefined ) { // 어쩌고 저쩌고 } if( testObj !=..

reduce 활용 1. 합산 const sum = [0, 1, 2, 3].reduce((acc, cur) => acc + cur); console.log("sum=", sum); // sum = 6 //initVal - 이 초기값에 따라 누적값에 대한 처리가 달라진다. //initVal - 숫자대입시 숫자 누적연산이 가능하고 배열 대입시 배열 연산처리 //initVal - 초기값이 없다면 배열의 첫번째 요소 호출 //initVal - 초기값이 설정되지 않고 배열 내부에 오브젝트로 되어 있을시엔 첫번째 오브젝트를 기준으로 // 누적연산되기에 오브젝트에 관련된 메서드등은 처리가 되지만 산술연산등은 성립되지 않으니 주의. let initVal = 0; let objToSum = [{ x: 1 }, { x: 2..

Element.matches() 프론트엔드를 하다보면 이벤트 클릭을 많이 할 수 밖에 없다. 그럴때 여러 엘리먼트가 중첩되어 있는 경우 타겟을 골라내는 역활을 해주는게 바로 이 Element.matches() 이다. https://developer.mozilla.org/en-US/docs/Web/API/Element/matches Element.matches() - Web APIs | MDN The matches() method of the Element interface tests whether the element would be selected by the specified CSS selector. developer.mozilla.org Element 인터페이스의 matches() 메서드는 요소가 ..

forEach ( javascript 반복문 ) forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않는다. arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) forEach 에서 처리 되는 매개변수 - callback 각 요소에 대해 실행할 함수. 그리고 아래는 callback 함수에서 세 가지 매개변수를 받는다. 1. currentValue : 처리할 현재 요소. 2. index : 배열 인덱스. 옵셔널 처리 되어 있기에 선언 안해도 된다. 3. array : forEach()를 호출한 배열. 옵셔널 처리 되어 있기에 선언 안해도..

for of 구문 for (variable of iterable) { statement } for...of 명령문은 반복가능한 객체 Array, Map, Set, String, TypedArray, arguments 객체 등에 대해서 반복하고 개별 속성값에 실행문이 있는 사용자 정의 루프를 생성한다. Array 예) let iterable = [10, 20, 30]; for (let value of iterable) { console.log(value); } // 10 // 20 // 30 String 예) let iterable = "boo"; for (let value of iterable) { console.log(value); } // "b" // "o" // "o" Map 예) let itera..

count rolling 아래코드는 나름 여기저기서 쓰이는 거 같아서 필받아서 함 코딩 해봤다 크로스 브라우징 및 단위테스트는 안해봤다. 그닥 최적화하기가...... 귀찮음.. 까먹을까바 걍 올려놓는다..... - html -style -javascript //jQuery 기반으로 작업했다. function DisitCal() { var _container=null; var _th=0; this.getContainer=function(){ return _container; } this.setContainer=function( cont ){ _container=$( cont ); } this.getHeight=function(){ return _th; } this.setHeight=function(th){..

코드 카피가 급 필요해서 예전에 썼었는데..... 다시 쓸 일이 있어서 코딩하려는데 생각이 안나는 ㅠㅠ 마흔이 넘으니 이젠 나의 메모리가 한계에 부딪치는.... 삽질 후 정리해 본다. HTML btn btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link 코드카피 JS let selectNodeCopy = targetEle => { //선택영역이 있다면 제거하고 시작 if (window.getSelection) { window.getSelection().removeAllRanges(); } //textarea let textAreaEle = document.getElementById("codeTextView"); // //..

디스트럭처링이란 - 객체 구조( structure )를 제거( de ) 한다는 의미가 있다. - 디스트럭처링은 객체의 구조를 분해 후 할당이나 확장과 같은 연산을 수행한다. 자료형에 따라 다음과 같은 방식으로 나뉜다. 1. 객체 디스트럭처링 2. 배열 디스트럭처링 1. 객체 디스트럭처링 - 객체 리터럴에서 변수명에 대응하는 속성값을 추출해 변수로 할당하는데 유용하다. 이렇게 객체의 속성값을 변수에 할당하는 것을 디스트럭처링 할당이라고 한다. let { id, name } = { id: 123, name:"gogo" }; console.log(id) // 123 console.log(name) // gogo 디스트럭처링 할당 표현식은 { id, name }과 같다. 디스트럭처링 할당 시 표현식 내부와 id..