[JS] 4. 표준 내장 객체(1)

Shy·2023년 9월 12일
0

NodeJS(Express&Next.js)

목록 보기
29/39

문자

String MDN

주요 메서드

length

const str = 'Hello world!' // 느낌표, 띄어쓰기 포함 12개 문자

console.log(str.length) // 12

indexOf

indexOf() 메서드는 호출한 문자열에서 지정된 값과 일치하는 첫 번째 인덱스를 반환하며, 찾지 못한 경우 -1을 반환한다.

const str = 'Hello world!'

console.log(str.indexOf('!')) // 11
console.log(str.indexOf('HEROPY') // -1

padEnd()

padEnd() 메서드는 현재 문자열을 지정된 길이로 만든 후, 원래 문자열의 끝에 다른 문자열(또는 여러 번 반복한 문자열)을 채워 반환한다. 만약 주어진 문자열이 지정된 길이보다 길거나 같다면, 원래 문자열이 그대로 반환된다.

기본문법

str.padEnd(targetLength [, padString])

매개변수

  • targetLength: 결과로 반환된 문자열의 길이
  • padString (선택적): 현재 문자열에 채울 다른 문자열. 생략하면 공백 문자가 사용된다.

예제

const str1 = 'Breaded Mushrooms';
console.log(str1.padEnd(25, '.'));
// 출력: 'Breaded Mushrooms........'

const str2 = '200';
console.log(str2.padEnd(5));
// 출력: '200  '

padStart()

padStart() 메서드는 현재 문자열을 지정된 길이로 만든 후, 원래 문자열의 시작(왼쪽)에 다른 문자열(또는 여러 번 반복한 문자열)을 채워 반환한다. 만약 주어진 문자열이 지정된 길이보다 길거나 같다면, 원래 문자열이 그대로 반환된다.

기본문법

str.padStart(targetLength [, padString])

매개변수

  • targetLength: 결과로 반환된 문자열의 길이
  • padString (선택적): 현재 문자열에 채울 다른 문자열. 생략하면 공백 문자가 사용된다.

예제

const str1 = '5';
console.log(str1.padStart(2, '0'));
// 출력: '05'

const str2 = '2023';
console.log(str2.padStart(6, '20'));
// 출력: '202023'

const str3 = 'abc';
console.log(str3.padStart(10, '0123456789'));
// 출력: '0123456abc'

padStart()는 특히 숫자나 날짜와 같은 문자열을 형식에 맞게 앞쪽에 '0'을 붙이는 등의 작업에 유용하게 사용된다.

replace()

replace() 메서드는 문자열에서 특정 패턴과 일치하는 부분을 다른 문자열로 교체한다. 이 패턴은 문자열 또는 정규표현식(RegExp)이 될 수 있다.

문법

str.replace(regexp|substr, newSubstr|function)

매개변수

  • regexp|substr: 교체 대상이 되는 문자열 또는 정규표현식.
  • newSubstr|function: 교체할 문자열 또는 교체를 수행하는 함수.

예제

  1. 문자열로 대체하기
const str = 'Hello, world!';
const newStr = str.replace('world', 'JavaScript');
console.log(newStr);  // 'Hello, JavaScript!'
  1. 정규표현식으로 대체하기
    여기서 /g는 전역 플래그로, 문자열 내의 모든 "apple"을 교체한다.
const str = 'apple, banana, apple';
const newStr = str.replace(/apple/g, 'grape');
console.log(newStr);  // 'grape, banana, grape'
  1. 함수를 사용하여 대체하기
const str = '1, 2, 3, 4, 5';
const newStr = str.replace(/\d/g, match => {
    return parseInt(match) * 10;
});
console.log(newStr);  // '10, 20, 30, 40, 50'

replace() 메서드는 원래 문자열을 변경하지 않는다. 대신, 교체가 적용된 새로운 문자열을 반환한다. 원본 문자열은 그대로 유지된다.

slice

자바스크립트에서 slice() 메서드는 주어진 시작 인덱스부터 끝 인덱스까지의 요소를 새로운 배열로 반환하거나 문자열의 부분 문자열을 추출하여 반환하는 메서드이다. 원본 배열이나 문자열은 수정되지 않는다.

배열에 대한 slice()

  • 배열의 slice() 메서드는 시작 인덱스와 끝 인덱스 사이의 요소를 새 배열로 반환한다.
  • 끝 인덱스는 선택 사항이며 제공되지 않을 경우 배열의 끝까지 요소를 포함한다.
const fruits = ['apple', 'banana', 'cherry', 'date'];
console.log(fruits.slice(1, 3)); // ['banana', 'cherry']
console.log(fruits.slice(2));    // ['cherry', 'date']

문자열에 대한 slice()

  • 문자열의 slice() 메서드는 시작 인덱스와 끝 인덱스 사이의 문자들로 구성된 새 문자열을 반환한다.
  • 끝 인덱스는 선택 사항이며 제공되지 않을 경우 문자열의 끝까지 포함한다.
const message = 'Hello, world!';
console.log(message.slice(7, 12)); // 'world'
console.log(message.slice(7));     // 'world!'

또한, 음수 인덱스도 제공할 수 있다. 음수 인덱스는 배열 또는 문자열의 끝에서부터 계산된다.

const fruits = ['apple', 'banana', 'cherry', 'date'];
console.log(fruits.slice(-3, -1)); // ['banana', 'cherry']

const message = 'Hello, world!';
console.log(message.slice(-6, -1)); // 'world'

이러한 특징 덕분에 slice() 메서드는 배열 또는 문자열에서 부분적인 데이터를 쉽게 추출할 수 있게 도와준다.

split() 메서드

자바스크립트의 문자열에서 split() 메서드는 특정 문자나 문자 패턴을 사용하여 문자열을 여러 부분으로 나누고, 그 결과를 배열로 반환한다.

기본 구문

str.split([separator[, limit]])
  • separator (선택 사항): 문자열이나 정규 표현식. 이 값으로 문자열을 분할한다. 제공하지 않을 경우 전체 문자열이 하나의 항목으로 포함된 배열이 반환된다.
  • limit (선택 사항): 반환된 분할 항목의 최대 수. 제공될 경우 반환 배열은 최대 limit 개의 항목을 포함한다.

예제

기본 사용

const sentence = 'The quick brown fox jumps over the lazy dog';
const words = sentence.split(' ');
console.log(words); // ["The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog"]

limit 파라미터 사용

const sentence = 'The quick brown fox jumps over the lazy dog';
const firstThreeWords = sentence.split(' ', 3);
console.log(firstThreeWords); // ["The", "quick", "brown"]

다른 구분자 사용

const csv = 'apple,banana,cherry,date';
const fruits = csv.split(',');
console.log(fruits); // ["apple", "banana", "cherry", "date"]

정규 표현식 사용

const sentence = 'apple. banana, cherry; date';
const fruits = sentence.split(/[\s,;.]+/);
console.log(fruits); // ["apple", "banana", "cherry", "date"]

split() 메서드는 문자열을 배열로 변환할 때 자주 사용되며, 특히 CSV (Comma-Separated Values)와 같은 구분된 데이터를 처리할 때 유용하다.

toLowerCase()

toLowerCase() 메서드는 문자열에서 모든 대문자를 소문자로 변환하여 새로운 문자열을 반환한다. 원래의 문자열은 변경되지 않는다.

예제

const text = 'Hello World!';
const lowerText = text.toLowerCase();
console.log(lowerText); // 'hello world!'

toUpperCase()

toUpperCase() 메서드는 문자열에서 모든 소문자를 대문자로 변환하여 새로운 문자열을 반환한다. 원래의 문자열은 변경되지 않는다.

const text = 'Hello World!';
const upperText = text.toUpperCase();
console.log(upperText); // 'HELLO WORLD!'

이 두 메서드는 주로 사용자의 입력값의 대소문자 구분 없이 일치하는 값을 찾을 때 유용하게 사용된다. 예를 들어, 사용자가 대소문자를 구분하지 않고 검색을 입력할 경우 검색어와 데이터의 대소문자를 모두 소문자(또는 대문자)로 변환하여 일치하는지 확인할 수 있다.

trim

trim() 메서드는 문자열의 시작과 끝에서 공백 문자를 제거한 새로운 문자열을 반환한다. 이 메서드는 원본 문자열을 수정하지 않으며, 대신 수정된 새로운 문자열을 반환한다.

"공백 문자"는 다음을 포함한다.

  • 스페이스 (' '),
  • 탭 ('\t'),
  • 줄 바꿈 문자 ('\n', '\r').

예제

const text = '   Hello World!   ';
const trimmedText = text.trim();
console.log(trimmedText); // 'Hello World!' 중간에 있는 공백은 제거하지 않는다.

trim() 메서드는 주로 사용자 입력에서 앞뒤의 불필요한 공백을 제거하는 데 유용하게 사용된다.

숫자

주요 메서드

toFixed()

toFixed()는 Number 타입의 프로토타입 메서드로서, 숫자를 고정 소수점 표기법의 문자열로 반환한다. 이 메서드는 파라미터로 원하는 소수점 아래의 자릿수를 받아 해당 자릿수까지 반올림하여 문자열로 반환한다.

매개변수

  • digits (선택적): 소수점 아래로 나타낼 자릿수. 기본값은 0입니다. 가능한 값은 0부터 20까지이다.

반환 값

  • 소수점 이하의 숫자를 반올림하여 주어진 자릿수까지 표시하는 문자열을 반환한다.

예제

const num = 10.45678;

console.log(num.toFixed());      // "10" (소수점 아래를 지정하지 않으면 기본값 0을 사용)
console.log(num.toFixed(2));     // "10.46" (소수점 아래 두 자리까지 반올림)
console.log(num.toFixed(4));     // "10.4568" 이 데이터는 문자이다
console.log(parseFloat(num.toFixed(2))) //  이 데이터는 숫자이다.

주의할 점

  • toFixed()의 반환값은 문자열이다. 숫자로 다시 변환하려면 parseFloat() 또는 Number() 함수를 사용해야 한다.
  • toFixed()는 반올림을 수행하므로, 0.5나 그 이상의 값에 따라 올림이 발생할 수 있다.
  • 이 메서드는 주로 금융 애플리케이션에서 돈과 같은 값을 표시할 때 유용하게 사용된다, 소수점 아래 정확한 자릿수를 보장하기 위해서이다.

toLocaleString()

toLocaleString() 메서드는 기본 객체의 프로토타입에 존재하는 메서드이다. 주로 Number와 Date 객체에서 사용되며, 이 메서드는 객체의 값을 문자열로 변환하여 주어진 로캘 또는 호스트 기본 설정의 로캘에 맞게 포맷팅된 형태로 반환한다.

  1. Number에 사용될 때
    숫자를 특정 로캘의 숫자 표기법으로 변환한다.
const number = 123456.789;

console.log(number.toLocaleString('en-US')); 
// "123,456.789" - 미국 스타일로 천 단위 구분 기호 사용

console.log(number.toLocaleString('de-DE')); 
// "123.456,789" - 독일 스타일로 천 단위 구분 기호와 소수점 기호 사용
  1. Date에 사용될 때
    날짜와 시간을 특정 로캘의 날짜 및 시간 표기법으로 변환한다.
const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));

