[javascript] 기본 내장 객체 (표준 내장 객체)

자바스크립트(javascript)는 기본적으로 유용하게 사용할 수 있는 몇가지 객체를 내장하고 있습니다. 이들 객체를 '기본 또는 표준 내장 객체'라고 하며 그 중 참고할만한 몇가지를 알아보고자 합니다.

 

객체를 알아보기 전에 우선 우리가 알지 못하는 사이 객체가 아닌것이 객체로 변환되는 경우가 있다는 것을 말씀드리고자 합니다. 예를 들어

 

var myvalue = 1234;
var myvalue2 = new Number(1234);

alert(myvalue);
alert(myvalue2);

예제에서 myvalue는 정수형 데이터이고 myvalue2는 Number에서 생성된 객체입니다.

var myvalue = 1234;
var myvalue2 = new Number(1234);

alert(myvalue.toString());
alert(myvalue2.toString());

속성이나 메서드는 객체만이 가질 수 있는데 myvalue라는 데이터형에서 toString이라는 메서드를 호출하고 있습니다. 잘못된것 같지만 실제 위 예제는 정상적인 결과값을 출력합니다.

 

이렇게 되는 이유는 기본 자료형에서 메서드가 사용되는 경우 메서드가 호출되는 순간 객체로 변환이 이루어 졌다가 다시 데이터형 변수로 되돌아 오기 때문입니다. 일시적인 변환이 이루어 졌을뿐 데이텨형변수가 객체는 될 수 없으므로 메서드추가같은 객체에서 할 수 있는 작업은 불가능합니다.

var myvalue = 1234;
var myvalue2 = new Number(1234);

myvalue.myMethod = function ()
{
	return 'myvalue';
};

myvalue2.myMethod = function ()
{
	return 'myvalue2';
};

alert(myvalue.myMethod());
alert(myvalue2.myMethod());

myvalue2에서는 myMethod메서드 호출이 정상적으로 이루어 지지만 myvalue에서는 오류가 발생합니다. 이는 myMethod메서드가 추가되는 순간에만 객체로 변환되었다가 추가가 완료되고 나면 다시 데이터형 변수로 되돌아 오기 때문에 추가한 메서드가 소멸되는 것입니다.

 

다만 정수 데이터형 변수가 객체로 변환될때는 Number객체로 변환되므로 Number자체에 메서드를 추가하는 경우 자연스럽게 데이터형 변수에서도 동일한 함수를 호출하는 것이 가능합니다.

var myvalue = 1234;
var myvalue2 = new Number(1234);

Number.prototype.myMethod = function() {
	return 'abc';
};

alert(myvalue.myMethod());
alert(myvalue2.myMethod());

 

1. Object

 

자바스크립트에서 최상위 객체에 해당하며 다른 모든 객체가 Object기반으로 만들어 지므로 객체의 조상이라 할 수 있습니다. Object는 다음과 같은 방법으로 생성할 수 있으며

var o = new Object(); //또는 var o = {};
alert(o.toString());

toString을 포함해 7개 정도의 메서드를 기본적으로 제공하고 있습니다. 이 말은 다른 모든 객체도 아래의 메서드를 사용할 수 있다는 것을 의미합니다.

 

constructor	객체의 생성자 함수입니다.
hasOwnProperty(name)	객체가 매개변수로 전달된 이름의 속성을 가지고 있는지 확인합니다.
isPrototypeof(object)	객체가 매개변수로 전달된 객체의 prototype인지를 확인합니다.
propertyIsEnumerable(name)	객체가 매개변수로 전달된 이름의 속성이 열거가능한 상태인지를 확인합니다.
toLocaleString	객체를 호스트의 지역에 맞는 문자열로 나타냅니다.
toString	객체를 문자열로 나타냅니다.
valueOf	객체의 값을 나타냅니다.

 

constructor는 생성자 함수를 나타내지만 이 메서드로 데이터형을 비교하는 경우도 있습니다.

var myvalue2 = new Number(123);

alert(typeof myvalue2);
alert(myvalue2.constructor);

toString은 객체를 문자열로 출력하려는 시도가 있을때 자동으로 호출됩니다.

var o = new Object();
alert(o);
alert(o.toString());

 

2. Number

 

숫자를 다루기 위한 객체입니다.

