Let's Study Coding

Welcome to Visit!!
Let's get it

웹 개발자로의 새로운 여정을 시작해 보겠습니다.

총 방문자
총 포스팅
오늘 방문자
000일 째 블로그 운영중

여러분들의 방문을
진심으로 환영합니다

웹 개발자로서, 다양한 개발 지식을 다루는
블로그를 만들어보겠습니다. 😃

최근 글

막 올라온 최신 포스팅을 구경해보세요 !

참고하는 웹사이트 목록 💻

필자가 자주 참고하는 웹사이트를 둘러보세요.

Img
2023. 2. 22. 22:45
[WebSite] 🖥️ 웹 개발을 할 때 자주 참고하는 사이트 모음.
목차 제가 웹개발을 할 때 자주 참고하는 사이트를 정리한 포스팅입니다. @Web's CSS 코드펜의 자료들 중 좋은 자료들을 모아 놓은 티스토리 블로그 사이트. 매우 유용한 자료가 많아서 애용하는 블로그다. @web's CSS 코드펜 레퍼런스 사이트입니다. wsss.tistor
더보기
Img
2023. 2. 13. 15:16
[WebSite] 🎨 유용한 무료 이미지 사이트 모음
목차 제가 주로 사용하는 또는 인터넷에서 찾은 유용한 무료 이미지 사이트를 모아서 정리한 포스팅입니다. Unsplash Unsplash는 200만개 이상의 완전 무료 고해상도 이미지를 제공하는 무료 이미지 사이트이다. 전 세계의 사진가들이 라이브러리에 사진을 제공하기
더보기
Img
2023. 2. 13. 15:01
[WebSite] 🖥️ 저작권 무료 목업 사이트 6곳 추천
포토샵, 일러스트를 이용한 디자인 작업을 할 때 로고나 웹, 패키지 등 디자이너들이 자신의 작업물을 더 업그레이드 하기 위하여 목업을 활용하고 있다. 오늘은 제가 주로 사용했던 무료 목업 사이트를 작성해보려고 한다. 1. Anthony Boyd Graphics Free Mockups
더보기
Img
2023. 2. 11. 20:33
[WebSite] 🌈 Gradient 사이트 모음.
목차 프론트엔드 웹개발을 하다 보면 Gradient를 이용하여 작업을 해야할 때가 많다. 문제는 Gradient 디자인을 할 때 단색으로 많은 톤을 잡지만 두 가지 이상을 사용할 때 조합이 어색하다면 전체적인 느낌이 살지 않을 수 있다. 하지만 조합이 잘된 그라데이션(Grada
더보기
Img
2023. 2. 11. 19:26
[WebSite] 🖥️ 유용한 SVG 사이트 모음
프론트엔드 작업을 하다보면 SVG를 사용하여 사이트를 만들어야 할 때가 생긴다. 그래서 어떤 유용한 SVG 사이트가 있는지를 알아볼 겸 자주 사용하는 SVG 사이트를 정리해서 작성해보려고 한다. 필자는 주로 7개의 SVG 사이트를 이용한다. 1. 부트스트랩(Bootstra
더보기

CSS 스타일링 🎨

웹 개발을 할 때 사용하는 CSS 사용방법을 확인해보세요.

Let's Write Message

Guest Book

블로그를 방문해주셔서 감사드립니다.
자유롭게 댓글 달아주세요 ~

Let's Choose Tag Box

Tag Page

원하시는 태그를 클릭해보세요.

Light Dev
Light Dev에서 공부한 내용을 정리합니다.

-

[JavaScript] 🌟 Math 메소드 💯 총 정리 본문

[JavaScript] 🌟 Math 메소드 💯 총 정리

Light9639

목차

    Math 객체

    Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체이다.

    Math 객체는 다른 전역 객체와는 달리 생성자(constructor)가 존재하지 않는다.

    따라서 따로 인스턴스를 생성하지 않아도 Math 객체의 모든 메소드나 프로퍼티를 바로 사용할 수 있다.


    Math 메소드

    자바스크립트는 웹 브라우저상에서 수학적 작업을 손쉽게 할 수 있도록 다양한 Math 메소드를 제공하고 있다.

     

    그 중에서 가장 많이 사용되는 대표적인 Math 메소드는 다음과 같다.

    • Math.min()
    • Math.max()
    • Math.random()
    • Math.round()
    • Math.floor()
    • Math.ceil()
    • Math.sin()

    대부분의 Math 메소드는 웹 브라우저마다 다른 결과값을 얻을 가능성이 높다. 심지어 같은 자바스크립트 인터프리터라도 운영체제가 다르면 다른 결과값을 반환할 수 있다.

     

    따라서 아주 정확한 결과값이 필요한 작업에는 Math 메소드는 사용하지 않는 것이 좋다.


    Math.min() 메소드

    Math.min() 메소드는 인수로 전달받은 값 중에서 가장 작은 수를 반환한다. 인수가 전달되지 않으면 Infinity를 반환하며, 인수 중에 비교할 수 없는 값이 포함되어 있으면 NaN을 반환한다.

    JavaScript
    Math.min();                              // Infinity
    Math.min(1, 10, -100, -10, 1000, 0);     // -100
    Math.min(1, 10, -100, -10, "-1000", 0);  // -1000
    Math.min(1, 10, -100, -10, "문자열", 0); // NaN

    Math.max() 메소드

    Math.max() 메소드는 인수로 전달받은 값 중에서 가장 큰 수를 반환한다. 인수가 전달되지 않으면 -Infinity를 반환하며, 인수 중에 비교할 수 없는 값이 포함되어 있으면 NaN을 반환한다.

    JavaScript
    Math.max();                              // -Infinity
    Math.max(1, 10, -100, -10, 100, 0);      // 100
    Math.max(1, 10, -100, -10, "1000", 0);   // 1000
    Math.max(1, 10, -100, -10, "문자열", 0); // NaN

    Math.random() 메소드

    Math.random() 메소드는 0보다 크거나 같고 1보다 작은 무작위 숫자(random number)를 반환한다.

    JavaScript
    var min = 10, max = 20;
    Math.random();                     // [0, 1)
    Math.random() * (max - min) + min; // [min, max)
    위의 예제에서 사용된 '['기호는 '크거나 같은'을 나타내며, ']'기호는 '작거나 같은'을 나타내는 기호이다. 또한, '('기호는 '보다 큰'을 나타내며, ')'기호는 '보다 작은'을 나타내는 기호이다.

    Math.round() 메소드

    Math.round() 메소드는 인수로 전달받은 값을 소수점 첫 번째 자리에서 반올림하여 그 결과값을 반환한다.

    JavaScript
    Math.round(10.49);  // 10
    Math.round(10.5);   // 11
    Math.round(-10.5);  // -10
    Math.round(-10.51); // -11

    Math.floor() 메소드

    Math.floor() 메소드는 인수로 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수를 반환한다.

    JavaScript
    Math.floor(10.95);  // 10
    Math.floor(11.01);  // 11
    Math.floor(-10.95); // -11
    Math.floor(-11.01); // -12

    Math.ceil() 메소드

    Math.ceil() 메소드는 인수로 전달받은 값과 같거나 큰 수 중에서 가장 작은 정수를 반환한다.

    JavaScript
    Math.ceil(10.95);  // 11
    Math.ceil(11.01);  // 12
    Math.ceil(11);     // 11
    Math.ceil(-10.95); // -10
    Math.ceil(-11.01); // -11

    Math.sin() 메소드

    Math.sin() 메소드는 인수로 전달받은 값의 사인(sine) 함숫값을 반환한다.

    JavaScript
    Math.sin(0);           // 0
    Math.sin(Math.PI / 2); // 1

    자바스크립트에서 제공하는 삼각 함수에 관한 모든 메소드는 각도의 단위로 라디안(radian)을 사용한다. 이때 라디안 단위와 60분법 단위를 서로 변환하기 위해서는 다음과 같은 공식을 사용한다.

    JavaScript
    라디안값 = 60분법값 * (Math.PI / 180)

    Math.PI는 수학에서 사용하는 파이(π)값을 나타내는 자바스크립트 상수입니다. 따라서 대략적인 값으로 3.145159를 나타낸다.


    자바스크립트 Math 메소드

    메소드설명

    메소드 설명
    Math.min(x, y, ...) 인수로 전달받은 값 중에서 가장 작은 수를 반환함.
    Math.max(x, y, ...) 인수로 전달받은 값 중에서 가장 큰 수를 반환함.
    Math.random() 0보다 크거나 같고 1보다 작은 랜덤 숫자(random number)를 반환함.
    Math.round(x) x를 소수점 첫 번째 자리에서 반올림하여 그 결과를 반환함.
    Math.floor(x) x와 같거나 작은 수 중에서 가장 큰 정수를 반환함.
    Math.ceil(x) x와 같거나 큰 수 중에서 가장 작은 정수를 반환함.
    Math.abs(x) x의 절댓값을 반환함.
    Math.cbrt(x) x의 세제곱근을 반환함.
    Math.sqrt(x) x의 제곱근을 반환함.
    Math.clz32(x) x을 32비트 이진수로 변환한 후, 0이 아닌 비트의 개수를 반환함.
    Math.exp(x) ex 의 값을 반환함. (e : 오일러의 수)
    Math.expm1(x) 1 - ex 의 값을 반환함.
    Math.fround(x) x와 가장 근접한 32비트 부동 소수점 수(single precision float)를 반환함.
    Math.hypot(x, y, ...) 인수로 전달받은 값들을 각각 제곱한 후 더한 총합의 제곱근을 반환함.
    Math.imul(x, y) 인수로 전달받은 두 값의 32비트 곱셈의 결과를 반환함.
    Math.log(x) x의 자연로그 값을 반환함. (ln x)
    Math.log1p(x) ln(1 + x)의 값을 반환함.
    Math.log10(x) x의 10을 밑으로 가지는 로그 값을 반환함.
    Math.log2(x) x의 2를 밑으로 가지는 로그 값을 반환함.
    Math.pow(x, y) x의 y승을 반환함.
    Math.sign(x) x의 부호 값을 반환함.
    Math.trunc(x) x의 모든 소수 부분을 삭제하고 정수 부분만을 반환함.
    Math.sin(x), Math.cos(x), Math.tan(x),Math.asin(x), Math.acos(x), Math.atan(x), Math.asinh(x), Math.acosh(x), Math.atanh(x), Math.atan2(x) x의 해당 삼각 함숫값을 반환함.

    자바스크립트 Math 프로퍼티

    프로퍼티 설명
    Math.E 오일러의 수(Euler's constant)라고 불리며, 자연로그(natural logarithms)의 밑(base) 값 2.718
    Math.LN2 2의 자연로그 값 0.693
    Math.LN10 10의 자연로그 값 2.303
    Math.LOG2E 오일러 수(e)의 밑 값이 2인 로그 값 1.443
    Math.LOG10E 오일러 수(e)의 밑 값이 10인 로그 값 0.434
    Math.PI 원의 원주를 지름으로 나눈 비율(원주율) 값 3.14159
    Math.SQRT1_2 2의 제곱근의 역수 값 0.707
    Math.SQRT2 2의 제곱근 값 1.414

    잘못된 내용이 있으면 언제든 피드백 부탁드립니다.

    이 글이 좋으셨다면 구독 & 좋아요

    여러분의 구독과 좋아요는
    저자에게 큰 힘이 됩니다.


    Light Dev
    Light dev
    웹 개발자로의 새로운 여정을 시작해 보겠습니다. 조언해주실 부분이 있으시면 언제든 이메일 부탁드립니다.

    사이트를 방문해 주셔서 감사합니다

    만일 도움이 되셨으면 공감과 구독 버튼 클릭 부탁드립니다.
    추가적인 질문사항이나 이해가 안되는 점이 있으면 댓글로 적어주세요.

      Light9639
      티스토리에 팔로잉