console.log(date.toLocaleString('en-US')); 
// "12/19/2020, 7:23:16 PM"

console.log(date.toLocaleString('ko-KR')); 
// "2020. 12. 20. 오후 12:23:16"

매개변수

  • locales (선택적): 문자열이나 문자열 배열로 특정 로캘을 나타낸다. 이 값이 주어지지 않을 경우, JavaScript 엔진에서 실행되는 환경의 기본 로캘을 사용한다.
  • options (선택적): 로캘 표기법 및 옵션을 명시적으로 설정하기 위한 객체이다.

반환 값
주어진 로캘 또는 호스트 기본 로캘에 따라 포맷팅된 문자열을 반환한다.

toLocaleString() 메서드는 다국어 지원이 필요한 웹 애플리케이션을 개발할 때 유용하게 사용된다. 여러 나라의 사용자에게 해당 나라의 표기법에 맞는 정보를 제공할 수 있기 때문이다.

로캘이란?

로캘(Locale)은 언어, 국가 또는 지역, 그리고 그것들에 관련된 선호나 관습을 지칭하는 용어이다. 컴퓨터에서 로캘은 사용자의 언어와 지역에 따른 프로그램의 동작을 지정하기 위해 사용된다.

예를 들어, 로캘은 다음과 같은 작업에 영향을 준다.

  1. 날짜와 시간의 형식: 어떤 나라에서는 월/일/년으로 표시되지만, 다른 나라에서는 일/월/년으로 표시된다.
  2. 통화: 달러 기호($) 대신 유로 기호(€)나 원(₩) 등의 다른 통화 기호를 사용할 수 있다.
  3. 숫자와 소수점 표기: 어떤 국가에서는 천 단위로 쉼표(,)를 사용하여 숫자를 구분하고, 소수점으로 점(.)을 사용하는 반면, 다른 국가에서는 이 반대로 사용될 수 있다.
  4. 문자 정렬 순서: 어떤 언어에서는 특정 문자나 문자 조합이 다른 순서로 정렬될 수 있다.
  5. 문자와 텍스트의 표현: 문자가 어떻게 표시되거나, 대/소문자 변환 규칙 등이 언어나 지역에 따라 다를 수 있다.

