본문 바로가기
프로그래밍/예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)

예제로 배우는 자바스크립트 요약 및 코드 분석 10장 10.1

by 리드민 2023. 10. 15.
반응형

10장 내장 객체

  내장 객체는 프로그래머가 별도로 객체를 정의할 필요가 없는 자바스크립트 자체에서 제공하는 객체이다. 10장에서는 수학에 관련된 Math 객체, 날짜와 시간을 다루는 Date 객체, 집합 개념을 가진 Set 객체에서 제공하는 프로퍼티와 메서드에 대해 배운다. 또한 키-값으로 데이터를 다루는 Map 객체에 대해 알아보자. Map 객체를 생성한 다음 객체에 새로운 요소를 추가하고, 삭제하는 방법에 대해 학습하자.

 

10.1 Math 객체

  Math 객체는 자바스크립트의 내장 객체로써 프로그램에서 수학적 연산을 위한 다양한 메서드를 제공한다. Math 객체의 메서드 중 많이 사용되는 것들을 표로 정리하면 다음과 같다.

Math 객체의 메서드
메서드 설명
min() 최솟값을 반환함
max() 최댓값을 반환함
abs() 절댓값을 반환함
round() 반올림한 정수 값을 반환함
floor() 무조건 내림한 정수 값을 반환함
ceil() 무조건 올림한 정수 값을 반환함
pow() 거듭제곱 값을 반환함
sqrt() 제곱근 값을 반환함
log() 로그 값을 반환함
random() 0~1 사이의 무작위 부동 소수점 숫자를 반환함

 

10.1.1 min()/max() 메서드

  Math 객체의 min()과 max() 메서드는 주어진 숫자에 대해 최솟값과 최댓값을 구하는데 사용된다.

예제 10-2. abs() 메서드로 절댓값 구하기 math_abs.html 코드 원문 
<p id="show"></p>
<script>
    let a = Math.abs(-8.3);         // 8.3
    let b = Math.abs(-2);           // 2
    let c = Math.abs("a");          // NaN
    let d = Math.abs(6);            // 6
    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<br>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>
예제 10-2. abs() 메서드로 절댓값 구하기 math_abs.html 코드 분석 
<p id="show"></p>
<script>
    let a = Math.abs(-8.3);         // 8.3
    // abs() 메서드를 사용해서 주어진 숫자의 절댓값을 반환한다. 8.3이 반환된다.
    let b = Math.abs(-2);           // 2
    // abs() 메서드를 사용해서 주어진 숫자의 절댓값을 반환한다. 2가 반환된다.
    let c = Math.abs("a");          // NaN
    // abs() 메서드를 사용해서 주어진 숫자의 절댓값을 반환한다. NaN가 반환된다.
    let d = Math.abs(6);            // 6
    // abs() 메서드를 사용해서 주어진 숫자의 절댓값을 반환한다. NaN가 반환된다.
    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<br>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>

 

10.1.3 round() 메서드

Math 객체의 round() 메서드는 숫자의 반올림 값을 구하는 데 사용된다.

예제 10-3. round() 메서드로 반올림 값 구하기 math_round.html 코드 원문 
<p id="show"></p>
<script>
    let a = Math.round(5, 8);    // 6;
    let b = Math.round(5, 3);    // 5;
    let c = Math.round(-3.75);  // -4;
    let d = Math.round(-3.1);   // -3

    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<br>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>
예제 10-3. round() 메서드로 반올림 값 구하기 math_round.html 코드 분석 
<p id="show"></p>
<script>
    let a = Math.round(5, 8);    // 6;
    // Math 객체의 round 메서드를 사용해서 숫자의 반올림 값을 구한다. 6이 반환된다.
    let b = Math.round(5, 3);    // 5;
    // Math 객체의 round 메서드를 사용해서 숫자의 반올림 값을 구한다. 5가 반환된다.
    let c = Math.round(-3.75);  // -4;
    let d = Math.round(-3.1);   // -3

    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<br>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>

 

