What 자바스크립트로 현재 시간을 나타내는 방법은 매우 쉽다. new Date()를 이용하면 현재 날짜를 구할 수 있고, 다양한 메서드로 특정 부분만 추출한다거나 밀리초로 변환시킬 수도 있다. 특히, 이 밀리초(ms)를 잘 이용하면 날짜와 관련된 계산은 모두 가능한데, 그 중에서 특정 날짜까지 남은 일-월-분-초를 계산해주는 카운트다운 타이머를 구현해보고자 한다. How 카운트다운 타이머 구현하기 // 기본 세팅 const clock = document.createElement('h1'); document.body.appendChild(clock); // 카운트다운 타이머 구현 const Timer = (date) => { const targetDate = new Date(date).getTime();..

숫자 정렬하기 오름차순 정렬 (1 → 2 → 3) const arr = [2, 4, 1, 3]; // #1 arr.sort(); // [1, 2, 3, 4] // #1-1 const arr2 = [2, 4, 10, 1]; arr2.sort(); // [1, 10, 2, 4]; // #2 const compare = (a, b) => { return a - b; } arr.sort(compare); // [1, 2, 3, 4] arr2.sort(compare); // [1, 2, 4, 10] // #3 arr.sort((a, b) => { return a - b; // [1, 2, 3, 4] }) #1 : 배열의 원소가 단순히 숫자들뿐이고 오름차순으로 정렬하기 원한다면, sort()만 써줘도 무방하다. #..

정의 클로저(Closure)란, '함수가 선언될 때 외부 함수의 렉시컬 환경을 참조하는 현상' 정도로 정의할 수 있다. 클로저의 예시를 찾아보면 외부 함수와 내부 함수가 있고, 외부 함수의 변수를 내부 함수에서 가져다가 쓰는 것을 클로저라고 설명하고 있다. 외부 함수의 변수를 쓸 수 있는 이유가 바로 외부 함수의 렉시컬 환경을 참조하기 때문이다. (우선적으로 스코프 체인의 개념을 알아야 한다. 스코프 체인이란, 식별자를 찾을 때 자신이 속한 스코프에서 찾고 없을 시 상위 스코프에서 찾는 현상을 말한다.) 클로저는 외부 함수가 return 값으로 내부 함수를 선언하고 있고, 내부 함수에서는 외부 함수의 변수를 가져다가 사용하는 것으로 되어있다. 여기서 주의할 점은 내부 함수가 외부 함수의 변수를 참조한다는..

What 자바스크립트의 수많은 메서드를 공부하다 보면, 가끔 비슷하게 생겨서 이게 저거였는지 저게 이거였는지 헷갈리는 경우가 종종 발생한다. 나같은 경우는 slice, splice, split 이 삼총사가 헷갈렸다. 따라서 이번 기회에 포스팅함으로써 이 셋의 차이점을 제대로 기억하고자 한다. How slice() : Array, String const arr = [1, 2, 3, 4, 5]; arr.slice(3); // [4, 5] arr.slice(2, 3); // [3] arr.slice(-1); // [5] arr.slice(-4, -1); // [2, 3, 4] slice()는 배열 메서드로 괄호 안에 인덱스를 인자로 넣으면, 그 인덱스에 해당하는 값부터 배열 끝까지 반환된다. slice()의 ..

What call, apply, bind에 대한 차이를 알아보기 전 우리는 자바스크립트에서의 this에 대해서 이해할 필요가 있다. 단독으로 this를 호출할 경우 this는 window를 호출한다. 또한 객체 안에서 this는 해당 객체를 나타내기도 한다. 함수 안에서 사용할 경우 함수의 주인인 window 객체를 가리킨다. (strict mode에서는 undefined를 반환한다) 메서드를 설정하는 경우 this는 해당 메서드로 호출한 객체로 바인딩된다. 하지만, 간혹 다른 객체를 바인딩할 경우가 생길 수도 있다. 이 경우 call, apply, bind 메서드를 통해 간단히 해결할 수 있다. How call() const obj = { name: '홍길동', myFunc: function(city)..