웹과 같은 글로벌 플랫폼에서 다양한 사용자에게 서비스를 제공하려면, 그들의 로캘에 따라 적절한 형식으로 정보를 표시해야 한다. 자바스크립트와 같은 프로그래밍 언어는 이러한 로캘 정보를 처리하기 위한 메서드와 도구를 제공한다.

isInteger

isInteger 메소드는 JavaScript의 Number 객체에 있는 정적 메소드이다. 이 메소드는 주어진 값이 정수인지 아닌지를 판별하여 true 또는 false로 반환한다.

Number.isInteger(value);
// 여기서 value는 검사할 값이다.

예시

console.log(Number.isInteger(123));    // true
console.log(Number.isInteger(123.456)); // false
console.log(Number.isInteger('123'));   // false (문자열이므로)

몇 가지 주의점

  1. isInteger는 값이 정수라면 true를, 아니라면 false를 반환한다.
  2. isInteger는 Number 객체의 메소드이기 때문에 항상 Number.을 사용하여 호출해야 한다.
  3. NaN이나 무한대 값들은 정수가 아니므로 false를 반환한다.

이 메소드는 프로그래밍에서 정수 여부를 확인해야 하는 상황에 유용하게 사용될 수 있다.

isNaN

isNaN 메소드는 주어진 값이 NaN (Not-a-Number)인지 아닌지를 판별하여 true 또는 false로 반환한다. JavaScript에서는 isNaN이 두 가지 버전으로 사용됩니다: 전역 함수와 Number 객체의 정적 메소드.

전역 함수 isNaN()

전역 함수인 isNaN()는 값을 강제로 숫자로 변환한 후 그 값이 NaN인지 확인한다.

console.log(isNaN(NaN));         // true
console.log(isNaN(undefined));  // true
console.log(isNaN('string'));   // true
console.log(isNaN(123));        // false
console.log(isNaN('123'));      // false (문자열 '123'은 숫자로 변환될 수 있으므로)

