Frontend/JavaScript 25

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

두 배열간의 교집합, 차집합, 합집합, 대칭차집합

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

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