#1. 자바스크립트 내장 기능(2)
1. Math
- 수학적인 속성과 메서드를 가진 내장 객체
- 객체를 생성하지 않고 클래스 이름으로 직접 접근 할 수 있다. (정적 멤버변수와 정적 메서드)
1) max( )
- Math.max(value) 형태로 사용되며, 주어진 값 중에서 최댓값을 리턴한다. (파라미터 수 제한 없음)
const max = Math.max(231, 12, 99, 35, 290, 132);
console.log(max); // 290
2) min( )
- max 메서드와 같은 형태로 사용되며, 주어진 값 중에서 최솟값을 리턴한다. (파라미터 수 제한 없음, max와 반대)
const min = Math.min(231, 12, 99, 35, 290, 132);
console.log(min); // 12
3) round( )
- Math.round(value) 형태로 사용되며, 소수점에서 반올림 / 반내림을 한다.
const num1 = 3.7146;
console.log(Math.round(num1)); //4
4) ceil( )
- Math.ceil(value) 형태로 사용되며, 소수점에 상관없이 무조건 반올림 한다.
const num2 = 5.123;
console.log(Math.ceil(num2)); // 6
5) floor( )
- Math.floor(value) 형태로 사용되며, 소수점에 상관없이 무조건 반내림 한다. (ceil과 반대)
const num3 = 5.821;
console.log(Math.floor(num3)); // 5
6) abs( )
- Math.abs(value) 형태로 사용되며, 절대값을 반환한다.
const num4 = -123;
console.log(Math.abs(num4)); // 123
7) random( )
- Math.random() 형태로 사용되며, 파라미터로 받는 값은 따로 없고, 0~1의 난수를 리턴한다.
console.log(Math.random()); // 0.20599926847426575 <- 이 수는 랜덤으로 나온다- 1~10의 정수를 리턴하는 방법
- random 메서드에 10을 곱하고 +1을 해준다. (+1을 안하면 0~9 사이의 난수)
- parseInt를 사용하여 정수로 변환해 준다.
console.log(parseInt(Math.random() * 10 + 1)); // 1 ~ 10- 두 수 사이의 정수를 리턴하는 방법 (공식처럼 외워두자)
function random(min, max) {
return parseInt(Math.random() * (max - min +1)) + min;
}
console.log(random(10,15)); // 10 ~ 15- 랜덤 함수를 응용해서 5자리 랜덤 숫자 생성
function random(min, max) {
return parseInt(Math.random() * (max - min +1)) + min;
};
let num = "";
for(let i = 0; i < 5; i++) {
// 문자열과 숫자의 결합은 문자열이다.
num += random(0,9);
}
console.log(num); // 5자리 랜덤 숫자
8) pow( )
- Math.pow(거듭제곱할 숫자, 거듭제곱 횟수) 형태로 사용되며, 특정 숫자의 거듭제곱 값을 계산해주는 함수이다.
console.log(Math.pow(2,3)); // 8
console.log(Math.pow(2,10)); // 1024
console.log(Math.pow(4,9)); // 262144
console.log(Math.pow(7,3)); // 343
let num = 3
console.log(Math.pow(num,2)); // 99) sqrt( )
- Math.sqrt(number) 형태로 사용되며, 특정 숫자의 제곱근 값을 계산해주는 함수이다.
console.log(Math.sqrt(4)); // 2
console.log(Math.sqrt(9)); // 3
console.log(Math.sqrt(16)); // 4
console.log(Math.sqrt(25)); // 5
console.log(Math.sqrt(121)); // 11
2. Date
- 객체로 생성하는 순간의 시스템 시각이나 생성자 파라미터로 전달된 시작을 나타낸다.
예제들의 기능을 확인하기 위한 배열, 객체 생성
// 요일의 이름을 저장하고 있는 배열
const days = ['일', '월', '화', '수', '목', '금', '토'];
// 현재 시간 객체 생성
const date1 = new Date();▼
1) getFullYear( )
- 현재 연도를 반환한다.
const yy = date1.getFullYear();
console.log(yy); // 2022
2) getMonth( )
- 현재 월을 반환한다.
- month는 0부터 시작하기 때문에 +1을 해줘야 현재 월이 반환된다.
const mm = date1.getMonth() +1;
console.log(mm); // 2
3) getDate( )
- 현재 날짜(일)을 반환한다.
const dd = date1.getDate();
console.log(dd); // 14
4) getDay( )
- 현재 요일을 반환한다.
- 일요일은 0을 나타내고, 토요일은 6을 나타낸다. (요일을 글자로 나타낼 경우 배열 사용)
const i = date1.getDay();
const day = days[i];
console.log(day); // 월
5) getHours( )
- 현재 시간을 반환한다.
const hh = date1.getHours();
console.log(hh); // 23
6) getMinutes( )
- 현재 분을 반환한다.
const mi = date1.getMinutes();
console.log(mi); // 31
7) getSeconds( )
- 현재 초를 반환한다.
const ss = date1.getSeconds();
console.log(ss); // 12
8) getTime( )
- 기준 시간으로부터 부터 현재까지 흐른 시간을 밀리세컨드 단위로 환산하여 반환한다.
- 생성된 객체에 정해진 시간이 없으면 1970년 1월 1일 자정부터 시작한다.
const tt = date1.getTime();
console.log(tt); // 1644900156714
9) 날짜를 의미하는 문자열 반환
- 문자열로 날짜 부분만 나타낸다.
console.log(date1.toDateString()); // Mon Feb 14 2022- 형식 문자열을 사용해서 Date를 나타내는 문자열 생성
console.log(date1.toLocaleString()); // 2/14/2022, 11:48:14 PM
console.log(date1.toLocaleString('ko-KR')); // 2022. 2. 14. 오후 11:48:14
10) 특정 날짜를 의미하는 객체 생성
- 객체를 생성할 때 파라미터 값에 연/월/일 순서로 넣는다. (시각이 없으므로 자정으로 자동 설정된다.)
- 월은 0부터 시작 하기 때문에 9를 넣으면 10이 반환된다.
const date2 = new Date(2001, 9, 5);
console.log(date2.toLocaleString('ko-KR')); // 2001. 10. 5. 오전 12:00:00- 시/분/초 까지 값을 넣을 경우
const date3 = new Date(2001, 9, 5, 21, 19, 31);
console.log(date3.toLocaleString('ko-KR')); // 2001. 10. 5. 오후 9:19:31
11) 이미 생성된 날짜 객체의 성분 변경
date3.setYear(2010);
date3.setMonth(1);
date3.setDate(14);
date3.setHours(12);
date3.setMinutes(16);
date3.setSeconds(30);
console.log(date3.toLocaleString('ko-KR')); // 2010. 2. 14. 오후 12:16:30
3. Number
- 숫자 처리와 관련된 기본 기능 등을 제공하는 내장 클래스
- Number() 함수를 통해 반환 받는 값은 객체가 아닌 일반 숫자이다.
// 정수 형태의 문자열 입력
const b = Number('123');
console.log(b); // 123
console.log(typeof b); // number
console.log(b === 123); // true
// 실수 형태의 문자열 입력
const c = Number('123.45');
console.log(c); // 123.45
console.log(typeof c); // number
console.log(c === 123.45); // true- Number() 함수는 parseFloat(실수변환), parseInt(정수변환)와 비슷한 기능을 한다.
- 주어진 값이 정수인지 확인하는 방법
console.log(Number.isInteger("123")); // false
console.log(Number.isInteger(123)); // true
4. 정규표현식 (Regex)
- 문자열이 특정 조건을 충족하는지 검사하거나 특정 패턴의 문자열을 검색, 치환하기 위해 사용한다.
- 정규표현식은 자바스크립트 뿐만 아니라 다른 언어에서도 사용된다.
* - 앞의 문자/그룹이 0회 이상 일치
+* - 이전문자/그룹이 1회 이상 일치하는 경우
? - 앞의 문자/그룹이 0 또는 1번 일치
. - 개행 문자를 제외한 모든 단일 문자와 일치
| - 하나의 패턴 또는 다른 패턴과 일치
[xyz] - 문자 집합, 임의의 문자와 일치
[x-z] - 문자 집합, 문자 범위 사이의 모든 문자와 일치
[^xyz] - 반전된 문자 집합, 다른 모든 문자와 일치
{n} - 앞의 표현식이 n번 나타나는 부분에 대응한다. n은 반드시 양의 정수여야 한다.
{n, m} - 앞 문자가 최소 n개, 최대 m개가 나타나는 부분에 대응. 양의 정수여야 한다.
^ - 문자열의 시작과 일치
$ - 문자열의 끝과 일치
\s - 공백, 탭, 양식 피드, 줄 바꿈을 포함한 단일 공백 문자와 일치
\S - 공백이 아닌 단일 문자와 일치
\d - 모든 숫자와 일치
\D - 숫자가 아닌 모든 문자와 일치
\w - 밑줄을 포함한 모든 문자,숫자와 일치
\W - 단어 문자가 아닌 문자에 대응한다. ([^A-Za-z0-9_]와 동일)- 정규표현식은 /^[값의범위설정]*$/ 형식으로 지정하고, test.(검사할 문자열) 형식으로 검사한다.
- 문자열이 정규표현식에 부합할 경우 true를 반환한다.
const 변수이름 = /^[값의범위설정]*$/;
변수이름.test(검사할 문자열);
1) 한글 입력 검사 예시
// 이름을 영어로 입력
const username = "Andy";
const example1 = /^[ㄱ-ㅎ가-힣]*$/;
if(!example1.test(username)) {
console.log("한글만 입력 가능합니다.");
}; // 한글만 입력 가능합니다.
2) 숫자 입력 검사 예시
- 숫자를 문자열로 입력해도 된다. (ex_ "20")
// 나이를 문자열로 입력
const age = "스무살";
const example2 = /^[0-9]*$/;
if(!example2.test(age)) {
console.log("숫자만 입력 가능합니다.");
} // 숫자만 입력 가능합니다.
3) 영문 + 숫자 입력 검사 예시
// 아이디를 한글로 입력
const userId = "콩순이77"
const example3 = /^[a-zA-Z0-9]*$/;
if(!example3.test(userId)) {
console.log("영문과 숫자만 입력 가능합니다.");
} // 영문과 숫자만 입력 가능합니다.
// 아이디의 최대 글자 수 검사
if(userId.length > 20) {
console.log("아이디는 최대 20자 까지만 입력 가능");
}
5. 배열 (Array)
- 자바스크립트의 내장 기능 중 가장 중요하고 자주 쓰이는 역할을 한다.
- 배열의 원소를 추가, 삭제 등등 변경하는 기능들이 있다.
예제들의 기능을 확인하기 위한 배열 생성 1
const data = [10, 20, 30, 40, 50];1 ~ 6번 예제 사용
▼
1) push( )
- push(value) 형태로 사용되며, 배열의 맨 끝에 요소를 추가한다. (파라미터 수 제한 없음)
data.push(60,70);
console.log(data); // [ 10, 20, 30, 40, 50, 60, 70 ]
2) pop( )
- 파라미터로 받는 값은 없고, 배열의 맨 끝의 요소를 제거할 때 쓰인다.
- 변수에 대입하면 배열의 마지막 값을 리턴한다.
const k = data.pop();
console.log(k); // 70
console.log(data); // [ 10, 20, 30, 40, 50, 60 ]
3) unshift( )
- unshift(value) 형태로 사용되며, 배열의 맨 앞에 요소를 추가한다. (파라미터 수 제한 없음)
data.unshift(0,10);
console.log(data); // [ 0, 10, 10, 20, 30, 40, 50, 60 ]
4) shift( )
- 파라미터로 받는 값은 없고, 배열의 맨 앞의 요소를 제거한다.
- 변수에 대입하면 배열의 맨 앞의 값을 리턴한다.
const x = data.shift();
console.log(x); // 0
console.log(data); // [ 10, 10, 20, 30, 40, 50, 60 ]
5) splice( )
- splice(시작위치, 갯수) 형태로 사용되며, 원하는 위치의 값을 변환하거나 제거한다. (위치는 0부터 시작한다)
const z = data.splice(2,3); // 2번째 위치부터 3개를 자른다
console.log(z); // [ 20, 30, 40 ]
console.log(data); // [ 10, 10, 50, 60 ]- 파라미터 값(시작위치, 갯수) 외에 값을 넣어 그 위치에 다른 요소들을 넣을 수 있다.
- 제거한 수 보다 추가되는 요소가 많을 경우 배열이 확장 된다. (기존 원소들은 뒤로 밀린다)
- 제어한 수 보다 추가되는 요소가 적을 경우 배열이 축소된다.
data.splice(0,2,'a','b','c'); // 0번째 부터 2개 제거하고 'a','b','c'를 넣는다.
console.log(data); // [ 'a', 'b', 'c', 50, 60 ]- 삭제할 요소의 수를 0으로 지정하면 중간에 삽입할 수 있다.
data.splice(3,0,'d','e'); // 3번째 위치부터 0개를 제거
console.log(data); // [ 'a', 'b', 'c', 'd', 'e', 50, 60 ]
6) join( )
- 배열의 모든 원소들을 하나로 연결해 문자열로 반환한다.
const a = data.join("");
console.log(a); // abcde5060
const b = data.join("/");
console.log(b); // a/b/c/d/e/50/60
const c = data.join(" ");
console.log(c); // a b c d e 50 60
const d = data.join(" + ")
console.log(d); // a + b + c + d + e + 50 + 60
7) concat( )
- 배열을 결합하여 새로운 배열을 반환한다.
const a = [1,2];
const b = [3,4,5];
const c = [6,7,8,9];
const d = a.concat(b,c);
console.log(d); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
예제들의 기능을 확인하기 위한 배열 생성 2
let arr1 = [1, 0, false, NaN];▼
8) indexOf( )
- indexOf(value, from) 형태로 사용하며, 인덱스 from 부터 시작해 value(요소)의 인덱스 값을 찾는다. (from은 생략해도 된다)
- 요소를 찾으면 해당 요소의 인덱스를 반환하고, 못찾으면 -1을 반환한다.
- lastIndexOf( ) 도 비슷한 기능을 하는데 탐색을 끝에서 부터한다. (from 값이 없으면 처음부터 탐색)
console.log(arr1.indexOf(0)); // 1
console.log(arr1.indexOf(false)); // 2
// 없는 값 찾을 때
console.log(arr1.indexOf(null)); // -1
// NaN 값 찾을 때
console.log(arr1.indexOf(NaN)); // -1
9) includes( )
- indexOf(value, from) 와 비슷하지만, includes( )는 해당 요소를 찾으면 true 값을 반환한다.
- 요소를 못찾으면 false 값을 반환한다.
- 요소의 위치를 정확히 알고 싶은게 아니고, 요소가 배열 내 존재하는지 여부만 확인하고 싶을 때 사용하는게 좋다.
-
includes( )는 NaN을 제대로 처리한다는 점에서 indexOf( )와 약간 차이가 있다.
console.log(arr1.includes(1)); // true
// 없는 값 찾을 때
console.log(arr1.includes(100)); // false
// NaN 값 찾을 때
console.log(arr1.includes(NaN)); // true※ indexOf( ) 와 includes( ) 는 요소를 찾을 때 완전 항등 연산자 ( === )를 사용한다는 점을 유의해야 한다.
예제들의 기능을 확인하기 위한 배열 생성 3
const arr2 = [5, 12, 8, 131, 44];▼
10) find( )
- 주어진 판별함수를 만족하는 첫번째 값을 반환한다. (배열 검색) 못찾으면 undefined를 반환.
- 찾고자 하는 항목이 아닌 검색 규칙을 규현한 콜백함수를 전달해야 한다.
- true를 리턴하는 순간 배열의 탐색을 중단한다. (배열 중 찾은 값까지 반환)
// 파라미터로 전달되는 v는 배열의 모든 원소가 순차적으로 전달된다.
const found = arr2.find(function(v) {
// v를 우리가 원하는 조건에 충족하는지 검사하여 true / false를 리턴한다.
// true를 리턴하는 순간 배열의 탐색을 중단한다. (break와 동일한 기능)
if(v % 2 == 0) {
return true; // true로 리턴되는 값은 found에 저장
} else {
return false; // false로 리턴되는 값은 버려진다.
}
});
console.log(found); // 12
11) filter( )
- 파라미터 값을 콜백함수로 전달 받으며, find( ) 와 다르게 조건에 충족하는 모든 값을 반환한다. (배열 전체 검색)
- 콜백함수의 파라미터 값은 (요소, 인덱스, 배열값) 으로 받는다.
const found2 = arr2.filter(function(v, i , arr) {
console.log(`v= ${v}, i= ${i}, arr= ${arr}`);
/*
v= 5, i= 0, arr= 5,12,8,131,44
v= 12, i= 1, arr= 5,12,8,131,44
v= 8, i= 2, arr= 5,12,8,131,44
v= 131, i= 3, arr= 5,12,8,131,44
v= 44, i= 4, arr= 5,12,8,131,44
*/
if(v % 2 == 0) {
retrun true; // true가 리턴되는 경우 v는 found2 배열의 원소로 저장
} else {
return false; // false가 리턴되는 경우 v는 버려진다.
});
console.log(found2); // [ 12, 8, 44 ]
12) sort( )
- 콜백함수를 받아 배열을 정렬해준다.
- 콜백함수 없이 사용시 배열의 모든 원소를 문자열로 취급하기 때문에 글자 정렬 기준이 적용된다.
arr2.sort();
console.log(arr2); // [ 12, 131, 44, 5, 8 ]- 숫자를 sort( ) 함수로 정렬시 콜백함수로 받아 처리해야한다.
// 정렬을 위해 비교되는 원소값들이 파라미터로 전달된다.
arr2.sort(function(a, b) {
console.log("a= %s, b= %s",a ,b);
/*
a= 12, b= 5
a= 8, b= 12
a= 8, b= 12
a= 8, b= 5
a= 131, b= 8
a= 131, b= 12
a= 44, b= 12
a= 44, b= 131
*/
if(a > b) {
return 1; // 리턴값이 양수인 경우: a가 b보다 크다
} else {
return -1; // 리턴값이 음수인 경우: b가 a보다 크다
}
});
console.log(arr2); // [ 5, 8, 12, 44, 131 ]
13) reverse( )
- 파라미터로 받는 값은 없고, 배열을 역순 배치 해준다.
const arr2 = [5, 12, 8, 131, 44];
arr2.reverse();
console.log(arr2); // [ 44, 131, 8, 12, 5 ]
예제들의 기능을 확인하기 위한 배열 생성 4
const arr3 = [10, 20, 30, 40, 50];▼
※ for문을 활용한 배열 원소 스캔
for(let i = 0; i < arr3.length; i++) {
if(i == 3) {
console.log("종료");
break;
}
console.log("%d번째 원소 -> %d", i, arr3[i]);
}
/*
0번째 원소 -> 10
1번째 원소 -> 20
2번째 원소 -> 30
종료
*/
14) some( )
- some(value, index) 형태로 사용되며, for문을 함수형태로 나타낸 것이다. (반복문 역할을 한다)
- 콜백함수에게 배열의 값(value)과 인덱스(index)를 전달한다.
- 콜백함수는 원소의 수 만큼 순차적으로 실행된다.
- 함수의 중단은 return으로 처리한다. (break는 for, while문 안에서만 사용 가능하다.)
arr3.some((v,i) => {
// some 함수는 콜백함수가 true를 리턴하는 순간 탐색을 중단
if(i == 3) { // 인덱스 값이 3이 되면
console.log("종료");
return true; // break와 같은 역할
}
console.log("%d번째 원소 -> %d", i ,v);
});
/*
0번째 원소 -> 10
1번째 원소 -> 20
2번째 원소 -> 30
종료
*/
15) forEach( )
- forEach(value, index) 형태로 사용되며, some( ) 함수와 사용방법이 같고, 반복문 역할을 한다.
- some( ) 함수는 조건에 만족하는 값을 찾으면 즉시 중단하지만, forEach( ) 는 중단하지 않는다.
arr3.forEach((v, i) => {
if(i == 3) {
console.log("종료");
return;
}
console.log("%d번째 원소 -> %d", i ,v);
});
/*
0번째 원소 -> 10
1번째 원소 -> 20
2번째 원소 -> 30
종료
4번째 원소 -> 50
*/- forEach( ) 응용
// 주어진 배열 값에서 4의 배수 구하기
const example = [];
arr3.forEach((v,i) => {
if(v % 4 == 0) {
example.push(v);
}
});
console.log(example); // [ 20, 40 ]
16) map( )
- map(value, index) 형태로 사용되며(index는 생략가능), 콜백함수의 리턴하는 값들을 하나의 배열로 묶어 변수에 저장한다.
- 반복문 형태로 사용되며, 배열 함수 중에서 가장 많이 쓰인다.
const ex1 = arr3.map((v,i) => {
return `${i}번 인덱스의 값: ${v}`;
});
console.log(ex1);
/*
[
'0번 인덱스의 값: 10',
'1번 인덱스의 값: 20',
'2번 인덱스의 값: 30',
'3번 인덱스의 값: 40',
'4번 인덱스의 값: 50'
]
*/
// 처리로직이 한 줄일 경우, return 키워드 생략 가능
const ex2 = arr3.map((v,i) => `${v}값의 인덱스 위치: ${i}`);
console.log(ex2);
/*
[
'10값의 인덱스 위치: 0',
'20값의 인덱스 위치: 1',
'30값의 인덱스 위치: 2',
'40값의 인덱스 위치: 3',
'50값의 인덱스 위치: 4'
]
*/'국비수업 > JavaScript' 카테고리의 다른 글
| [Javascript] 예외처리 (0) | 2022.02.16 |
|---|---|
| [Javascript] [연습문제] 내장 기능을 활용한 실습 (0) | 2022.02.16 |
| [Javascript] 모듈 / 자바스크립트 내장 기능(형변환, 이스케핑, 비동기, String) (0) | 2022.02.12 |
| [Javascript] [연습문제] 클래스 실습 (0) | 2022.02.11 |
| [Javascript] 클래스 (0) | 2022.02.11 |