Number.isNaN()

Number.isNaN()는 ES6에서 도입된 메소드로, 값이 정확히 NaN인 경우에만 true를 반환한다. 그 값에 대한 형변환을 수행하지 않는다.

console.log(Number.isNaN(NaN));         // true
console.log(Number.isNaN(undefined));  // false (강제 형변환 없이 직접 확인하기 때문에)
console.log(Number.isNaN('string'));   // false
console.log(Number.isNaN(123));        // false
console.log(Number.isNaN('123'));      // false

대부분의 경우 Number.isNaN()을 사용하는 것이 더 안전하며 예상한 대로 동작한다. 전역 함수 isNaN()의 경우 일부 예상치 않은 결과가 발생할 수 있기 때문에 사용할 때 주의가 필요하다.

ParseInt

parseInt(string, radix);

parseInt()는 문자열을 분석하여 특정 진법 (기본값은 10진법)의 정수로 변환하는 함수이다.

  • string: 변환할 문자열입니다.
  • radix (옵션): 2부터 36까지의 기수를 나타내며, 문자열이 어떤 진법으로 해석되어야 하는지를 지정한다. 가장 일반적으로 사용되는 값은 10이다 (10진수).
console.log(parseInt('42'));        // 42
console.log(parseInt('42.7'));     // 42
console.log(parseInt('10', 2));    // 2 (이진법으로 '10'을 해석하면 10진수로 2)
console.log(parseInt('42px'));     // 42 (문자 'p' 앞까지만 해석)
console.log(parseInt('hello'));    // NaN (숫자로 해석할 수 없음)

주의사항

  • parseInt()는 문자열의 왼쪽에서 오른쪽으로 문자를 읽으며 숫자가 아닌 첫 문자를 만나면 그 지점에서 분석을 중지한다. 따라서 위의 '42px' 예제에서 parseInt()는 'p'를 만나면 문자열 분석을 중지하게 된다.
  • 지정된 radix가 2 (이진법)에서 36 (36진법) 사이의 값이 아니면 parseInt()는 string을 10진법으로 해석한다.
  • radix를 생략하면 문자열에 따라 다른 진법이 사용될 수 있다. 예를 들어, 문자열이 "0x"로 시작하면 16진법으로 해석된다. 하지만, 진법의 혼동을 피하기 위해 가능한 항상 radix를 지정하는 것이 좋다.

사용 추천

  • parseInt()는 주로 문자열에서 정수를 추출할 때나, 다른 진법의 숫자를 10진수로 변환할 때 사용된다.
  • 숫자만을 다루는 상황에서 문자열로부터 소수점을 제거하려는 목적으로 parseInt()를 사용하는 것은 바람직하지 않다. 대신, 적절한 수학 연산 (예: Math.floor(), Math.round())을 사용하는 것이 좋다.

parseInt

parseFloat() 함수는 문자열을 분석하여 부동 소수점 실수로 반환합니다.

parseFloat(string);
// string: 변환할 문자열이다.

예제

console.log(parseFloat('42'));           // 42
console.log(parseFloat('42.7'));         // 42.7
console.log(parseFloat('10.5abc'));      // 10.5 (문자 'a' 앞까지만 해석)
console.log(parseFloat('0.03e3'));       // 30 (지수 표기법으로 해석)
console.log(parseFloat('hello42.7'));    // NaN (첫 문자부터 숫자가 아님)

주의사항

  • parseFloat()는 문자열의 왼쪽에서 오른쪽으로 문자를 읽으며 숫자가 아닌 첫 문자를 만나면 그 지점에서 분석을 중지한다.
  • parseFloat()은 항상 10진수로 문자열을 해석한다. 따라서 radix 인수가 없으며, 10진법 외의 다른 진법에서 사용할 수 없다.
  • 문자열이 유효한 부동 소수점 숫자를 포함하지 않으면 NaN을 반환한다.

사용 추천

  • parseFloat()는 문자열에서 실수를 추출할 때 주로 사용된다.
  • 숫자 표현 중에서도 지수 표기법 (예: '3.14e2')을 올바르게 해석할 수 있다.
  • 문자열 내의 유효한 숫자 표현 뒤에 다른 문자나 공백이 있더라도, 그 문자나 공백 이전까지의 유효한 숫자만을 반환한다.

수학

주요 메소드

abs

Math.abs() 메서드는 주어진 숫자의 절대값을 반환한다.

Math.abs(value);
// value: 절대값을 구할 숫자이다.

예제

console.log(Math.abs(10));    // 10
console.log(Math.abs(-10));   // 10
console.log(Math.abs(-0.123)); // 0.123
console.log(Math.abs(0));     // 0

특징 및 주의사항

  • 주어진 값이 음수이면, 양의 절대값으로 반환한다.
  • 주어진 값이 양수이면, 그대로 반환한다.
  • 주어진 값이 0이면, 0을 반환한다.
  • NaN이 인자로 주어지면, NaN을 반환한다.

Math.abs() 메서드는 주로 숫자의 부호와 관계없이 해당 값의 크기만 필요할 때 사용한다.

ceil