10.1.4 floor() 메서드

  Main 객체의 floor() 메서드는 숫자에서 소수점 이하 값을 버리는 데 사용된다.

예제 10-4. floor() 메서드로 내림값 구하기 main_floor.html 코드 원문 
<p id="show"></p>
<script>
    let a = Math.floor(7,8);    // 7
    let b = Math.floor(7,3);    // 7
    let c = Math.floor(-2.75);  // -3
    let d = Math.floor(-2.1);   // -3

    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<bc>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>
예제 10-4. floor() 메서드로 내림값 구하기 main_floor.html 코드 원문

 

<p id="show"></p>
<script>
    let a = Math.floor(7.8);    // 7
    /* floor() 메서드는 숫자에서 소수점 이하 값을 버리는데 사용된다.
    floor(7.8)은 7이다. */
    let b = Math.floor(7.3);    // 7
    // Math 객체의 floor 메서드를 사용해서 값 7.3를 입력한다. 반환값은 7이다.
    let c = Math.floor(-2.75);  // -3
    let d = Math.floor(-2.1);   // -3

    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<bc>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>

  Math.floor() 메서드는 주어진 숫자보다 크지 않는 정수 값을 반환한다. 예를 들어 7.99는 7이 되고 7.1도 7이 된다.

 

10.1.5 ceil() 메서드

Math 객체의 ceil() 메서드는 floor() 메서드와는 반대로 소수점 이하를 무조건 올림하는데 사용된다.

예제 10-5. ceil()메서드로 올림값 구하기 math_ceil.html 코드 원문 
<p id="show"></p>
<script>
    let a = Math.ceil(3.8);     // 4
    let b = Math.ceil(3.3);     // 4
    let c = Math.ceil(-6.75);   // -6
    let d = Math.ceil(-6.1);    // -6

    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<br>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>
예제 10-5. ceil()메서드로 올림값 구하기 math_ceil.html 코드 분석 
<p id="show"></p>
<script>
    let a = Math.ceil(3.8);     // 4
    /* ceil() 메서드는 소수점 이하를 올림하는데 사용된다.
    ceil(3.8)은 4를 반환한다. */
    let b = Math.ceil(3.3);     // 4
    // Math 객체의 ceil 메서드를 사용해서 올림한다.
    let c = Math.ceil(-6.75);   // -6
    let d = Math.ceil(-6.1);    // -6

    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<br>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>

Math.ceil() 메서드는 주어진 숫자보다 작지 않는 정수 값을 반환한다. 예를 들어 3.99는 4가 되고 3.1도 4가 된다.

 

10.1.6 pow() 메서드

  Math 객체의 pow(x,y) 메서드는 x에 대한 거듭제곱, 즉 x^y를 구하는 데 사용된다.

예제 10-6. pow() 메서드로 거듭제곱 값 구하기 math_pow.html 코드 원문 
<p id="show"></p>
<script>
    let a = Math.pow(2, 3);      // 8
    let b = Math.pow(1, 10);     // 1
    let c = Math.pow(-3, 3);     // -27
    let d = Math.pow(2, -2);     // 0.25

    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<br>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>
예제 10-6. pow() 메서드로 거듭제곱 값 구하기 math_pow.html 코드 원문 
<p id="show"></p>
<script>
    let a = Math.pow(2, 3);      // 8
    let b = Math.pow(1, 10);     // 1
    let c = Math.pow(-3, 3);     // -27
    let d = Math.pow(2, -2);     // 0.25

    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<br>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>

 

10.1.7 sqrt() 메서드

  Math 객체의 sqrt() 메서드는 주어진 숫자의 제곱근(square root) 값을 구하는 데 사용된다.

예제 10-7. sqrt() 메서드로 제곱근 값 구하기 math_sqrt.html 코드 원문 
<p id="show"></p>
<script>
    let a = Math.sqrt(25);              // 5
    let b = Math.sqrt(1);               // 1
    let c = Math.sqrt(2);               // 1.4142135623730951
    let d = Math.sqrt(-9);              // NaN

    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<br>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>