var myvalue2 = new Number(123);

Number객체 자체는 숫자와 관련해서 몇가지 속성을 제공하고 있으며 Number객체에서 생성된 인스턴스또한 다음의 메서드를 추가적으로 사용할 수 있습니다.

 

toExponential(number)	매개변수로 전달한 값만큼의 지수값을 반환합니다.
toFixed(number)	매개변수로 전달한 값만큼 소수점자리수를 반올림한 결과를 반환합니다.
toPrecision(number, length)	매개변수로 전달한 값만큼 지수 또는 고정소수점값을 반환합니다.

 

var myvalue = new Number(123.456);
alert(myvalue.toFixed(2));

참고로 Number객체에서 제공하는 속성으로는 다음과 같은 것들이 있습니다.

 

MAX_VALUE	표현 가능한 최대숫자
MIN_VALUE	표현 가능한 최소숫자
NaN	숫자로 표현이 불가능함
POSITIVE_INFINITY	양의 무한한값
NEGATIVE_INFINITY	음의 무한한값

 

3. String

 

String은 문자열을 다루는 객체이며 다음과 같은 방법으로 생성할 수 있습니다.

var mystr = new String('abcdefg'); //또는 var mystr = 'abcdefg';
alert(mystr);

String은 문자열의 길이를 나타내는 length라는 하나의 속성만을 가지지만

var mystr = new String('abcdefg');
alert(mystr.length);

문자열을 다루기 위한 메서드는 다음과 같이 많은 다양한 편입니다.

 

charAt(param)	param위치의 문자를 반환합니다.
charCodeAt(param)	param위치의 문자에 대한 유니코드값을 반환합니다.
concat(param)	param문자열을 기존문자열에 연결하여 반환합니다.
indexOf(param)	앞에서 부터 param문자열을 찾아 위치를 반환합니다. 찾는데 실패하면 -1을 반환합니다.
lastIndexOf(param)	뒤에서 부터 param문자열을 찾아 위치를 반환합니다. 찾는데 실패하면 -1을 반환합니다.
match(param)	문자열이 param에 해당하는 정규식과 일치하는지를 확인합니다.
replace(param1, param2)	param1에 해당하는 정규식의 문자열을 param2문자열로 교체합니다.
search(param)	param에 해당하는 정규식의 문자열을 찾아 위치값을 반환합니다.
slice(param1, param2)	param1부터 param2위치의 문자열을 반환합니다.
split(param)	param문자를 기준으로 문자열을 잘라 배열로 반환합니다.
substr(param1, param2)	param1부터 param2만큼의 문자열을 잘라 결과를 반환합니다.
substring(param1, param2)	param1부터 param2까지의 문자열을 잘라 결과를 반환합니다.
toLowerCase	문자열을 소문자로 변환해 반환합니다.
toUpperCase	문자열을 대문자로 변환해 반환합니다.
trim	문자열 좌우 공백을 제거합니다. 익스플로러 8이하에서는 사용이 불가능합니다.

var mystr = new String('abcdefg');
alert(mystr.substr(1, 2));

다음은 문자열을 HTML로 다루기 위한 메서드입니다.

 

anchor	문자열에 a태그를 붙여 반환합니다.
big	문자열에 big태그를 붙여 반환합니다.
blink	문자열에 blink태그를 붙여 반환합니다.
bold	문자열에 b태그를 붙여 반환합니다.
fixed	문자열에 tt태그를 붙여 반환합니다.
fontcolor(param)	문자열에 font태그를 붙이고 param에 해당하는 color속성을 부여해 반환합니다.
fontsize(param)	문자열에 font태그를 붙이고 param에 해당하는 size속성을 부여해 반환합니다.
italics	문자열에 i태그를 붙여 반환합니다.
link(param)	문자열에 a태그를 붙이고 param에 해당하는 href속성을 부여해 반환합니다.
small	문자열에 small태그를 붙여 반환합니다.
strike	문자열에 strike태그를 붙여 반환합니다.
sub	문자열에 sub태그를 붙여 반환합니다.
sup	문자열에 sup태그를 붙여 반환합니다.

var mystr = new String('cliel');
document.write(mystr.toUpperCase().link('http://cliel.com/'));

 

4. Array

 