Math.ceil() 메서드는 주어진 숫자와 같거나 큰 가장 작은 정수를 반환한다. 다시 말해, Math.ceil()는 주어진 숫자를 올림하여 가장 가까운 정수를 구한다.

Math.ceil(value);
// value: 올림할 숫자이다.

예제

console.log(Math.ceil(1.1));    // 2
console.log(Math.ceil(-1.1));   // -1
console.log(Math.ceil(0.7));    // 1
console.log(Math.ceil(-0.7));   // 0
console.log(Math.ceil(1));      // 1

특징 및 주의사항

  • 양수의 소수부분이 있을 때는 숫자를 올린다.
  • 음수의 소수부분이 있을 때는 숫자를 절대값 기준으로 올림한 후 부호를 다시 적용한다. 즉, -1.1은 -1로 올림된다.
  • NaN이 인자로 주어지면, NaN을 반환한다.

Math.ceil() 메서드는 주로 숫자를 정수로 올림하고자 할 때 사용한다. 주로 수학적 연산에서 나머지 소수 부분을 무시하고 싶을 때 유용하게 사용된다.

floor

Math.floor() 메서드는 주어진 숫자보다 작거나 같은 가장 큰 정수를 반환한다. 즉, Math.floor()는 주어진 숫자를 내림하여 가장 가까운 정수를 구한다.

Math.floor(value);
// value는 내림할 숫자이다.

예제

console.log(Math.floor(1.9));    // 1
console.log(Math.floor(-1.9));   // -2
console.log(Math.floor(0.7));    // 0
console.log(Math.floor(-0.7));   // -1
console.log(Math.floor(1));      // 1

특징 및 주의사항

  • 양수의 소수부분이 있을 때는 숫자를 내린다.
  • 음수의 소수부분이 있을 때는 숫자를 절대값 기준으로 내림한 후 부호를 다시 적용한다. 즉, -1.9는 -2로 내림된다.
  • NaN이 인자로 주어지면, NaN을 반환한다.

Math.floor() 메서드는 주로 숫자를 정수로 내림하고자 할 때 사용된다. 특히 배열 인덱싱이나 순서가 중요한 경우 등에 해당 값의 정수 부분만을 사용하고 싶을 때 유용하게 사용된다.

Max

Math.max() 메서드는 전달받은 숫자 중에서 가장 큰 숫자를 반환한다. 이 메서드는 두 개 이상의 매개변수를 받을 수 있으며, 그 중에서 가장 큰 값을 반환한다.

Math.max(value1, value2, ..., valueN);

// value1, value2, ..., valueN: 비교할 숫자들이다.

예제

console.log(Math.max(1, 2, 3, 4, 5));  // 5
console.log(Math.max(-1, -2, -3, -4)); // -1

배열의 요소 중에서 가장 큰 값을 찾고 싶다면 스프레드 문법과 함께 사용할 수 있다.

const numbers = [1, 2, 3, 4, 5];
console.log(Math.max(...numbers));  // 5

주의사항

  • Math.max()에 아무런 매개변수도 전달하지 않으면 -Infinity를 반환한다.
  • 비교하려는 값 중 하나라도 숫자가 아니면 (예: 문자열, 객체 등) NaN를 반환한다.

활용

Math.max()는 주로 주어진 값들 중에서 최대 값을 찾아야 할 때 사용된다. 예를 들어 배열의 최대 값을 찾거나, 사용자로부터 입력받은 여러 값 중에서 최대 값을 찾는 등의 상황에서 유용하게 활용될 수 있다.

min

Math.min() 메서드는 전달받은 숫자 중에서 가장 작은 숫자를 반환한다. Math.max()의 반대 역할을 하는 메서드라고 생각할 수 있다.

Math.min(value1, value2, ..., valueN);
// value1, value2, ..., valueN: 비교할 숫자들이다.

예제

console.log(Math.min(1, 2, 3, 4, 5));  // 1
console.log(Math.min(-1, -2, -3, -4)); // -4

배열의 요소 중에서 가장 작은 값을 찾고 싶다면 스프레드 문법과 함께 사용할 수 있다.

const numbers = [1, 2, 3, 4, 5];
console.log(Math.min(...numbers));  // 1

주의사항

  • Math.min()에 아무런 매개변수도 전달하지 않으면 Infinity를 반환한다.
  • 비교하려는 값 중 하나라도 숫자가 아니면 (예: 문자열, 객체 등) NaN를 반환한다.

활용

Math.min()는 주어진 값들 중에서 최소 값을 찾아야 할 때 사용된다. 예를 들어 배열의 최소 값을 찾거나, 사용자로부터 입력받은 여러 값 중에서 최소 값을 찾는 등의 상황에서 유용하게 활용될 수 있다.

pow

Math.pow(base, exponent);

// base: 거듭제곱의 밑이 될 숫자이다.
// exponent: 몇 승으로 거듭제곱할 것인지를 나타내는 숫자이다.

Math.pow() 메서드는 두 숫자를 매개변수로 받아서 첫 번째 숫자의 두 번째 숫자만큼의 거듭제곱 값을 반환한다.

