문제) 입력한 숫자까지의 소수를 아래 사진과 같이 출력하는 기능을 만들어라. 1 이하를 입력한다면 1 이상의 수를 입력하라고 경고창을 출력해라. 풀이 전 생각) 소수를 판별하는 함수를 만들어야 한다. start 버튼을누르면 입력한 수부터 소수인지 아닌지를 모두 다 판단해야 한다. start 버튼을 누른 뒤 화면에 출력하려면 innerHTML 또는 innerText로 어떤 결과값을 산출해야 한다. 함수 작성은 함수 작동의 행위가 시작되는 onclick 프로퍼티로부터 작성한다. 그 외, 모르는 부분이나 수정해야할 부분은 작성하면서 세분화한다. Start 위 기능의 동작 순서) 각 종 html 요소들을 querySelector로 지정하여, 선택가능한 프로퍼티로 만든다. button.onclick 프로퍼티를 클..
풀기 전 생각) 1) 초기 값을 입력하고 Start를 누를 때, 덧셈에 필요한 함수가 클로저로 초기값을 저장할 수 있어야 한다. 따라서, 함수는 함수를 리턴하는 형태를 가지게 설계해야 한다. 2) 모든 버튼들은 계속 사용할 수 있어야 한다. innerHTML을 사용함에도 불구하고 재사용이 가능하도록 설계한다. 나의 답안) 이번에는 정답과 비슷했다. querySelector를 설정할 때, 그것을 사용하는 element끼리 붙어있도록 설계하여 코드의 간결성을 보장할 수 있을듯 하다.
const getPrime = primeMachine(10) getPrime() // 11 getPrime() // 13 getPrime() // 17 getPrime() // 19 위 함수가 동작될 수 있도록 primeMachine 함수를 제작해라. getPrime이 처음 실행되면 입력한 수의 다음 소수가 실행되고, getPrime이 재차 실행될때마다 출력된 수의 다음 소수가 실행된다. 문제를 단계별로 나누어 풀어보자. 1. 구조 primeMachine을 getPrime에 할당해야하며 getPrime을 실행할 때마다 인수로 받은 수의 다음 솟수가 출력된다. 따라서 구조는 아래와 같이 될 것이다. const PrimeMachine = (start) => { return () => {} } 2. 소수의 특..
소수(Prime Number)를 구하는 알고리즘은 기초 중의 기초 같은 느낌이다. 소수를 구하는 알고리즘을 조작해보고, 직접 테스트 케이스를 작성해보는 것이 이번 과제의 목표이다. 소수란 무엇인가? 소수는 1보다 크면서, 1과 자기 자신으로 나눴을 때만 나누어 떨어지는 수이다. 그러므로 1과 음수는 소수가 아니며, 2와 4같은 약수가 있는 수는 소수가 아니다. 문제) 파라미터로 숫자를 받는 함수를 작성하시오. 인수가 소수이면 true를, 합성수이면 false를 반환하시오. 즉, 아래를 해결할 수 있는 함수를 작성하시오. result = isPrime1(2) // true result = isPrime1(1) // false result = isPrime1(8) // false result = isPrim..
문제 아래 예제를 보고 lastX 함수를 작성해라. lastX('Winterfell', 3) // returns "ell" 내가 작성해서 해결한 코드 const lastX = (str, num, i = 0, box = "") => { if (num = num) || i < 0) { return box } return lastX(str, num, str[i] + box, i - 1) } const b = lastX('Winterfell', 6) console.log(b); 설계를 바꿨다. box도 재귀를 거쳐 length가 하나씩 증가한다는 것을 감안하여 box가 리턴되는 조건을 box.length가 num과 같아지는 것으로 한다. 또한 인덱스가 -1 이하가 될 경우, 의미가 없으므로 i가 0보다 작아질 ..
문자열은 문자들이 나열된 것을 뜻한다. d = 문자 duckchun = 문자열 이때 자바스크립트에서의 문자열은 쌍따옴표 또는 따옴표로 묶여있어야 한다. "duckchun" 또한 문자열은 개별로 인덱스가 존재하는데, 첫 번째 인덱스가 0부터 시작한다는 것만 기억하면 될 것 같다. index [0] [1] [2] [3] [4] [5] [6] [7] string d u c k c h u n 문자열(String)의 개별 문자(Character)에 접근하기 위해서는 해당 문자열의 문자의 인덱스를 대괄호 []로 묶어서 접근하면 된다. 즉, "duckchun"[1] 과 같이 작성하면 "u"로 접근할 수 있다. 문자열은 length라는 특별한 프로퍼티가 존재한다. length 프로퍼티는 해당 문자열의 인덱스에 +1을 ..
문제 : tryNumRange 함수를 작성하라. 이 함수는 숫자와 함수를 파라미터로 하고, 파라미터 함수는 1부터 입력된 파라미터 숫자까지 호출된다. 만약에 파라미터 함수의 호출 도중 true값이 나오면 tryNumRange 함수는 true를 리턴하고 파라미터 함수의 모든 리턴이 false라면 tryNumRange 함수는 false를 리턴해라 아래 서술할 첫번째 코드와 두번째 코드는 사실상 같다. 첫번째 코드 const tryNumRange = (num, f, i = 1) => { if (num < i) { return false } if (f(i) === true) { return true } if (f(i) === false) { return tryNumRange(num, f, i + 1) } } l..
https://www.c0d3.com/curriculum/js1/recursion_closure_and_async 함수의 이해를 최대한으로 해보고자 아래의 문제를 풀이해본다. 위의 링크에서 전문을 확인할 수 있다. 문제 1 아래의 함수를 보고, callWith 함수를 작성해라. callWith 함수는 숫자를 인수로 받고, 함수를 리턴한다. const fun = callWith(10) let b = fun(num => { return num + 5 }) // b is 15 b = fun(num => { return num + 'hello' }) // b is "10hello" b = fun(num => { return 500 % num }) // b is 0 팁) 함수를 거꾸로부터 읽어가다보면 어떤 파라미..
https://www.c0d3.com/curriculum/js1/recursion_closure_and_async 클로저(Closure)는 실행 컨텍스트(Execution Context)와 상당한 연관이 있는 개념이다. 실행 컨텍스트는 변수(Variables)들이 저장될 공간이 따로 나뉘는 개념으로 생각하고 클로저는 각 함수(Function)들이 고유의 영역을 가지는 개념으로 생각해야 한다. 아래 코드를 통해 클로저를 이해해보자. const solution = (a, b) => { return (c) => { return a + b + c } } const fun1 = solution(1, 2) let res = fun1(3) // 6 res = fun1(5) // 8 res = solution(2 ,3..
Hello Change ME 위의 코드는 button을 onclick하는 이벤트가 있을 경우, 아래의 문구를 실행한다. 아래의 문구. 즉, onclick 내부에는 innerHTML가 있음을 볼 수 있는데 이 기능은 HTML에게 동적인 환경을 제공한다고 할 수 있겠다. displayElement와 HTML의 h1는 querySelector로 연결되어있고, innerHTML에 의해 문자열이 h1 태그 안에 HTML로 전달된다. 솔직히 innerHTML을 지금 사용하고 있냐? 라고 하면 잘 모르겠다. 아마도 효율적이고 좋은 프레임워크들이 많이 나와서 자바스크립트 기본 문법은 많이 사장되었을 것이다. 그럼에도 배우고 있는 이유는 내가 공부하고 있는 사이트에서 Oldschool way를 강조하기 때문... 일단 ..