Array는 배열을 다루기 위한 객체이며 다음과 같은 방법으로 생성할 수 있습니다.

var myArr = new Array();
var myArr2 = new Array(10);
var myArr3 = new Array(1, 2, 3, 4, 5);

alert(myArr.length);
alert(myArr2.length);
alert(myArr3.length);

매개변수가 없으면 빈 배열을 생성하고 매개변수가 하나면 그 수만큼의 배열을 생성합니다. 또한 매개변수가 둘 이상이면 각각의 값이 들어가는 배열을 생성하게 됩니다. 배열을 생성하고 나면 length속성을 통해 배열의 크기를 확인할 수 있습니다.

 

Array객체는 length속성이외에 다음과 같은 메서드를 포함하고 있습니다.

 

concat	매개변수로 전달한 값의 배열을 기존배열과 합친 결과를 반환합니다.
join	배열의 모든 요소를 문자열로 반환합니다.
pop	배열에서 마지막요소를 제거합니다.
push	매개변수로 전달한 값을 배열의 마지막에 추가합니다.
reverse	배열의 순서를 뒤집습니다.
slice	매개변수로 지정한 인덱스부터 시작되는 요소를 반환합니다.
sort	배열의 순서를 문자열기준 오름차순으로 정렬합니다.
splice	매개변수로 지정한 인덱스부터 시작되는 요소를 삭제하고 저장한 후 삭제한 요소를 반환합니다. 두번째 매개변수를 지정하는 경우 지정한 갯수만큼만 삭제합니다.
isArray	배열인지 여부를 반환합니다.
indexOf	매개변수의 요소를 앞쪽부터 검색합니다.
lastIndexOf	매개변수의 요소를 뒤쪽부터 검색합니다.
forEach	배열을 순회합니다.
map	배열의 요소값을 순회하고 새로운 배열을 반환합니다.
filter	조건에 따라 요소를 추출합니다.
every	배열의 모든 요소가 특정 조건을 만족하는지 확인합니다.
some	배열의 요소중 하나이상 특정 조건을 만족하는지 확인합니다.
reduce	배열의 요소를 왼쪽부터 2개씩 묶어 순회합니다.
reduceRight	배열의 요소를 오른쪽부터 2개씩 묶어 순회합니다.

※ isArray부터 이하 모든 메서드는 익스플로러8이하 브라우저에서 사용이 불가능합니다.

 

메서드중 sort는 정렬순서를 임의로 바꾸고 싶은 경우에 사용합니다.

var myArr = new Array();
var myArr2 = new Array(10);
var myArr3 = new Array(1, 2, 3, 4, 5);

myArr3.sort(function (next, current) {
	return current - next;
});

alert(myArr3);

함수사용시 2개의 값을 받을 수 있어야 하며 배열을 순회하면서 첫번째는 오른쪽, 두번째는 현재값이 들어가게 됩니다. 예제에서는 2개의 값을 감산하여 -값을 반환하도록 하였는데 반환되는 숫자의 부호에 따라 정렬이 되기 때문입니다.

 

검색은 indexOf나 lastIndexOf메서드를 사용합니다.

var myArr = [1, 2, 3, 4, 5];
alert(myArr.indexOf(3)); //3값은 2번째 요소이므로 2를 반환 (없는 경우 -1반환)

배열의 단순순회는 forEach메서드를 통해서 가능합니다.

var myArr = [1, 2, 3, 4, 5];

myArr.forEach(function (element, index, array) {
	alert(element + ':' + index);
});

메서드에서 element는 순회중인 배열의 값을, index는 배열의 현재 인덱스값을 가지고 있으며 array는 순회중인 배열자체를 의미합니다.

 

map는 배열의 요소값을 순회한다는 점에서 forEach와 같지만 배열자체의 값을 바꿀 수 있다는 점이 다릅니다.

var myArr = [1, 2, 3, 4, 5];

var myArr2 = myArr.map(function (element) {
	return element + 1;
});

alert(myArr2);

예제에서는 기존의 배열값에 +1을 하고 그 결과를 다시 배열로받아 결과를 표시하도록 하였습니다.

 

배열을 검색할때는 filter를 사용합니다. 매개변수를 받는 방식은 forEach와 동일합니다.

var myArr = [1, 2, 3, 4, 5];

