[JavaScript] 숫자 | 문자 | 날짜 | 객체 메소드

목차

1. Number 객체 메소드
   1-1. isNaN(value)
   1-2. isFinite(value)
   1-3. parseInt(value) 또는 parseFloat(value)
2. Math 객체 메소드
3. String 객체 메소드
   3-1. 백틱(`) ${}
   3-2. 문자열[인덱스] 글자 추출
   3-3. substr(start index, length) 부분 문자열 추출
   3-4. substring(start, end) 부분 문자열 추출
   3-5. slice(start, end) 부분 문자열 추출
   3-6. indexOf(값) 해당 인덱스 반환
   3-7. includes(값) 포함 여부 반환, true/false
   3-8. startsWith(값) 그 값으로 시작 여부 반환, true/false
   3-9. endsWith(값) 그 값으로 종료 여부 반환, true/false
4. Date 객체 메소드
   4-1. new Date()
   4-2. new Date(milliseconds)
   4-3. new Date(datestring)
   4-4. new Date(year, month, date, hours, minutes, seconds, ms)
   4-5. get년월일시분초밀리초
   4-6. set년월일시분초밀리초
   4-7. 날짜간 차이 계산

---

 

1. Number 객체 메소드

isNaN(value)	인수를 숫자로 변환한 다음 NaN인지 확인
isFinite(value)	인수를 숫자로 변환한 다음 NaN/Infinity/-Infinity가 아닌지 확인
parseInt(value)	정수 취급, 문자열에서 숫자만 읽어 반환
parseFloat(value)	실수 취급, 문자열에서 숫자만 읽어 반환

 

1-1. isNaN(value)

console.log("isNaN(NaN) : " + isNaN(NaN)); //true
console.log("isNaN('abc') : " + isNaN('abc')); //true
console.log("isNaN('1') : " + isNaN('1')); //false - 숫자임
console.log("isNaN(2.8) : " + isNaN(2.8)); //false

• 인수를 숫자로 변환한 다음 → NaN(Not a Number, 에러를 나타내는 값)인지 확인한다.
• '1' 또는 2.8의 경우 숫자로 읽히므로 false가 리턴되는 예시이다.

---

1-2. isFinite(value)

console.log("isFinite('1') : " + isFinite('1')); //true
console.log("isFinite('abc') : " + isFinite('abc')); //false
console.log("isFinite(1/0) : " + isFinite(1/0)); //false
console.log("isFinite(Infinity) : " + isFinite(Infinity)); //false
console.log("isFinite(-Infinity) : " + isFinite(-Infinity)); //false

• 인수를 숫자로 변환한 다음 → 숫자가 NaN/Infinity/-Infinity가 아닌 일반적으로 유한한 숫자일 때 true를 반환한다.
• 입력값이 적합한 숫자로 들어왔는지 체킹하는 데 활용할 수 있다.
• 예시에서 문자열 'abc'는 숫자로 치환될 수 없어 false 값이 주어졌다.
• 또, 무한대를 나타내는 값들에 대해서는 false가 주어진다: (1/0), (Infinity), (-Infinity)

---

1-3. parseInt(value) 또는 parseFloat(value)

❗ Number(value);의 경우 문자열 앞뒤로 자리한 공백은 처리하지만, 다른 문자가 섞인 경우는 강제형변환조차 불가해 NaN을 결과로 낸다. 이 같은 한계를 느낄 때 대신 활용할 수 있는 것이 parseInt(value)와 parseFloat(value)이다: 예. "300px", "16pt" → 300, 16

let intNum = "3";
let floatNum = "1.234";
let stringNum = "300px";

console.log("Number(intNum) : " + Number(intNum)); //3
console.log("Number(floatNum) : " + Number(floatNum)); //1.234
console.log("Number(stringNum) : " + Number(stringNum)); //NaN -- 문자가 포함돼 있어 형변환 불가

console.log("parseInt(intNum) : " + parseInt(intNum)); //3
console.log("parseInt(floatNum) : " + parseInt(floatNum)); //1 -- int로 파싱돼 소수점 절삭
console.log("parseInt(stringNum) : " + parseInt(stringNum)); //300

console.log("parseFloat(intNum) : " + parseFloat(intNum)); //3
console.log("parseFloat(floatNum) : " + parseFloat(floatNum)); //1.234
console.log("parseFloat(stringNum) : " + parseFloat(stringNum)); //300

 

• Number()는 숫자와 문자가 섞인 문자열에 대해 형변환하지 못하고 NaN으로 읽는 반면, parseInt()와 parseFloat는 의도한 숫자값을 정상 출력하고 있음을 확인할 수 있다.
• 단, parseInt()는 정수 취급하기에 실수값을 만나면 소수점자리를 절삭해 보여준다. 실수형 값 그대로 출력되기를 바랄 경우 parseFloat()를 활용해야 한다.

---

 

2. Math 객체 메소드

보다 다양한 메소드 종류를 확인할 수 있다: MDN Web Docs - Math

Math.floor(숫자)	인수보다 작거나 같은 수 중 가장 큰 정수 반환
Math.ceil(숫자)	인수보다 크거나 같은 수 중 가장 작은 정수 반환
Math.trunc(숫자)	숫자의 정수 부분 반환
Math.round(숫자)	숫자에서 가장 가까운 정수 반환
Math.random()	0과 1 사이의 난수 반환
Math.max(a, b, c, ...)	인수 중 최대값 반환
Math.min(a, b, c, ...)	인수 중 최소값 반환
Math.pow(x, y)	x의 y 제곱 반환

 

---

 

3. String 객체 메소드

substr(start, length)	시작 인덱스부터 입력한 길이만큼의 부분 문자열 반환
substring(start, end)	시작 인덱스부터 끝 인덱스-1까지의 부분 문자열 반환
slice(start, end)	시작 인덱스부터 끝 인덱스-1까지의 부분 문자열 반환
indexOf(string)	전달한 부분 문자열의 위치 인덱스 반환
includes(string)	전달한 부분 문자열의 포함 여부 반환
startsWith(string)	전달한 부분 문자열로 시작하는지 여부 반환
endsWith(string)	전달한 부분 문자열로 끝나는지 여부 반환
trim()	문자열 앞뒤 공백 제거
toLowerCase()	소문자로 변경
toUpperCase()	대문자로 변경

 

3-1. 백틱(`) ${}