예제 10-7. sqrt() 메서드로 제곱근 값 구하기 math_sqrt.html 코드 븐석 
<p id="show"></p>
<script>
    let a = Math.sqrt(25);              // 5
    /* Math 객체의 sqrt() 메서드는 주어진 숫자의 제곱근(square root) 값을 구하는데
    사용된다. 숫자 25의 제곱근은 5이다. */
    let b = Math.sqrt(1);               // 1
    /* Math 객체의 sqrt() 메서드는 주어진 숫자의 제곱근(square root) 값을 구하는데
    사용된다. 숫자 1의 제곱근은 1이다. */
    let c = Math.sqrt(2);               // 1.4142135623730951
    /* Math 객체의 sqrt() 메서드를 사용해서 숫자 2의 제곱근을 구한다. */
    let d = Math.sqrt(-9);              // NaN
	/* Math 객체의 sqrt() 메서드를 사용해서 숫자 -9의 제곱근을 구한다.
    -9의 제곱근은 없으므로 NaN가 반환된다. */
    
    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<br>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>

 

10.1.8 log() 메서드

Math 객체의 log() 메서드는 주어진 숫자의 자연 로그 값을 구하는 데 사용된다.

예제 10-8. log() 메서드로 자연 로그 값 구하기 math_log.html 코드 원문 
<p id="show"></p>
<script>
    let a = Math.log(2,8);  // 1.0296194171811581
    let b = Math.log(1);    // 0
    let c = Math.log("a");  // NaN
    let d = Math.log(-3);   // Nan
    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<br>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>
예제 10-8. log() 메서드로 자연 로그 값 구하기 math_log.html 코드 원문 
<p id="show"></p>
<script>
    let a = Math.log(2,8);  // 1.0296194171811581
    let b = Math.log(1);    // 0
    let c = Math.log("a");  // NaN
    let d = Math.log(-3);   // Nan
    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<br>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>

Math 객체의 log() 메서드는 주어진 숫자의 자연 로그 값을 반환한다. 숫자가 음수인 경우에는 NaN을 반환하고, 0인 경우에는 -Infinity를 반환한다.

 

10.1.9 random() 메서드

  Math 객체의 random() 메서드는 0에서 1(1은 포함되지 않음) 사이의 무작위 값을 얻는 데 사용된다.

예제 10-9. random() 메서드로 무작위 값 구하기 math_random.html 코드 원문 
<p id="show"></p>
<script>
    let a = Math.random();
    let b = Math.random();
    let c = Math.floor((Math.random() * 100) + 1);
    let d = Math.floor((Math.random() * 100) + 1);

    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<br>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>
예제 10-9. random() 메서드로 무작위 값 구하기 math_random.html 코드 원문 
<p id="show"></p>
<script>
    let a = Math.random();
    // random() 메서드를 사용해서 무작위 값을 얻는다. 그 값을 변수 a에 저장한다.
    let b = Math.random();
    // random() 메서드를 사용해서 무작위 값을 얻는다. 그 값을 변수 b에 저장한다.
    let c = Math.floor((Math.random() * 100) + 1);
    let d = Math.floor((Math.random() * 100) + 1);

    text = "";
    text += a + "<br>";
    text += b + "<br>";
    text += c + "<br>";
    text += d;
    document.getElementById("show").innerHTML = text;
</script>

 

반응형

'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글

예제로 배우는 자바스크립트 요약 및 코드 분석 10장 10.4  (0) 2023.10.16
예제로 배우는 자바스크립트 요약 및 코드 분석 10장 10.2~10.3  (0) 2023.10.15
예제로 배우는 자바스크립트 요약 및 코드 분석 9장 9.3 ~ 9.5  (0) 2023.10.14
예제로 배우는 자바스크립트 요약 및 코드 분석 9장 9.1 ~ 9.2  (0) 2023.10.14
예제로 배우는 자바스크립트 요약 및 코드 분석 8장 8.4 ~ 8.5  (0) 2023.10.13

관련글

티스토리툴바