Array.isArray 와 instanceof Array 지금까지 운이 좋게도.. typeof로만 연명해왔던 날들... 배열은 Array.isArray와 instanceof Array로 구분해야한다..^^.. Array.isArray console.log(Array.isArray([a,b,c]); // true instanceof Array const test = [1,2,3]; console.log(test instanceof Array) //true 이렇게 하면 된다...^^..~ Frontend/JavaScript 2023.04.28
자바스크립트 크롬 디버깅하기 오늘은 크롬으로 디버깅 하는 방법을 정리해보기로 하자 :) 1. 크롬창에서 F12 또는 commad + option + I 를 누른다. (난 그냥 F12누름ㅎ) 임시저장해놓고 쓰는중~~ Frontend/JavaScript 2023.04.10
javaScript의 this | 상황별 어디에 바인딩 될까? 1. javaScript에서 this는 다른 언어의 개념과 조금 다르다. java에서의 this는 인스턴스자신을 가리키지만, js의 this는 객체를 가리키는 키워드이다. js의 this는 함수를 호출한 방법에 의해 결정된다. 간단하게 this앞에 호출한 객체에 따라 결정이 되는것이다. 2. this바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 1 ) 전역에서의 this는 window 객체 console.log(this) console.log(this===window); 2 ) 함수내부에서 this는 window를 가리킨다. function test() { console.log(this); } test(); //window 3. this를 지정해주고싶을때 bind()를 사용 | bind는 함수에 한.. Frontend/JavaScript 2023.03.31
순수함수란 ? 요즘 함수형프로그래밍이 너무 재밌어 보인다. 그래서 책도 샀는데 아직 읽진 않았다...ㅎ.. 함수형 프로그래밍에 대해 배우기전에 간단하게 순수함수를 알아보자! 순수함수는 외부상태를 참조, 변경하면 안된다. 동일한 인자라면 항상 동일한 결과값을 리턴해야한다. 사이드이펙트를 만들면 안된다. Frontend/JavaScript 2023.03.21
두 배열간의 교집합, 차집합, 합집합, 대칭차집합 const A = [1,2,3,4,5] const B = [2,3] // 교집합 console.log(A.filter((item)=>B.includes(item))) // 차집합 console.log(A.filter((item)=>!B.includes(item))) // 합집합 console.log(A.concat(B)) console.log([...A,...B]) // 교집합을 제외한 합집합 : 대칭 차집합 console.log(A.filter((item)=>!B.includes(item)).concat(B.filter((item)=>!A.includes(item)))) 1. 교집합은 Includes로 찾아준다. 2. 차집합은 반대로 배열 앞에 ! 를 붙여주면 된다 3. 대칭차집합은 각각의 차집합들을 .. Frontend/JavaScript 2023.02.06
정수인지 확인하고 싶을때 Number.isInteger(n) 을 사용하면 된다 ~~ :) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger Number.isInteger() - JavaScript | MDN Number.isInteger() 메서드는 주어진 값이 정수인지 판별합니다. developer.mozilla.org Frontend/JavaScript 2023.02.06
문자열로 구성된 배열을 숫자타입으로 변경하기 const test = ["1","2","3","4"] const result = test.map(Number); console.log(result); //[1, 2, 3, 4] map(Number)라는 방법이 있었따니.. 나는 항상 test.map((item)=>+item); 요렇게 했다구~~~~😯 Frontend/JavaScript 2023.02.06
charAt(), charCodeAt(), fromCharCode() 1. CharAt() : 해당 문자열에서 index에 위치한 문자를 리턴한다. const test = "hello" const index = 4; console.log(test.charAt(index)); // "o" 2. charCodeAt() : 해당 문자열의 유니코드를 리턴한다. const test = "hello" const index = 4; console.log(test.charCodeAt(index)); // 111 3. fromCharCode() : 문자열에서 사용하며, 유니코드를 문자열로 리턴해준다. console.log(String.fromCharCode(111)); // "o" console.log(String.fromCharCode(65,66,67)); //"ABC" Frontend/JavaScript 2023.02.06
javaScript에서 object로 구성된 배열을 비교할때 Array of objects 2개를 비교하려고 할때 이렇게 하면 된다.. 난 삽질을 했군아 const products = [ {ulid: 1, price : 1000, name : "a" }, {ulid: 2, price : 2000, name : "b" }, {ulid: 3, price : 3000, name : "c" }, {ulid: 4, price : 4000, name : "d" } ] const best = [ {ulid : 3 } ] const result = products.filter(({ ulid: value }) => best.some(({ ulid: value2 }) => value === value2) ); console.log(result); //[{ ulid:3, price:.. Frontend/JavaScript 2023.02.04
setTimeout() vs setInterval() 을 비교해보자 Carousel을 직접 구현하려고 했을때 React에서 어떤걸 쓰는게 더 적합할지 고민했다. 우선 1. setTimeout() 2. setInterval() 두개를 생각했다. 우선 비교해보자. setTImeout() : delay 된 시간만큼 기다린 후에 function을 실행한다. 일정 시간이 지난 후에 함수를 실행한다. const timeoutId = setTimeout (function[,delay,arg1,arg2,...] ); //종료 clearTimeout(timeoutId); 1. setTimeout은 timeoutId를 리턴한다. 따라서 timeoutId로 생성한 타이머를 식별할 수 있다. clearTImeout()에 전달해 타이머를 취소 할 수 있다. 2. 함수를 실행하지 않고 넘겨야한다.. Frontend/JavaScript 2023.02.02