console.log(Math.pow(2, 3));   // 8, 왜냐하면 2의 3승은 8입니다.
console.log(Math.pow(7, 2));   // 49, 왜냐하면 7의 2승은 4이.
console.log(Math.pow(3, 3));   // 27, 왜냐하면 3의 3승은 27이다.

주의사항

Math.pow()의 반환 값은 항상 숫자이다. 그러나 입력 값이 숫자가 아닌 경우 결과는 NaN이 될 수 있다.

활용

Math.pow()는 수학적 계산이 필요할 때, 특히 거듭제곱 값을 구할 때 주로 사용된다. 예를 들어, 공학적 연산, 물리학 연산, 금융 연산 등에서 종종 활용된다.

random

Math.random();

Math.random() 메서드는 0(포함)과 1(미포함) 사이의 부동 소수점 의사 난수(가짜 난수)를 반환한다. 다시 말해, 반환되는 난수는 0 이상 1 미만의 범위에 있다.

예제

console.log(Math.random());   // 예: 0.1234567894321

활용

  1. 특정 범위의 정수 난수 생성
    일반적으로 Math.random()은 다양한 범위의 난수를 생성하기 위해 다른 연산과 함께 사용된다. 예를 들어, 1부터 10까지의 난수를 얻고 싶다면
const randomBetween1And10 = Math.floor(Math.random() * 10) + 1;
  1. 0과 1 사이의 실수 값 생성
    특정 범위의 실수 값을 생성할 때도 Math.random()을 사용할 수 있다. 예를 들어, 0부터 5까지의 부동 소수점 값을 생성하려면
const randomFloatBetween0And5 = Math.random() * 5;

주의사항

  • Math.random()은 완벽하게 랜덤한 값을 제공하지는 않는다. 보안적으로 중요한 용도로는 사용하지 않아야 한다.
  • 만약 보안적으로 중요한 용도로 랜덤 값을 필요로 한다면, 다른 암호화 라이브러리나 메서드를 사용해야 한다.

round

Math.round(x);
// x: 반올림할 숫자이다.

Math.round() 메서드는 주어진 숫자를 가장 가까운 정수로 반올림한다.

예제

console.log(Math.round(20.49));  // 20
console.log(Math.round(20.5));   // 21
console.log(Math.round(-20.5));  // -20
console.log(Math.round(-20.51)); // -21
// 소수점 두 자리에서 반올림
const number = 5.1234;
const rounded = Math.round(number * 100) / 100; 
console.log(rounded); // 5.12

설명

  • Math.round()는 인자로 주어진 숫자에 대해 0.5 이상일 경우 올림하고, 그 이하일 경우 내린다.
  • 음수의 경우에도 0.5 이상일 때 바로 위의 정수로, 그 이하일 때는 바로 아래의 정수로 반올림된다.

주의사항

JavaScript에서는 부동 소수점 숫자를 사용하기 때문에, 때로는 예상치 못한 반올림 결과를 얻을 수 있다. 이는 컴퓨터가 숫자를 이진 형식으로 표현하기 때문에 발생하는 문제이다. 따라서 정확한 소수점 연산이 필요한 경우에는 별도의 라이브러리를 사용하는 것이 좋다.

날짜

날짜 생성

JavaScript의 Date 객체를 사용하면 날짜와 시간을 표현할 수 있다. new Date()를 사용하여 다양한 방식으로 날짜와 시간을 생성할 수 있다.

  1. 현재 날짜와 시간 생성
const now = new Date();
console.log(now);
  1. 특정 날짜 생성 (년, 월, 일 형식 - 월은 0부터 시작해서 11까지 입니다. 예: 0은 1월, 11은 12월)
const specificDate = new Date(2023, 0, 1); // 2023년 1월 1일
console.log(specificDate);
  1. 특정 날짜와 시간 생성 (년, 월, 일, 시, 분, 초, 밀리초)
const specificDateTime = new Date(2023, 0, 1, 14, 30, 0, 0); // 2023년 1월 1일 14시 30분
console.log(specificDateTime);
  1. 타임스탬프(1970년 1월 1일부터 경과된 밀리초)로 날짜 생성
const fromTimestamp = new Date(1681872000000); // 2023년 1월 1일 00:00:00 (시간대에 따라 결과가 다를 수 있음)
console.log(fromTimestamp);
  1. 문자열로 날짜 생성
const fromString = new Date('2023-01-01T14:30:00Z'); // UTC 시간으로 2023년 1월 1일 14시 30분
console.log(fromString);

주의사항

  • 월은 0부터 시작하기 때문에 원하는 월의 숫자에서 1을 빼야 한다.
  • 타임존에 따라 출력 결과가 다를 수 있다. UTC 시간을 기준으로 날짜를 생성하려면 '2023-01-01T14:30:00Z'와 같이 문자열 뒤에 Z를 붙여야 한다.

Date 객체는 날짜와 시간을 표현하며, 다양한 메서드를 제공하여 날짜와 시간 정보를 얻거나 설정할 수 있다.

주요 메소드

getFullYear

getFullYear() 메소드는 Date 객체에서 연도를 나타내는 4자리 숫자를 반환한다.

const today = new Date();
const year = today.getFullYear();
console.log(year); // 현재 연도를 출력합니다. 예: 2023

