본문 바로가기

JS

 (22)
reduce 작동원리 reduce는 map이나 filter처럼 배열을 생성하는 것이 아니라, 어떤 값을 생성하는 것이다. function reduce(predicate, val){ let result=val; 먼저 작동 원리를 보자면, 인자로 콜백함수를 받고 다른 것과 다르게 값을 받게된다. 새로운 배열을 생성하는 것이 아니니까 [ ]가 아니라 처음 초기값으로는 val 값이 설정된다. function reduce(predicate, val){ let result=val; for(let i=0; i
filter 작동원리 filter도 새로운 배열을 생성해서 리턴 받는다. 그런데 map처럼 길이가 모두 똑같은 것이 아니라 정확하게 원하는 원소만 배열을 생성할 수 있다. a = [10, 11, 12, 13, 14, 15]; let answer = a.filter(function (v, i) { return v%2==0; }, [1, 2]); console.log(answer); 이렇게 리턴에 값을 주면 그 값이 참인 요소들만 리턴을 한다. 이것이 출력값. function filter(predicate, thisArg){ let list=[]; for(let i=0; i
map 작동원리 a = [10, 11, 12, 13, 14, 15]; let answer=a.map(function (v, i) { return v*v; }, [1, 2]); console.log(answer); 먼저 map 코드는 이렇게 작성해봤다. map은 요소들을 하나하나 탐색하면서 그 요소들을 이용해서 새로운 배열을 생성하는 것이다. function map(predicate, thisArg){ let list=[]; for(let i=0; i
forEach 작동원리 *forEach, map, filter, reduce 는 모두 고차함수 고차함수는 자신의 매개변수에 함수값을 전달받는 것이다. function forEach(predicate, thisArg) a=[10, 11, 12, 13, 14, 15]; a.forEach(); 먼저 forEach부터 보면 forEach는 앞에는 함수, 뒤에는 내부에서 this로 사용할것을 받고있는 것이다. thisArg는 생략 가능. (원래부터 이렇게 만들어 진 것이다.) //function forEach(predicate, thisArg) a=[10, 11, 12, 13, 14, 15]; a.forEach(function()); forEach는 for반복문 대신 사용하는 애라고 생각하면 된다. function forEach(pre..
setInterval API setInterval은 주기적으로 계속 호출할 수 있는 API. let timerId = setInterval(myFunction, 2000); 2초마다 주기적으로 나의 함수를 실행시켜줌. clearInterval(timerId); 그리고 clearInterval을 하면 setInterval을 중지시켜준다.
퍼포먼스 개발 툴 사용하기🧨 성능 체크를 하기위해서는 개발툴에서 Performance를 클릭해서 Record를 클릭하고 확인하고 싶은 동작을 수행한다. 좋은 성능은 1초당 60개의 프레임이 계속 보여지는 것이 좋다. 이럴려면 이벤트를 처리하고 브라우저에 표기되는것이 16ms동안 끝나야한다. 이렇게 초록색이 나온것이 좋은 것. 성능이 떨어지면 빨간색 줄이 나온다. 클릭해서 보면 더욱 상세한 정보를 알 수 있다.
JavaScript| 클래스 예제와 콜백 함수 최종 정리 Counter이라는 class안에는 constructor()이라는 함수가 있는데 이건 처음에 생성이될 때 라고 생각하면 됨. 그 안에는counter이라는 변수가 있는데, 이 class를 이용해서 오브젝트를 만드는 순간 0으로 초기가 된다. 그 밑에는 increase라는 함수가 있는데 counter을 1씩 증가 시킨다. (그리고 콘솔창에보여줌) *class에서 함수를 선언할때는 function을 작성하지 않아도 된다. const로 coolCounter이라는 변수를 만들고 new라는 연산자로 Counter의 값을 지정해준다. new라는 키워드를 사용해서 class를 만들게되면 constructor가 실행이 되는데, this.counter를 0으로 초기화 해준다. 그리고 coolCounter에 1씩 증가하는 ..
JavaScript| boolean의 모든 것 / && 연산자 false: 0, -0, ' ', null, undefined true: 1, -1,그 외 모든 숫자, 'hello' , [ ](이것은 텅텅 비어져있지만 배열 자체이기때문에 true) 이렇게 num이라는 변수를 만들고 값을 설정하지 않는다면 출력은 false로 된다. 이유는 값을 설정하지 않으면 undefined가 설정되기 때문이다. 여기서 && 연산자는 앞에가 true일때만 뒤에 문장이 실행된다. 위에 사진에서는 num이 false기 때문에 (undefined이라) 실행이 안된다. 이렇게 num이 8을 작성해서 true로 되자, && 연산자가 출력되는 것을 볼 수 있다. 또, 이것처럼 데이터가 없는것을 출력하면 아예 에러가 뜬다. &&연산자를 사용하면, 에러는 뜨지 않지만 데이터가 없기때문에 실행되지 ..

티스토리툴바