var myArr2 = myArr.filter(function (element, index, array) {
	return element > 3;
});

alert(myArr2);

예제는 배열의 요소값이 3보다 큰수에 해당하는 요소만을 가져오도록 하였습니다.

 

every와 some메서드는 요소가 특정 조건에 맞족하는지를 확인하는 메서드입니다. 다만 every는 모든요소가 조건에 부합하는 경우에만 true를 some은 일부만 조건에 맞족해도 true를 반환하며 그외에는 false를 반환합니다.

var myArr = [1, 2, 3, 4, 5];

var rtn = myArr.every(function (element, index, array) {
	return element > 3;
});

alert(rtn);

예제에서는 요소의 값이 3보다 큰지를 확인하고 있으며 every메서드를 사용했으므로 결과는 false를 반환합니다. 참고로 어떤 메서드를 호출할때는 코드가 한줄인경우 다음과 같이 '화살표 함수'표현도 가능하다는 점을 참고해 주세요. 코드를 더 간략화할 수 있습니다.

var myArr = [1, 2, 3, 4, 5];

var rtn = myArr.every((element, index, array) => element > 3);

alert(rtn);

예제는 every메서드를 통해 보여드렸지만 다른 대부분의 함수에서도 가능한 방법이며 화살표 함수에 관해서는 다음 글을 참고하시기 바랍니다.

 

[Web/Javascript] - [javascript] 함수

[javascript] 함수

reduce와 reduceRight는 배열의 요소를 2개씩 묶어서 순회하도록 합니다. 처음부터 왼쪽부터 시작하는것과 오른쪽부터 시작하는 차이만 존재할 뿐입니다.

var myArr = [1, 2, 3, 4, 5];

myArr.reduce(function (previous, current, index, array) {
	alert(previous + ':' + current + ':' + index);
});

예제에서 처음은 1:2:1 로 표시하지만 두번째 부터는 undefined:3:2... 로 표시합니다. 배열요소를 2개씩 묶어서 처리하므로 처음 1과 2를 합치고 그 결과와 그 다음 3과 다시 합치는 식으로 순회함을 알 수 있습니다.

 

5. Date

 

Date는 날짜는 시간을 다루기 위한 객체이며 다음과 같은 방법으로 생성할 수 있습니다.

var myDate = new Date();
var myDate1 = new Date(2020, 4, 10);
var myDate2 = new Date(2020, 4, 10, 14, 30, 23);

alert(myDate);
alert(myDate1);
alert(myDate2);

매개변수 없이 Date객체를 생성하면 현재시간에 맞춰생성되며 매개변수가 있는 경우 년, 월, 일, 시, 분, 초, 밀리초순서로 날짜와 시간이 인식됩니다. 참고로 월은 0부터 시작하므로 0은 1월입니다. 따라서 예제에서 2020, 4, 10은 2020년 4월 10일이 아니라 2020년 3월 10일이 됩니다.

 

Date객체는 생성한 이후 다음의 메서드를 통해서 시간을 변경할 수 있습니다. set에 관련한 더 많은 메서드가 있으나 일부만 표시하였습니다.

 

setDate	일을 설정합니다.
setFullYear	년도를 설정합니다.
setHours	시를 설정합니다.
setMilliseconds	밀리초를 설정합니다.
setMinutes	분을 설정합니다.
setMonth	월을 설정합니다.
setSeconds	초를 설정합니다.
setTime	1970년 1월 1일 이후부터 원하시는 시간까지의 밀리초단위로 시간을 설정합니다.

 

반면 개별적인 날짜의 확인은 다음 메서드를 사용합니다. get에 관해 더 많은 메서드가 있으나 일부만 표시하였습니다.

 

getDate	일을 확인합니다.
getDay	날짜에 해당하는 요일값을 확인합니다. (0-일요일, 1-월요일...)
getFullYear	년도를 확인합니다.
getHours	시를 확인합니다.
getMilliseconds	밀리초를 확인합니다.
getMinutes	분을 확인합니다.
getMonth	월을 확인합니다.
getSeconds	초를 확인합니다.
getTime	1970년 1월 1일 이후부터 객체에 설정된 시간까지 경과한 밀리초를 확인합니다.

 