예제

const myBirthday = new Date(1990, 0, 1);  // 1990년 1월 1일
console.log(myBirthday.getFullYear());  // 1990 출력

getFullYear()는 해당 Date 객체가 나타내는 날짜의 연도를 가져오는 데 사용되므로, 주로 날짜 정보를 처리하거나 출력할 때 유용하게 사용된다.

setFullYear()

setFullYear() 메소드는 Date 객체의 연도를 설정한다.

const date = new Date();
date.setFullYear(2022);
console.log(date.getFullYear()); // 2022 출력

주의할 점

setFullYear() 메소드는 월과 일도 선택적으로 설정할 수 있다.

date.setFullYear(2022, 11, 31); // 연도를 2022로, 월을 12월로, 일을 31일로 설정

getMonth()

getMonth() 메소드는 Date 객체에서 월을 나타내는 숫자를 반환한다. 반환되는 값은 0(1월)에서 11(12월)까지의 범위를 가진다.

const today = new Date();
const month = today.getMonth();
console.log(month); // 현재 월 - 1 을 출력합니다.

예제

const date = new Date(2022, 10, 1);  // 2022년 11월 1일
console.log(date.getMonth());  // 10 출력

setMonth()

setMonth() 메소드는 Date 객체의 월을 설정한다.

const date = new Date();
date.setMonth(11); // 12월로 설정
console.log(date.getMonth()); // 11 출력

주의할 점

월은 0(1월)에서 11(12월)까지의 범위를 가진다. 따라서, 12월을 설정하려면 11을 전달해야 한다. setMonth() 메소드는 일도 선택적으로 설정할 수 있다.

date.setMonth(10, 15); // 월을 11월로, 일을 15일로 설정

getDate()

getDate() 메소드는 Date 객체의 일(날짜) 부분을 반환한다. 반환되는 값은 해당 월의 1일부터 31일까지의 범위를 가진다.

const today = new Date();
const dayOfMonth = today.getDate();
console.log(dayOfMonth); // 오늘 날짜의 '일' 부분을 출력

예제

const date = new Date(2022, 10, 15);  // 2022년 11월 15일
console.log(date.getDate());  // 15 출력

setDate()

setDate() 메소드는 Date 객체의 일(날짜) 부분을 설정한다. 전달하는 숫자 값은 해당 월의 1일부터 31일까지의 범위를 가져야 한다.

const date = new Date();
date.setDate(15); // 날짜의 '일' 부분을 15로 설정
console.log(date.getDate()); // 15 출력

주의할 점

  • setDate에 전달하는 값이 해당 월의 마지막 날보다 큰 경우, 다음 달로 넘어간다. 예를 들어, 4월에 setDate(31)을 호출하면 날짜는 5월 1일로 변경된다.
  • 음수 값을 전달하면, 이전 달의 마지막 일로부터 역순으로 계산된다. 예를 들어, setDate(-1)을 호출하면 이전 달의 마지막 날이 된다.

이 두 메소드를 이용하여 Date 객체의 '일' 부분을 손쉽게 가져오거나 설정할 수 있다.

getHours()

getHours() 메소드는 Date 객체의 시간 부분에서 '시(hour)'를 반환한다. 반환되는 값은 0(자정)에서 23(오후 11시) 사이의 숫자이다.

const now = new Date();
const hour = now.getHours();
console.log(hour); // 현재 '시'를 출력

예제

const date = new Date(2022, 10, 15, 14, 30);  // 2022년 11월 15일 14시 30분
console.log(date.getHours());  // 14 출력

setHours()

setHours() 메소드는 Date 객체의 시간 부분에서 '시(hour)'를 설정한다. 설정할 수 있는 값은 0(자정)에서 23(오후 11시) 사이의 숫자이다. 또한, 추가적으로 분, 초, 밀리초까지 설정할 수 있는 추가 인수도 제공된다.

const date = new Date();
date.setHours(15); // '시'를 오후 3시로 설정
console.log(date.getHours()); // 15 출력

추가 인수를 사용한 예

const date = new Date();
date.setHours(15, 30, 45, 500); // 시간을 오후 3시 30분 45초 500밀리초로 설정
console.log(date); // 설정한 시간 정보가 포함된 날짜와 시간을 출력

이 두 메소드를 통해 Date 객체의 '시' 부분을 쉽게 가져오거나 설정할 수 있다.

getMinutes()

getMinutes() 메소드는 Date 객체의 시간 부분에서 '분'을 반환한다. 반환되는 값은 0부터 59까지의 숫자이다.

const now = new Date();
const minutes = now.getMinutes();
console.log(minutes); // 현재 '분'을 출력한다.

예제

const date = new Date(2022, 10, 15, 14, 30);  // 2022년 11월 15일 14시 30분
console.log(date.getMinutes());  // 30을 출력한다.

setMinutes()

setMinutes() 메소드는 Date 객체의 시간 부분에서 '분'을 설정한다. 설정할 수 있는 값은 0부터 59까지의 숫자이다. 또한, 추가적으로 초와 밀리초를 설정할 수 있는 추가 인수도 제공된다.

