이벤트 제거하기자바스크립트에서 addEventListener()를 사용해 이벤트를 추가한 경우 반대로 이를 제거할 수도 있는데 이때 우리는 removeEventListener()를 사용한다.그리고 이 removeEventListener()는 EventTarget에 등록된 이벤트 리스너를 제거하는데 이때 이벤트 리스너는 이벤트의 종류와 이벤트 리스너 함수 자체의 조합으로 식별되어 제거되기 때문에 다양한 옵션이 일치하는 이벤트 리스너만 제거가 가능하다.element.removeEventListener('이벤트타입', 이벤트 콜백 함수)다만 여기서 유의할 점이 한 가지 있는데 보통 우리가 이벤트를 등록할 때에는 addEventListener()의 콜백 함수를 익명 함수로 작성한다는 점이다. 가독성에도 좋고 코..

자바스크립트에서 reduce() 함수의 루프 중간에 break하는 방법에 대한 글이다. 반복문을 중단시키는 일반적인 break 문법은 고차함수에서는 지원하지 않기 때문에 아래와 같이 reduce()의 반복 조건을 범위 밖의 값으로 설정하는 방식으로 끊어내는 수밖에 없다.고차 함수(Higher-Order Function)란, 함수를 파라미터로 전달받거나 연산의 결과로 반환해주는 메서드를 말한다. 최근 몇 년 간 자주 거론되는 함수형 프로그래밍의 핵심이기도 하며 자바스크립트를 함수형 프로그래밍에 알맞는 언어로 만들어주는 특성이기도 하다.const array = ['9', '91', '95', '96', '99'];const x = array .slice(0) ..

아무리 고급 문법들을 익히고 활용하더라도 프로그래밍에서 가장 많은 비중을 차지하는 문법 중 하나는 아마 조건문일 것이다. 오죽했으면 프로그램은 조건문과 반복문만 있으면 돌아간다는 말이 다 있겠는가. 그만큼 조건 분기는 프로그래밍의 기본이기도 하지만 이를 생각 없이 지나치게 중첩하고 나열하면 가독성과 성능이 떨어지는 문제가 발생한다.물론 컴퓨터의 입장에서야 로직상 문제는 없겠지만 나중에 누군가 유지보수하기 위해 코드를 복기하는 과정에서는 상당한 시간과 노력 그리고 스트레스가 소모될 것이다. 그래서 이러한 조건문을 최적화하는 데에는 스타일 기법이 존재한다.이번 글에서는 총 4가지 방법론을 소개할 예정인데 첫 번째와 두 번째의 경우 if문의 위치를 조정함으로써 보다 보기 편하게, 그러니까 유지보수하기 좋게 만..

버튼을 클릭하거나 키보드로 입력하는 등 사용자 이벤트에 따라 addEventListener를 동적으로 추가하는 로직을 작성하는 경우 중복된 바인딩으로 이벤트 콜백이 여러 번 발생될 수 있다. 이럴 때에는 조건문으로 해당 요소에 특정 이벤트 바인딩이 되어 있는지 확인하고 분기할 필요가 있는데 여기에 관련된 구글링을 좀 해보면 getEventListeners()라는 API가 나온다. 하지만 이는 크롬 개발자도구의 콘솔창용 API지 자바스크립트 표준 함수가 아니기 때문에 스크립트에서 사용할 수 없다.결론부터 말하자면 현재 자바스크립트 진영에서 직접적으로 이벤트 바인딩을 검사하는 API는 지원되지 않는다. 따라서 다른 방법으로 우회하는 로직을 짜야 하는데, 대표적으로 요소에 class를 부여해서 해당 class..

객체는 실재하는 개체(entity)를 표현하고자 할 때 생성하며 자바스크립트에서는 객체의 프로퍼티에 함수를 할당해 행동할 수 있는 능력을 부여해 준다. let user = { name: "John", age: 30};user.sayHi = function() { alert("안녕하세요!");};user.sayHi(); // 안녕하세요! 위 예세어세는 함수 표현식으로 함수를 만들고 객체 프로퍼티 user.sayHi에 함수를 할당해 주었다. 이제 객체에 할당된 함수를 호출하면 user가 인사를 해줄 것이다. 이처럼 객체 프로퍼티에 할당된 함수를 메서드(method)라고 부른다. 메서드는 아래와 같이 이미 정의된 함수를 이용해서 만들 수도 있다.let user = { // ...};// 함수 선언fun..

전역 객체는 모든 객체의 최상위 객체를 의미하며 일반적으로 Browser-side에서는 window, Server-side(Node.js)에서는 global 객체를 가리킨다. // in browser consolethis === window // true// in Terminalnodethis === global // true 전역 객체는 실행 컨텍스트에 컨트롤이 개입되기 전에 생성되며 constructor가 없기 때문에 new 연산자를 이용한 생성이 불가능하다. 즉 개발자가 직접 전역 객체를 생성할 수 있는 방법은 없다.전역 객체는 전역 스코프(Global Scope)를 갖는다.전역 객체의 자식 객체를 사용할 때 전역 객체의 기술은 생략할 수 있다. 예를 들어 document 객체는 전역 객체 wind..