본문 바로가기

JavaScript

 (6)
[JavaScript] setTimeout은 현재 실행 중인 스크립트의 처리가 종료된 이후에 실행된다! 문제: setTimeout 은 무엇을 보여줄까요? 아래 코드에선 setTimeout을 이용해 호출을 스케줄링하고 있습니다. 그런데 그 아래 코드에선 실행 시간이 100ms 이상 걸리는 무거운 작업을 하고 있네요. 이런 경우 setTimeout에 넘겨준 함수는 언제 실행될까요? 반복문 실행 후 반복문 실행 전 반복문이 실행되는 시점 얼럿창엔 어떤 값이 출력될까요? let i = 0; setTimeout(() => alert(i), 100); // ? // 아래 반복문을 다 도는 데 100ms 이상의 시간이 걸린다고 가정합시다. for(let j = 0; j < 100000000; j++) { i++; } 내가 쓴 답안(틀림) 답: 1번 반복문 실행 전. 그래서 0이 출력된다. 이유: delay가 0일 때만..
[JavaScript] Object.entries(obj)가 반환하는 건 맵이 아닌 '배열'이다! 나는 문제를 풀다가 크나큰 착각을 하고야 말았다!! 내가 무슨 착각을 했는지는 거두절미하고 바로 문제를 풀며 알아보자. 문제: 프로퍼티 개수 세기 객체 프로퍼티 개수를 반환하는 함수 count(obj)를 만들어보세요. let user = { name: 'John', age: 30 }; alert( count(user) ); // 2 가능한 짧게 코드를 작성해 보세요. 주의: 심볼형 프로퍼티는 무시하고 ‘일반’ 프로퍼티 개수만 세주세요. 정말 쉬워보이는 문제라 금방 코드를 쓰고 실행을 했다. 그런데 어라..? 출력 결과가 이상하게 나왔다. 내가 쓴 코드(틀림) let user = { name: 'John', age: 30 }; console.log( count(user) ); function count(o..
[Javascript] 반복문 STOP! split과 join, 그리고 Map 자료구조 적절한 메서드가 있음에도 나는 또 반복문을 남발해버렸다. 그리고 Map 자료구조에 익숙치 않아 결국 문제를 틀려버렸다. 내가 풀었던 문제는 다음과 같다. 문제: 애너그램 걸러내기 애너그램(어구전철)은 단어나 문장을 구성하고 있는 문자의 순서를 바꾸어 다른 단어나 문장을 만드는 놀이입니다. 예시: nap - pan ear - are - era cheaters - hectares - teachers 애너그램으로 만든 단어를 걸러내는 함수 aclean(arr)을 만들어보세요. 예시: let arr = ["nap", "teachers", "cheaters", "PAN", "ear", "era", "hectares"]; alert( aclean(arr) ); // "nap,teachers,ear"나 "PAN,ch..
[Javascript] 반복문 lover인 나에게 map과 reduce를 건네본다..❤️ 배열과 메서드 파트의 과제를 풀면서 나의 안 좋은 습관을 발견해버렸다. 바로 모든 문제를 반복문을 써서 풀려고 하는 것이다! 물론 결과는 잘 도출된다. 문제는 코드가 복잡해지고 깔끔하지 않다는 것이다! 그래서 나는 이번 포스팅을 통해 배열에서 쓰이는 반복문(forEach, for, for..or) 대신 쓸 수 있는 map과 reduce 메서드 활용법을 숙지하려한다. 어떤 경우에 map을 쓸까? map은 각 요소를 돌면서 반복 작업을 수행하고, 작업 결과물을 새로운 배열 형태로 얻을 때 사용하면 된다. 내가 풀었던 문제와 내가 쓴 답안은 다음과 같다. 문제: border-left-width를 borderLeftWidth로 변경하기 "my-short-string"같이 여러 단어를 대시(-)로 구분한 문자열을..
[Javascript] 대괄호 표기법으로 프로퍼티 값 읽을 때 주의하자! 자바스크립트 개념을 공부하면서 문제를 푸는데 계속 오류가 발생했다. 문제는 다음과 같다. 문제: 객체 매핑하기 세 개의 프로퍼티 name과 surname, id를 가진 객체 user가 담긴 배열이 있습니다. name과 surname을 조합해 fullName을 만들고, 이를 이용해 두 개의 프로퍼티 id와 fullName을 가진 객체를 담은 새로운 배열을 반환해주는 코드를 작성해보세요. 예시: let john = { name: "John", surname: "Smith", id: 1 }; let pete = { name: "Pete", surname: "Hunt", id: 2 }; let mary = { name: "Mary", surname: "Key", id: 3 }; let users = [ john..
[AnyChart] AnyChart Trial Version (체험판 문구) 지우는 방법(JQeury) AnyChart를 이용하여 차트를 구현했는데 하단에 있는 AnyChart Trial Version이라고 써져있는 체험판 문구를 지우고 싶었다. chart.getCredits().setEnabled(false);을 넣으라는 글을 깃허브에서 보긴 했으나 full version을 구매한 후 가능한 얘기인 것 같았다. 그래서 나는 아주 간단한 방법으로 체험판 문구를 삭제했다. F12를 눌러 체험판 문구가 있는 곳의 코드를 확인해보니, 클래스 명이 "anychart-credits"으로 되어있었다. 클래스명도 알았겠다, 나는 JQuery의 remove()를 활용하여 체험판 문구를 삭제했다. remove()는 선택한 요소를 제거하는 메소드다. // initiate drawing the chart chart.draw(..

티스토리툴바