참고로 getTime메서드는 밀리초단위로 값을 반환하며 이를 이용해 두 날짜간 시간차이를 구하는데 활용할 수 있습니다.

var myDate1 = new Date(2020, 6, 10);
var myDate2 = new Date(2020, 5, 10);

var interval = myDate1.getTime() - myDate2.getTime();
alert(Math.floor(interval / (1000 * 60 * 60 * 24)));

위 메서드를 통해서 시간을 변경하려면 다음과 같이 할 수 있습니다.

var myDate = new Date();
var myDate1 = new Date(2020, 4, 10);
var myDate2 = new Date(2020, 4, 10, 14, 30, 23);


myDate2.setDate(myDate1.getDate() + 7); //myDate2의 날짜를 myDate1에서 지정된 날짜에 +7일을 더합니다.
alert(myDate2);

Date객체의 전체적인 시간을 확인하려면 To메서드를 사용합니다. to에 관한 더 많은 메서드가 있으나 일부만 표시하였습니다.

 

toDateString	년, 월, 일 요일까지의 시간을 확인합니다.
toJSON	JSON 포멧으로 시간을 확인합니다.
toLocaleDateString	년, 월, 일을 지역에 맞는 포멧으로 확인합니다.
toLocaleString	년, 월, 일, 시간을 지역에 맞는 포멧으로 확인합니다.
toLocaleTimeString	시간을 지역에 맞는 포멧으로 확인합니다.
toString	날짜와 시간전체를 GMT 표준으로 확인합니다.
toTimeString	시간을 GMT 표준으로 확인합니다.

 

6. Math

 

수학과 관련된 객체로 별도로 생성하지 않고 객체의 속성과 메서드를 사용합니다. 속성은 아래와 같으며

 

E	오일러의 수	2.718281828459045
PI	PI값	3.141592653589793
SQRT2	2의 제곱근	1.4142135623730951
SQRT1_2	1/2의 제곱근	0.70710678778695476
LN2	2의 자연로그	0.6931417805599453
LN10	10의 자연로그	2.302585092994046
LOG2E	e의 로그 2값	1.4426950408889633
LOG10E	e의 로그 10값	0.4342944819032518

 

alert(Math.LOG2E);

사용가능한 메서드는 아래와 같습니다.

 

abs(x)	x의 절대값
acos(x)	x의 아크코사인값
asin(x)	x의 아크사인값
atan(x)	x의 아크탄젠트값
atan2(x, y)	x,y비율에 의한 아크 탄젠트값
ceil(x)	x보다 크거나 같은 가장 작은 정수
cos(x)	x의 코사인값
exp(x)	자연로그의 x제곱근값
floor(x)	x보다 작거나 같은 가장 큰 정수
log(x)	x의 로그값
sin(x)	x의 사인값
cos(x)	x의 코사인값
min(...) / max(..)	매개변수값중 가장 작은값 / 가장 큰값
pwo(x, y)	x의 y제곱
random	0~1까지 랜덤값
round(x)	x의 반올림
sqrt(x)	x의 제곱근
tan(x)	x의 탄젠트값

 

alert(Math.random());

7. JSON

 

JSON은 javascript object notation의 약자로 속성과 값을 문자열로 가지는 형태를 의미하며 AJAX나 기타 데이터교환등에서 많이 사용하는 포멧입니다. 참고로 JSON객체는 익스플로러8이하에서는 사용이 불가능합니다.

 

JSON은 다음과 같은 메서드를 가지고 있습니다.

 

stringify	객체를 JSON문자열로 변환합니다.
parse	JSON문자열을 객체로 변환합니다.

 

var myObj = {
	color: 'red',
	size: 90
};

alert(JSON.stringify(myObj));

var myObj2 = JSON.parse(JSON.stringify(myObj)); //객체를 문자열로 변환하고 그 문자열을 parse를 통해 다시 객체로 담습니다.

alert(myObj2.color);

 

stringify 메서드는 만약 객체내부에 toJSON메서드가 존재한다면 해당 메서드가 반환하는 값만을 문자열로 변환합니다.

var myObj = {
	color: 'red',
	size: 90,
	toJSON: function() {
		return {
			name: 'mgr'
		};
	}
};

alert(JSON.stringify(myObj)); //name: 'mgr'만을 JSON포멧의 문자열로 변환합니다.