Front-end/Javascript

[JS] 랜덤 숫자 생성법 이해하기 | Math.random()

Math.random()은 0부터 1 사이의 난수를 생성하는 메소드이다. 더 자세히 말하자면 0부터 0.99999... 사이의 수를 생성한다. 따라서 어떤 범위 사이의 랜덤 숫자를 생성하고 싶다면 여기에 적절한 값을 더하거나 곱해서 응용하면 된다. 다음은 상황별 예시이다. 1) 0~7 범위의 랜덤 난수 생성하기 Math.floor(Math.random() * 8); Math.random()으로 0부터 0.999999... 사이의 수가 생성된다. 여기에 8을 곱해서 0부터 7.999999... 사이의 수가 생성된다. Math.floor()로 소수점 이하를 절삭해서 0부터 7이하의 난수를 얻는다. 따라서 0 이상 n 이하의 수를 얻고 싶다면 Math.random()에 n보다 1 큰 수를 곱한 다음, 소수점을..

[JS] Javascript에서 Enum 사용하기

enum이 필요한 이유 / JS에서 enum 타입 구현하기 책의 장르를 검사해서 만약 science라면 특정 문구를 출력한다고 하자. 그런데 아래와 같이 대소문자가 다르거나 오타가 발생한다면? let genre = "Science"; if(genre === "science") { console.log("I love it!"); } 이럴 때 필요한 게 바로 enum이다. enum의 장점은 값에 일관성이 있고, IDE 자동완성의 도움을 받을 수 있어 오타를 최소화 할 수 있다. 값이 변경되더라도 enum 값만 변경하면 되기 때문에 리팩토링 비용을 최소화할 수 있다. 비슷한 집합끼리 묶어서 보관할 수 있으며, 한 집합 안에서만 이름이 중복되지 않으면 된다. 하지만 JS는 Enum(열거형) 타입을 지원하지 않는..

[JS] 올림, 반올림, 내림 (ceil, round, floor) / 특정 자리수까지 0 채우기

올림, 반올림, 내림 함수 올림 - Math.ceil(숫자) 반올림 - Math.round(숫자) 내림 - Math.floor(숫자) 외우는 법 ceiling이 천장이라는 뜻이므로 실수의 소수점 부분을 올림해서 천장으로 올리는 함수라고 생각하면 된다. round는 둥그렇게 다듬는 이미지를 생각하면 된다. 부족하면 더하고 넘치면 깎는 느낌으로. floor는 버려서 바닥으로 보낸다는 이미지를 생각하면 된다. 예시 Math.ceil(50.66666) - 소수 부분을 올림해서 51 Math.round(50.6666) - 소수 부분을 반올림해서 51 Math.floor(50.6666) - 소수 부분을 버림해서 50 자릿수 지정 주의할 점은 세 함수 모두 기본적으로 실수를 소수점 아래를 남기지 않고 정수로 만든다는..

[JS] onInput 이벤트 - 입력한 글자 실시간으로 화면에 출력하기

결과: const input = document.getElementById('input'); const result = document.getElementById('result'); input.oninput = function() { result.innerHTML = input.value; }; 1. document.getElementById('id')로 엘리먼트를 선택하고, 2. oninput 이벤트를 할당해준다. 3. result.innerHTML = input.value - input.value 값을 id="result"인 엘리먼트에 설정해준다. body의 끝 부분에 를 위치시키거나 js 파일을 로드한다면 defer를 붙여 불러야 엘리먼트를 가져올 때 null이 되지 않을 수 있다.

[JS] prototype 참고글

https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67 [Javascript ] 프로토타입 이해하기 자바스크립트는 프로토타입 기반 언어라고 불립니다. 자바스크립트 개발을 하면 빠질 수 없는 것이 프로토타입인데요. 프로토타입이 거의 자바스크립트 그 자체이기때문에 이해하는 것이 어렵 medium.com 흥미를 잃지 않게 도입부부터 친절하게 설명한 다음, 그림과 그에 대한 해설로 직관적으로 이해가 되게 잘 설명해놓은 글이다. 이것만 읽으면 프로토타입에 대해 이해하는 것은 문제가 없을 듯. 개념이 가물가물해질 때마다 다시 보면 좋을 듯하다.

[JS] String 오브젝트에 굳이 toString()이 있는 이유

toString() 메소드란? toString()은 어떤 대상을 문자열로 바꿔주는 메소드이다. Number 오브젝트에 있는 toString() 함수는 숫자를 문자열로 바꿔준다. String 오브젝트에 있는 toString()은 문자열을 문자열로 바꿔준다. 문자열을 굳이 문자열로 바꿔줄 필요는 없어 보인다. 왜 String 오브젝트에는 toString() 메소드가 존재하는 것일까? 그 이유를 알려면 먼저 프로퍼티(property)와 프로토타입(prototype)에 대해 알 필요가 있다. 프로퍼티와 프로토타입 프로퍼티는 name-value 쌍을 뜻한다. 예를 들면 {name: "Carrot", eyeColor: "blue", meow: meow()} 는 프로퍼티이다. 여기서 meow() 처럼 value 자리..

[JS] undefined와 null의 차이

undefined 변수를 선언하면 자동으로 undefined 값이 할당된다. 그러므로 undefined는 아직 값을 따로 할당하지 않았다는 표시이다. undefined도 값이니 이렇게 기본적으로 할당되는 undefined 외에도 당연히 변수에 undefined을 할당할 수 있다. 하지만 값을 아직 할당하지 않은건지 undefined를 의도적으로 할당해준건지 구분하기 힘드므로 권장하지 않는다. 그래서 둘을 구분하기 위해 null이 필요하다. typeof 연산자를 통해 타입을 확인하면 undefined는 undefined 타입이다. null 아무 값도 가지고 있지 않다고 표시해주고 싶은데 undefined를 할당하자니 아직 초기값을 설정해주지 않은 변수와의 구별이 어렵다. 그럴 때에는 null값을 할당해주면..