let str = `My
Name
is
Kim`;

• 문자형의 경우 작은따옴표(''), 큰따옴표("") 모두 사용 가능하며, 이밖에도 백틱(`, backtick)을 쓸 수 있다.
• 백틱의 키보드상 위치는 물결(~) 표시 밑에 해당한다.

console.log('`${str} : ' + `${str}`);
console.log("앞의 문장 " + str + "중간 문장 " + str + "끝 문장");
console.log(`앞의 문장 ${str} 중간 문장 ${str} 끝 문장`);

• 백틱은 여러 줄에 걸쳐 작성된 문자열을 취급하며, 문자열 중간에 ${}를 사용해 표현식을 삽입할 수 있다.
• 그동안 문자열 합치기로 써왔던 출력 구문을 `텍스트 ${str} 텍스트 ${str} 텍스트` 형태로 대체 가능해진 것이다.

---

3-2. 문자열[인덱스] 글자 추출

let num = '0123456789';
console.log('num[0] : ' + num[0]);
console.log('num[5] : ' + num[5]);

• 문자열 내의 글자 하나를 얻으려면 문자열[위치인덱스]처럼 표기한다.
• 예시에서는 지정 인덱스에 해당하는 숫자값 0과 5가 반환되는 모습을 확인할 수 있다.

---

3-3. substr(start index, length) 부분 문자열 추출

let num = '0123456789';
console.log('num.substr(5, 5) : ' + num.substr(5, 5));

• 시작 인덱스로부터 지정 길이만큼을 추출한다.
• 위 예시 통해 index [5]로부터 다섯 개 길이만큼을 반환함을 알 수 있다: 56789

---

3-4. substring(start, end) 부분 문자열 추출

console.log('num.substring(0, 2) : ' + num.substr(0, 2));

• 시작 인덱스로부터 종료 인덱스-1까지를 추출한다.
• 결과적으로 index [0~1]에 해당하는 값만을 반환한다: 01

---

3-5. slice(start, end) 부분 문자열 추출

console.log('num.slice(0, 2) : ' + num.slice(0, 2));

• 앞서 기술한 substring 메소드와 마찬가지로 시작 인덱스에서 종료 인덱스-1까지의 데이터를 추출한다.
• 결과값 역시 index[0~1]에 해당하는 01이다.

---

3-6. indexOf(값) 해당 인덱스 반환

console.log('num.indexOf(\'9\') : ' + num.indexOf('9')); //9
console.log('num.indexOf(\'a\') : ' + num.indexOf('a')); //-1

• 해당 값이 들어있는 인덱스를 반환한다.
• 해당 인덱스가 있다면 인덱스 번호를 결과로서 내지만, 존재하지 않는 경우에는 음수값 -1을 리턴한다.

한편, 출력 구문 작성 중 문자열을 뜻하는 용도의 작은따옴표('')가 아니라 기호로서의 '가 읽히도록 했다.
이처럼 기호로서의 따옴표('', "")를 작성하려거든 이스케이프 문자인 역슬래시(\)와 함께 쓰면 된다: \'문자\'

---

3-7. includes(값) 포함 여부 반환, true/false

console.log('num.includes(\'9\') : ' + num.includes('9')); //true
console.log('num.includes(\'a\') : ' + num.includes('a')); //false

• 해당 값 포함 여부를 true/false로 반환한다.

---

3-8. startsWith(값) 그 값으로 시작 여부 반환, true/false

console.log('num.startsWith(\'012\') : ' + num.startsWith('012')); //true
console.log('num.startsWith(\'abc\') : ' + num.startsWith('abc')); //false

• 지정 값으로 시작하는지 여부를 true/false로 반환해주는 메소드이다.
• 예시에서 '012'를 전달하긴 했지만, 첫 글자인 문자 '0'이나 숫자 0 하나로만 물어도 true를 값으로 내어줌을 확인할 수 있다.
• 반면 두 번째 글자인 '1'이나 전혀 상관 없는 'abc'로 물은 경우엔 false 값을 돌려준다.

---

3-9. endsWith(값) 그 값으로 종료 여부 반환, true/false

console.log('num.endsWith(\'789\') : ' + num.endsWith('789')); //true
console.log('num.endsWith(\'xyz\') : ' + num.endsWith('xyz')); //false

• 지정 값으로 끝나는지 묻는 메소드이다.
• 마지막 글자 하나로만 물어도 true 값을 결과로 반환하며, 뒤에서부터 두 번째 글자인 '8'이나 전혀 상관 없는 'xyz'로 묻자 false로 답을 낸다.

---

 

4. Date 객체 메소드

get/setFullYear()	년도 반환/년도 저장
get/setMonth()	월(0~11) *1월~12월*
get/setDate()	일(1~31) *1일~31일*
get/setDay()	요일(0~6) *일요일~토요일*
get/setHours()	시간(0~23)
get/setMinutes()	분(0~59)
get/setSeconds()	초(0~59)
get/setMilliseconds()	밀리세컨초(0~999)
getTimezoneOffset()	표준시와 현재 지역 차이
get/setTime()	1970-01-01 자정 기준으로 밀리세컨드

 

4-1. new Date()

let now = new Date();
console.log(now);

• new 연산자 및 Date 생성자로 현재 날짜를 반환 받을 수 있다.

---

4-2. new Date(milliseconds)

let start = new Date(0);

• 밀리세컨드(milliseconds)는 1970년 1월 1일 0시 0분을 기준으로 삼는다.
• 따라서 Date 생성자의 인수로서 0을 전달하면 그 시작 시점을 결과로 볼 수 있다.
• 단, 사용자 환경에 따라 한국시간 기준으로 출력되면서 GMT+09:00로 찍혀 같은 날 오전 9시가 결과값으로 나온다: Thu Jan 01 1970 09:00:00 GMT+0900 (GMT+09:00)

let aYearAfter = new Date(365 * 24 * 60 * 60 * 1000);
console.log(aYearAfter);

• 밀리세컨드 기준으로 일*시*분*초*밀리초를 곱해 1년 뒤 시간을 알 수 있다.
• 결과로서 1971년 1월 1일 9시 0분 0초가 반환된다.

---

4-3. new Date(datestring)

let startDate = new Date('2021-12-15');
console.log(startDate);

• 날짜 형식의 문자열을 전달해 읽어올 수도 있다.
• 구분자와 함께 년월일을 보내면 정상적으로 출력된다: '2021-12-15' 또는 '2021/12/15' 등등
• 하지만 단순 숫자값으로 20211215를 쓰면 밀리세컨드로 취급해 1970년 1월 1일 오후 2시 36분경을 가리키는가 하면, 문자로서 '20211215'를 보내면 유효하지 않은 날짜 형태라는 오류 메시지를 보인다: Invalid Date

---

4-4. new Date(year, month, date, hours, minutes, seconds, ms)

let todayA = new Date(2022, 2-1, 18); //0시 0분
let todayB = new Date(2022, 2-1, 18, 10, 28, 50, 100);

• 년월일시분초밀리초까지 각각의 인수를 적어 보내면 해당 시점을 반환한다.
• 반면 년월일에 대해서만 명시한 경우는 0시 0분이라는 기본값을 읽는다.

---

4-5. get년월일시분초밀리초

console.log(now.getFullYear());         //년
console.log(now.getMonth() + 1);        //월(+ 1)
console.log(now.getDate());             //일
console.log(now.getDay());              //요일(숫자 5==금요일)
console.log(now.getHours());            //시
console.log(now.getMinutes());          //분
console.log(now.getSeconds());          //초
console.log(now.getMilliseconds());     //밀리초

• 월의 경우 0~11까지의 숫자로 표현하므로 +1 처리해 주어야 한다.
• 또, 요일 역시 0~6 범위의 숫자로 일요일부터 토요일을 다룬다.
• 예시에서는 getDay() 통해 5라는 숫자값을 결과로 얻었고, 이는 금요일을 말한다.

---

4-6. set년월일시분초밀리초

let endDate = new Date();
endDate.setFullYear(2022);
endDate.setMonth(5-1);
endDate.setDate(25);
endDate.setHours(17);
endDate.setMinutes(50);
endDate.setSeconds(0);
endDate.setMilliseconds(0);
console.log(endDate);

• 인수로서 별도 값을 지정해 하나의 Date 객체를 설정할 수 있다.
• 월은 0~11 숫자로 표현하므로 해당 월-1 해주어야 함에 유의하자.

---

4-7. 날짜간 차이 계산

console.log(endDate - startDate); //밀리세컨드
console.log(endDate - now); //밀리세컨드
alert("종강일까지 " + (endDate - now) / (24 * 60 * 60 * 1000) + "일 남았습니다ㅠㅠ");

• Date 객체를 담은 변수명간에 마이너스(-) 연산을 치르면 밀리세컨드로 결과를 반환한다.
• 이를 토대로 며칠 남았는지 계산하기 위해서는 (시*분*초*밀리초)로 나누어야 하기에 다음과 같다: (밀리세컨드) / (24*60*60*100)