자바스크립트 17

프로그래머스 타겟 넘버 (Javascript) 풀이, "트리다 트리!"

트리다 트리!!! 문제 링크 문제 설명 n개의 음의 아닌 정수를 적절히 더하거나 빼서 타깃 넘버로 만드는 경우를 수를 구하는 문제다. 해결 과정 결국 n 개의 모든 수를 각각 더하거나 뺄 수 있다. 그리고 그 경우의 수를 알고, 그 값들이 타깃 넘버인지 비교해야 한다. 처음에는 어떻게 이 모든 경우를 반복문으로 구한단 말인가? 절망하다가 뭔가 규칙이 느껴지는 듯 했다. 더하거나, 빼거나, 더하거나 빼거나 ... 그리고 그 값은 누적된다. 트리다 트리!! 마치 위와 같은 형태였다. 오오, 이것은 트리였다! 트리의 모든 요소를 다뤄야 하나? 그리고 numbers로 들어온 요소의 수를 더하든 빼든 그 결과만 모아서 확인해야 하는데, 그것은 트리에서 같은 깊이, Level을 들여다보면 됐다. 그렇다면 트리를 어..

프로그래머스 | 로또의 최고순위와 최저순위 | 자바스크립트

문제 링크 해결 과정 문제 설명이 길고 복잡해 이거 1단계 맞나, 싶었지만 자세히 들여다보니 난이도가 쉬운 문제였다. 로또에서 불분명한 번호 0이 몇 개 나오는지 파악하면 최고순위와 최저순위를 자연스럽게 파악할 수 있다. 즉, 0은 어떤 번호던지 될 수 있으므로, 0이 모두 당첨번호이면 최고순위, 당첨번호가 아니면 최저순위가 된다. 따라서 이를 파악하기 위해 알아야 하는 기존의 번호들에서 몇 개가 당첨번호이고, 불분명한 번호가 몇 개인지 알아내는 것이다. 그러면 맞춘 개수에 따라 몇 등인지 알고 정답을 반환할 수 있다. 소스 코드 function solution(lottos, win_nums) { const rankPerMatches = [6, 6, 5, 4, 3, 2, 1]; const unknownN..

배열을 같은 값으로 초기화할 때 하드코딩보다 Array(number).fill(something)를 사용하자.

오늘의 쬐그마한 배움이었다. this.#squares = [null, null, null, null, null, null, null, null, null] 어떤 배열을 하나의 값으로 초기화해야 한다면, 위와 같이 일일이 하드코딩하여 써주는 것 보다, 아래와 같이 `Array(number).fill(something)`를 상수(constant)와 함께 사용하는 것이 더 가독성과 이후 변경, 확장, 유지, 보수에 용이하다. const SQUARE_LENGTH = 9; const DEFAULT_SQUARE_CONTENT = null; this.#squares = Array(SQUARE_LENGTH).fill(DEFAULT_SQUARE_CONTENT); 참고 developer.mozilla.org/ko/docs..

Array 메소드(filter, find 등)의 반환 값을 잘 알아두자.

오늘은 이런 일이 있었다. 결론부터 말하자면, Array.filter 메소드의 반환 값이 배열이란 것을 몰라서 일어난 경험이다. 상황은 다음과 같은 함수에서 일어났다. export default class ScoreManager { /* ... */ score(player) { console.log(player) this.#playerScore[player.getType()] += 1; const $score = Array.from(this.$scores).find(($score) => $score.id === player.getType()); $score.textContent = this.getScore(player); } /* ... */ } 어떤 문제인지, 아래 score(player) 메소드에서 ..

자바스크립트 클래스 메소드에서 이벤트리스너 콜백 함수를 작성할 때 주의해야 할 this 바인딩

자바스크립트 클래스 안에서 이벤트리스너를 등록하고, 그 콜백 함수 안에서 this를 사용하려면 주의해야 한다. 아래는 board 엘리먼트의 자식 엘리먼트를 모두 선택해 각각에 이벤트리스너를 등록하는 메서드를 구현한 것이다. export default class BoardHandler{ #gameManager; /* ... */ #CLASS_NAME_BOARD_CHILD= ".board__child"; $allChildren = document.querySelectorAll(this.#CLASS_NAME_BOARD_CHILD); #initializeBoardElement() { this.$allChildren.forEach(($child) => ($child.textContent = "")); this.$..

고차함수를 활용한 이벤트리스너 부착과 제거

아래 코드는 캘린더의 날짜를 출력함과 동시에 이벤트리스너를 붙이고 (다음 달로 넘어갈 때, 다시 이벤트리스너를) 제거하고, 새로운 날짜에 대한 이벤트리스너를 붙이는 기능을 구현한 것의 일부이다. export default class CalendarController { /* ... */ #dateOfCalendarClickEventListenerRepository = {}; /* ... 다른 메서드들 ... */ #printDates() { for (/* 캘린더 날짜 하나씩 순회하는 조건 */) { /* 캘린더 날짜 하나씩 텍스트를 채워넣는 반복문 */ const handleClickDateOfCalendar = createHandleClickDateOfCalendar( dateOfCalendar, $d..

자바스크립트에서 '없음'을 나타내는 두 가지 방법, undefined와 null

자바스크립트에서 '없음'을 나타내는 두 가지 방법, undefined와 null undefined를 반환하는 상황 3가지 자바스크립트 엔진은 사용자가 응당 어떤 값을 지정할 것이라고 예상되는 상황임에도 실제로는 그렇게 하지 않았을 때 undefined를 반환합니다. 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때 var a; console.log(a); // undefiend. 값을 대입하지 않는 변수에 접근 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때 var obj = { a: 1}; console.log(obj.b); // ReferenceError: b is not defined 존재하지 않는 프로퍼티에 접근 return 문이 없..

Javascript Koans가 뭐야? 설명과 테스트 후기

Javascript Koans 설명과 테스트 후기 바닐라코딩 사전 학습 가이드의 5번째 단계로 Javascript Koans가 있다. 처음 봤을 때는 무려 10년 전 깃허브 레포지토리의 자료라서 당황스러웠고, 다 영어라서 꺼려졌다. koans가 뭐야? 큰 스님들이 제자들을 인도하던 사실을 기록하여 후세에 공부하는 규범 일단, 이걸로 뭘 하라는 건지 알 수 없었다. 제목에 떡하니 있는 koans라는 단어의 뜻이 매우 궁금해졌다. 그래서 찾아봤더니 ... koans의 koan은 공안(公案)으로, '간화선'이라는 불교 수행법 안의 개념이다. 공안은 공부안독의 준말로, 관공서(官公署)의 문서라는 뜻인데, 선종의 큰 스님들이 심지, 즉 마음자리를 밝게 깨달은 기연 또는 큰 스님들이 제자들을 인도하던 사실을 기록하..

[Javascript] 프로토타입으로 클래스 구현하기

프로토타입으로 클래스 구현하기 자바스크립트에는 '상속' 개념이 존재하지 않습니다. 하지만 클래스 기반의 다른 언어에 익숙한 개발자들의 니즈에 따라 ES6에는 클래스 문법이 추가됐습니다. 하지만 ES6 클래스에서 일정 부분은 프로토타입을 활용하고 있기 때문에, ES5 체제 하에서 클래스를 흉내내기 위한 구현 방식을 학습하는 것은 큰 의미가 있습니다. 클래스와 인스턴스의 개념 이해 상위의 개념과 하위의 개념이 있습니다. 개념을 어떤 '집단'으로 표현하면, 영어로 그것은 클래스라고도 할 수 있습니다. 다시 말해, 상위 클래스와 하위 클래스가 있습니다. 하위 클래스는 상위 클래스를 포함하면서 더 구체적인 내용(개념)이 추가됩니다. 여기서 클래스의 예는 '음식'이고 그 하위 개념(클래스)는 '과일'이며, 또 그 ..

[Javascript] 함수 선언문 vs. 함수 표현식 feat 호이스팅

함수 선언문과 함수 표현식 함수 선언문(function declaration)은 function의 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미합니다. function a() { // 함수 선언문 /* ... */ } a(); // 정상 실행 함수명 a가 곧 변수명입니다. 함수 선언문의 경우 반드시 함수명이 정의되어 있어야 합니다. 반대로 함수 표현식(function expression)은 정의한 function을 별도의 변수에 할당하는 것을 말합니다. var b = function () { // (익명) 함수 표현식. 변수명 b가 곧 함수명 /* ... */ } b(); // 정상 실행 var c = function d () { // 기명 함수 표현식. 변수명은 c, 함수명은 d /* ... *..