const date = new Date();
date.setMinutes(45); // '분'을 45로 설정한다.
console.log(date.getMinutes()); // 45를 출력한다.

추가 인수를 사용한 예

const date = new Date();
date.setMinutes(30, 20, 500); // 분을 30, 초를 20, 밀리초를 500으로 설정한다.
console.log(date); // 설정한 분, 초, 밀리초 정보를 포함한 날짜와 시간을 출한니다.

getSeconds()

getSeconds() 메소드는 Date 객체의 시간 부분에서 '초'를 반환한다. 반환되는 값은 0부터 59까지의 숫자이다.

const now = new Date();
const seconds = now.getSeconds();
console.log(seconds); // 현재 '초'를 출력한다.

예제

const date = new Date(2022, 10, 15, 14, 30, 25);  // 2022년 11월 15일 14시 30분 25초
console.log(date.getSeconds());  // 25를 출력한다.

setSeconds()

setSeconds() 메소드는 Date 객체의 시간 부분에서 '초'를 설정한다. 설정할 수 있는 값은 0부터 59까지의 숫자이다. 또한, 밀리초를 설정할 수 있는 추가 인수도 제공된다.

const date = new Date();
date.setSeconds(45); // '초'를 45로 설정한다.
console.log(date.getSeconds()); // 45를 출력한다.

추가 인수를 사용한 예

const date = new Date();
date.setSeconds(30, 500); // 초를 30, 밀리초를 500으로 설정한다.
console.log(date); // 설정한 초, 밀리초 정보를 포함한 날짜와 시간을 출력한다.

getDay()

getDay() 메소드는 특정 Date 객체가 나타내는 주의 요일을 나타내는 숫자를 반환한다. 반환되는 값은 0(일요일)에서 6(토요일)까지의 정수이다.

이 메소드는 '날짜'가 아닌 '요일'을 반환한다는 점을 유의해야 한다.

const now = new Date();
const dayOfWeek = now.getDay();
console.log(dayOfWeek); // 현재 요일에 해당하는 숫자를 출력합니다. (예: 일요일은 0, 월요일은 1, ...)

예제

const date = new Date(2022, 10, 15);  // 2022년 11월 15일
console.log(date.getDay());  // 해당 날짜의 요일에 대한 숫자를 출력한다. (0부터 6까지의 값 중 하나)

만약 숫자 대신 요일 이름(예: 월요일, 화요일)을 얻고 싶다면, 반환된 숫자를 사용하여 배열에서 요일 이름을 참조할 수 있다.

const days = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];
const date = new Date(2022, 10, 15); 
console.log(days[date.getDay()]); // "화요일"을 출력합니다.

getDay 메소드는 주어진 날짜가 어느 요일에 해당하는지 확인할 때 유용하게 사용된다.

getTime()

getTime() 메소드는 Date 객체가 나타내는 특정 날짜와 시간까지의 밀리초(1970년 1월 1일 00:00:00 UTC부터 시작하는)를 나타내는 숫자를 반환한다. 이 숫자 표현은 '타임스탬프' 또는 '유닉스 타임스탬프'로도 알려져 있다.

const now = new Date();
const timestamp = now.getTime();
console.log(timestamp); // 현재 시간의 타임스탬프 값을 출력한다.

setTime()

setTime() 메소드는 Date 객체의 날짜와 시간을 주어진 밀리초 값으로 설정한다. 인수로 전달된 밀리초 값은 1970년 1월 1일 00:00:00 UTC부터의 시간을 나타낸다. setTime 메소드를 사용하면 Date 객체의 날짜와 시간을 변경할 수 있다.

const date = new Date();
date.setTime(1687520400000); // 이 타임스탬프 값으로 날짜와 시간을 설정한다.
console.log(date); // 설정한 타임스탬프에 해당하는 날짜와 시간을 출력한다.

getTime()과 setTime() 메소드는 날짜와 시간 정보를 밀리초 단위의 숫자로 다룰 때 유용한다. 예를 들어, 두 날짜 간의 차이를 계산하거나 특정 기간 후의 날짜를 계산할 때 이러한 메소드를 활용할 수 있다.

now

Date.now() 메서드는 현재 시간의 타임스탬프를 밀리초 단위로 반환한다. 이 메서드는 new Date().getTime()와 동일한 값을 반환하지만, Date.now()를 사용하는 것이 더 간편하며 빠르게 현재 타임스탬프를 얻을 수 있다.

타임스탬프는 1970년 1월 1일 00:00:00 UTC부터 현재 시간까지의 밀리초로 표현된다.

const timestamp = Date.now();
console.log(timestamp);  // 현재 시간의 타임스탬프 값을 출력합니다.

이 메서드는 날짜의 연산이 필요할 때나 성능 측정에 사용된다. 예를 들어, 어떤 코드의 실행 시간을 측정하려면 해당 코드 실행 전과 후에 Date.now()를 호출하여 두 타임스탬프 사이의 차이를 계산하면 된다.

profile
Shy
초보개발자. 백엔드 지망. 2024년 9월 취업 예정
이전 포스트

[JS] 3. 함수

다음 포스트

[JS] 4. 표준 내장 객체(2)

0개의 댓글