JavaScript - 객체(Object), 메서드, 내장객체

객체(Object)

 예) 프로그램에서 필요할 때마다 원(circle)을 만들어 사용    =>   원(circle)을 '객체(Object)'

      원(circle)을 구성하는 요소로는 색상과 지름이 필요        =>   객체의 구성 요소 '속성(Property)'

      원(circle)의 반지름을 구하는 기능 필요                          =>   '기능'은 함수를 의미 , 객체의 함수를 '메서드'라 부름 

 

 

객체와 메서드

1) new연산자와 함수를 통한 객체의 정의 

• 'var 객체 = new Object( )'에서 객체는 변수를 의미 
• '익명함수'에서 변수에 함수가 저장되면 그 변수는 함수가 되는 것 처럼 변수에 new Object( )가 저장되면 그 변수는 객체가 된다. 

var 객체 = new Object();
객체.속성 = 속성값;
객체.메서드 = function() {

}

new연산자 객체 방식

 =>

'circle 객체'는 'red circle 객체'와 'blue circle 객체'가 따로 존재 하지 않는다는 점! 

circle 객체의 속성 color 값은 원래 'red'였지만 'blue'로 바꾸어 버리면 현재 circle 객체의 color 속성값은 'blue'로 변경  

 

 해결 ) 객체를 복사하여 사용할 수 있는 방법 중  'var 객체 = new 함수()'의 형태가 바로 객체를 복사하는 방법

           여기서 사용되는 함수를 '생성자함수'라고 하고 'new연산자'와 '생성자함수'를 통해 복사된 객체를 '인스턴스'라 부름

          생성자 함수 : 사용자의 필요에 의해 만들어지는 '사용자 정의 객체'와 자바스크립트에서 기본적으로 제공해 주는 '내장객체'에서 사용

 

 

2) 객체 리터럴을 통한 객체의 정의

•  객체 리터럴 방식은 객체의 속성들을 '{ 속성 : 속성값 }'의 형태로 표현하는 방법

var 객체 = { 속성 : 속성값, 메서드 : function(){}, . . . }

var 객체 = {
  속성 : 속성값,
  메서드 : function() {
  },
  . . .
}

var 객체 = { }
객체.속성
객체.메소드
. . . 

객체 리터럴 방식 

 * 객체의 속성을 변경, 추가할 경우 circle.color 대신 circle["color"]로 표현 가능 

circle["color"]="purple";
str+="원의 색: "+circle["color"];

 

 

3) 객체에 사용되는 for..in 문

•  객체에서는 반복문을 사용할 때 for in 문을 이용하여 반복적인 작업을 조금 더 쉽게 가능 

for(var	변수 in 객체명) {
   실행문;
}

 

 

4) 객체의 속성과 메서드 삭제 

• 객체의 속성과 메서드는 delete 연산자를 이용하여 삭제 가능 

 

 

내장객체 

 : 프로그램 개발 시 자주 사용되는 객체를 '내장 객체'로 제공해 주어 조금 더 쉽게 프로그램을 개발할 수 있게 해 준다.

• Object
• Number
• String
• Array
• Math
• Date
• RegExp
• Function
• Boolean

 

1) Number 객체

    ⓐ Number 객체 생성 방법

        : new연산자와 Number()함수를 통해 생성된 num은 Number 객체의 '인스턴스' 가 된다. 

          Number()함수는 '생성자함수'가 되며 Number 객체의 경우 변수에 숫자가 저장되며 알아서 변수를 Number 객체로

          만들어줌

• Number, String, Boolean 과 같은 기본 데이터 형들은 new연산자와 생성자함수를 굳이 사용하지 않아도 변수에 해당 값을 입력하면 객체로 인식하는데, 이런 객체를 '랩퍼 객체'라고 한다. 

var num=new Number(10);
var num=10;

 

    ⓑ Number 객체 프로퍼티(속성)

프로퍼티(속성)	설명
MAX_VALUE	자바스크립트에서 사용할 수 있는 최대값 속성
MIN_VALUE	자바스크립트에서 사용할 수 있는 최소값 속성
NaN	Not a Number로 숫자가 아닐 때 반환해 주는 속성
NEGATIVE_INFINITY	음수 무한대 속성
POSITIVE_INFINITY	양수 무한대 속성

 단, MAX_VALUE, MIN_VALUE, NEGATIVE_INFINITY, POSITIVE_INFINITY 속성은 객체의 '인스턴스'에 사용할 수 없다. 

올바른 사용 예	틀린 예
Number.MAX_VALUE -> O	var num=10;  num.MAX_VALUE -> X  num.MIN_VALUE -> X
Number.MIN_VALUE -> O

 

    ⓒ Number 객체 메서드 

        : Number 객체 메서드들을 통해 변경된 숫자 값들은 모두 문자로 반환된다. 

메서드	설명
toFixed()	toFixed(n)일 때 n값만큼 소수점 자릿수를 만들어 준다.(자릿수 이전 값 반올림) num=328.576 num.toFixed(2) -> 328.58(6값 반올림)
toString()	toString(n)일 때 n값의 진수로 만들어 줍니다. num=328.576 num.toString(16) -> 148.9374bc6a7f(16 진수 표현)
toExponential()	toExponential(n)일 때 맨 앞자리 숫자 이후부터 n값만큼의 소수점 자릿수로 된 지수로  변경해 준다.(자릿수 이전 값 반올림) [ 지수 표기법 ] e+1은 1*10의 1승 -> 10 e+2은 1*10의 2승 -> 100 num=328.576 num.toExponential(2) -> 3.29e+2(5값 반올림)
toPrecision()	toPrecision(n)일 때 숫자를 n값의 자릿수만큼 반환해 주고 만약 숫자를 n값의 개수로 표현할 수 없으면 지수 표기법으로 변경해 줍니다.(자릿수 이전 값 반올림) num=328.576 toPrecision(2) -> 3.3e+2(8값 반올림)

 

 - 소수점 계산에 대한 문제점과 해결 방법 

document.write(46000 * 0.7);

 

 - 해결

    : 곱해지는 소수점을 정수로 바꾼 뒤 다시 소수 자리 수만큼 나누어 준다.

document.write((46000 * (0.7 * 10)) / 10);

 

2) String 객체

    : String 객체뿐만 아니라 자바스크립트에서 index가 사용되면 첫 번째 위치한 값은 무조건 0으로 시작된다. 

       ex) ' DREAM ' 이 있을 경우의 index

문자	D	R	E	A	M
문자열	1	2	3	4	5
index	0	1	2	3	4

    ⓐ String 객체 생성 방법

        : new연산자와 String()함수를 통해 String 객체를 만들 수 있고 변수에 문자가 저장되면 그 변수는 String 객체가 된다.

var str=new String("자바스크립트");
var str="자바스크립트";

   

    ⓑ String 객체 프로퍼티(속성)

프로퍼티(속성)	설명
length	문자열의 길이(개수)를 취득합니다. str="DREAM" str.lenght -> 5(문자열의 개수)

 

    ⓒ String 객체 메서드 

메서드	설명
charAt()	charAt(n)일 때 문자열에서 n값과 같은 index 위치의 문자를 반환 str="DREAM" str.charAt(0) -> "D"
charCodeAt()	charCodeAt(n)일 때 문자열에서 n값과 같은 index 위치의 문자를 유니코드로 반환 str="DREAM" str.charCodeAt(0) -> "D"의 유니코드는 68
fromCharCode()	fromCharCode(n1,n2, . . . )일 때 n1, n2, . . . 를 유니코드 값으로 주면 문자로 반환  String.fromCharCode(68,82) -> "DR"
toLowerCase()	소문자로 변경
toUpperCase()	대문자로 변경
indexOf()	indexOf("a")일 때 "a"문자와 일치하는 문자를 왼쪽 문자열부터 검색하여 index값을 반환 str="Javascript" str.indexOf("a") -> 1
lastIndexOf()	lastIndexOf("a")일 때 "a" 문자와 일치하는 문자를 오른쪽 문자열부터 검색하여 index값을 반환 str="Javascript" str.lastIndexOf("a") -> 3
slice()	slice(n1,n2)일 때 n1값과 같은 index 위치에서 시작하여 문자열 번호 n2까지 추출 str="Javascript" str.slice(4,10)  ->  s(index 4번) ~ t(10번째 문자열)  ->  "script"
substring()	subString(n1,n2)일 때 n1값과 같은 index 위치에서 시작하여 문자열 번호 n2 까지 추출 str="Javascript" str.substring(4,10)  ->  s(index 4번) ~ t(10번째 문자열)  -> "script"
substr()	substr(n1,n2)일 때 n1값은 같은 index 위치부터 index 위치를 포함한 n2개의 문자를 추출 str="Javascript" str.substr(4,6)  -> s(index 4번) ~ script(index 4번 포함 6개 문자)  -> "script"
split()	split("_")일 때 "_" 문자를 기준으로 문자열을 분할하여 배열로 만들어 준다. str="Java_script" str.split("_")  ->  "_"를 기준으로 [0] = "Java" ,    [1]="script" 를 저장
replace()	replace("a","b") 일때 "a"을 "b"로 변경 str="a" str.replace("a","b")  -> 문자 "a"를 "b"로 변경
concat()	두 개의 문자를 하나의 문자로 만들어 준다. str1="Java" str2="script" str1.concat(str2)  ->  "javascript"

 fromCharCode()메서드의 경우 String 객체의 '인스턴스'에 사용하지 않고 String 객체 원형에 사용해야 한다.

String 객체 메서드에는 문자를 HTML태그로 감싸 주는 메서드인 anchor(), bole(), link(), sub(), sup() 등이 존재 

 

 

3) Array 객체

    : 배열은 변수를 여러 개의 공간으로 분할하고 분할된 공간에 index를 부여하여 데이터를 저장 또는 호출 할 수 있는 객체 

객체			배열
속성	메서드	. . .	[0]	[1]	[2]	. . .
속성값	function(){ }	. . .	배열값	배열값	배열값	. . .

• [0], [1], [2], . . . 를 배열의 index라 한다. 
• 객체는 '속성'으로 접근하여 데이터를 저장하거나 호출
• 배열은 '속성' 대신 index로 데이터에 접근    

원(circle) 객체			원(circle) 배열
color	diameter	radius	[0]	[1]	[2]
"red"	100	function(){...}	"red"	100	50

circle.color="red" circle[0]="red"

• 객체 : 단순히 배열처럼 데이터만을 저장하는 것이 아니라 메서드를 만들어 사용 가능 
• 배열 : 보통 같은 종류의 데이터를 저장할 때 사용   

city
[0]	[1]	[2]	[3]
서울	대전	대구	부산

   

    ⓐ Array 객체 생성 방법

• new 연산자
• Array()함수
• 배열 리터럴 

var ary=new Array("html", "css", "javascript", "jQuery");

var ary=new Array(); ary[0]="html"; ary[1]="css"; ary[2]="javascript" ary[3]="jQuery";

var ary=["html", "css", "javascript", "jQuery]

var ary=[]; ary[0] = "html"; ary[1] = "css"; ary[2] = "javascript"; ary[3] = "jQuery";

ary
[0]	[1]	[2]	[3]
"html"	"css"	"javascript"	"jQuery"

 

    ⓑ Array 객체 프로퍼티(속성)

프로퍼티(속성)	설명
length	배열의 개수를 취득 ary=["html", "css", "javascript", "jQuery"] ary.length  ->  4(배열의 개수)

   

    ⓒ Array 객체 메서드

        : Array 객체 메서드 경우 배열에 직접적으로 영향을 주는 메서드와 주지 않는 메서드로 나누어 진다.

메서드	설명
배열에 영향을 주지 않는 메서드 ↓
slice()	String객체의 slice()메서드와 유사 ary=["a","b","c","d","e"] ary.slice(2)  ->  "c","d","e" ary.slice(1,3)  ->  "b","c" ary -> ["a","b","c","d","e"]
join()	배열 안의 값들을 문자로 연결 ary=["a","b","c","d","e"] ary.join("/")  ->  a/b/c/d/e
concat()	배열을 연결 ary1=["a","b","c"] ary2=["d","e"] ary1.concat(ary2)  ->  ["a","b","c","d","e"]
toString()	배열값들을 문자열로 변환 ary=["a","b","c"] ary.toString()  ->  "a,b,c"
배열에 영향을 주는 메서드 ↓
splice()	지정된 부분의 배열을 삭제하거나 추가할 수 있다. ary= ["a","b","c","d","e"] ary.splice(1,3)  ->  'b','c','d'를 삭제 ary  ->  ["a","e"] ary.splice(1,3,"z")  ->  'b','c','d'를 삭제하고 'z'를 추가  ary=["a","z","e"]
shift()	배열의 첫 요소를 삭제 ary= ["a","b","c","d","e"] ary.shift()  -> index 0번째를 삭제 ary -> ["b","c","d","e"]
unshift()	배열의 첫 요소를 추가 ary=["a","b","c","d","e"] ary.unshift("f")  ->  6개 배열이 된다.(첫 번째 배열 요소에 "f"를 추가) ary  ->  ["f","a","b","c","d","e"]
pop()	배열의 마지막 요소를 삭제 ary= ["a","b","c","d","e"] ary.pop()  -> index 4번째 요소를 삭제 ary  ->   ["a","b","c","d"]
push()	배열의 마지막 요소에 추가 ary= ["a","b","c","d","e"] ary.push("f")  ->  6개 배열이 된다.(마지막 배열 요소에 "f"를 추가) ary  ->   ["a","b","c","d","e","f"]
reverse()	배열의 순서를 바꿔 준다. var ary= ["a","b","c","d","e"] ary.reverse()  ->  "e","d","c","b","a" ary  ->  [ "e","d","c","b","a"]
sort()	배열을 오름차순으로 정렬 배열값이 숫자인 경우에도 문자열로 정렬하기 때문에 문제발생 * var ary=[2, 41, 11] ary.sort()  ->  2, 41(4), 11(1)  ->  [11,2,4]   * var ary=[2, 41, 11] ary.sort(function(a,b){   //return a-b  ->  [2,11,41] 오름차순 정렬   //return b-a  ->  [41,11,2] 내림차순 정렬 })

 

   ⓓ 2차원 배열 

       : 2차원 배열이란 배열값에 배열이 저장되는 형태

ary
ary[0]			ary[1]			ary[2]
[0]	[1]	[2]	[0]	[1]	[2]	[0]	[1]	[2]
"a"	"b"	"c"	"d"	"e"	"f"	"g"	"h"	"i"

 

 

4) Math 객체

• 수학연산을 위한 객체

    ⓐ Math 객체 사용 방법

         : Math 객체는 다른 내장 객체들과는 달리 new연산자와 생성자함수로 객체를 생성하지 않는다.

Math.프로퍼티(속성)

Math.메서드

 

    ⓑ Math 객체 프로퍼티(속성)

         : 수학적 값을 반환해 주는 프로퍼티

프로퍼티(속성)	설명
PI	Math.PI  ->  원주율값(3.14)
E	Math.E  -> 자연 로그 밑인 상수e(2.718)
LN2	Math.LN2  -> 2의 자연 로그값(0.693)
LN10	Math.LN10  ->  10의 자연 로그값(2.302)
LOG2E	Math.LOG2E  ->  밑이 2인 e의 로그(1.442)
LOG10E	Math.LOG10E  ->  밑이 10인 e의 로그(0.434)
SQRT1_2	Math.SQRT1_2  ->  1/2의 제곱근(0.707)
SQRT2	Math.SQRT1_2  ->  2의 제곱근(1.414)

 

    ⓒ Math 객체 메서드

메서드	설명
abs()	Math.abs(n)일 때 n의 절대값을 반환
max()	Math.max(n1,n2)일 때 n1과 n2 중 큰값을 반환
min()	Math.min(n1,n2)일 때 n1과 n2 중 작은값을 반환
acos()	Math.acos(n)일 때 n의 아크 코사인값을 반환
asin()	Math.asin(n)일 때 n의 아크 사인값을 반환
atan()	Math.atan(n)일 때 n의 아크 탄젠트값을 반환
atan2()	Math.atan2(n1,n2)일 때 x축에서 n1(y좌표)값, n1(x좌표)값의 아크 탄젠트 값을 반환
round()	Math.round(n)일 때 n의 소수점 이하가 5 이상이면 반올림, 미만이면 절삭한 정수값을 반환
ceil()	Math.ceil(n)일 때 n의 소수점 이하를 올림하여 정수로 만든 값을 반환
floor()	Math.floor(n)일 때 n의 소수점 이하를 절삭한 정수값을 반환
log()	Math.log(n)일 때 n 의 로그값을 반환
sin()	Math.sin(n)일 때 n 의 사인값을 반환
tan()	Math.tan(n)일 때 n 의 탄젠트값을 반환
sqrt()	Math.sqrt(n)일 때 n 의 제곱근 값을 반환
pow()	Math.pow(n1,n2)일 때 n1의 n2승 값을 반환
exp()	Math.exp(n)일 때 Math.E값 2.718의 n승값을 반환
random()	Math.random(n)일 때 0~1 사이의 난수값을 반환

   

 

5) Date 객체

• 날짜와 시간에 대한 정보값을 얻거나 설정 가능

     ⓐ Date 객체 생성 방법

          : new연산자와 Date() 함수로 객체를 생성

var date= new Date() date.getFullYear() date.getMonth() 일반적인 Date 객체 생성

var date=new Date(1420045687780) 1970년 1월 1일 자정 이후부터 경과한 밀리초(1000은 1초를 의미)를 설정

var date=new Date("2015/08/26") 날짜를 문자열 형식으로 Date객체를 생성

var date=new Date(2015,8,26,5,25,50,300) 년,월,일,시,분,초,밀리초를 설정

 

     ⓑ Date 객체 메서드 

• 메서드명 앞에 get,set이 붙음
• get : 정보값을 얻는 것
• set : 정보값을 설정 

메서드	설명
getFullYear() getMonth() getDate() getDay() getHours() getMinutes() getSeconds() getMilliseconds()	4자리 '년도'값을 반환 '월'값을 반환 (0~11) '일'값을 반환 (1~31) '요일'값을 반환 [0(일요일) ~ 6(토요일)] '시간'값을 반환 (0~23) '분'값을 반환 (0~59) '초'값을 반환 (0~59) '밀리초(1/1000초)' 값을 반환 (0~999)
setFullYear() setMonth() setDate() setHours() setMinutes() setSeconds() setMilliseconds()	4자리 '년도'값을 설정 '월'값을 설정 (0~11) '일'값을 설정 (1~31) '시간'값을 설정 (0~23) '분'값을 설정 (0~59) '초'값을 설정 0~59) '밀리초(1/1000초)' 값을 설정 (0~999)
toString()	일시를 문자로 반환
toDateString()	날짜를 문자열로 반환
toTimeString()	시간을 문자열로 반환
parse()	날짜 문자열을 1970년 1월 1일 자정 이후부터 경과한 밀리초값을 반환

 

 

 6) 정규 표현식 객체

      : 'RegExp 객체'는 문자의 패턴을 만들 때 사용 

         ex) 회원 가입에 필요한 이메일 주소를 정해진 'id@주소'의 형식으로만 입력 받고 싶다면 'id@주소' 형식의 문자패턴과

               사용자가 입력한 문자를 비교할 경우 사용 (정해진 문자 패턴을 만들 때 필요한 것)

       

         ⓐ RegExp 객체 생성 방법

              : RegExp 객체는 new 연산자와 RegExp() 함수 또는 리터럴 방식으로 생성 가능 

var rexp=new RegExp("Javascript","igm")   igm은 생략 가능하며 필요에 따라 하나씩 사용 가능

var rexp=/Javascript/igm   igm은 생략 가능하며 필요에 따라 하나씩 사용 가능

 

 

        ⓑ RegExp 객체 메서드

메서드	설명
test()	정규 표현식 문자열의 일치 여부에 따라 true 또는 false를 반환 var rexp=/Javascript/ rexp.text("Javascript")  ->  true rexp.test("jQuery")  ->  false
exec()	정규 표현식과 일치하는 문자열을 반환 var rexp=/Javascript/ rexp.exec("Javascript jQuery")  ->  Javascript
match()	정규 표현식과 일치하는 문자열을 반환 var rexp=/Javascript/ str="Javascript jQuery" str.match(rexp)  ->  javascript
search()	정규 표현식과 일치하는 문자열의 시작 index 위치를 반환 var rexp=/Javascript/ str="Javascript" str.search(rexp)  ->  0

     

 

       ⓒ RegExp 객체 플래그

플래그	설명
i	대소문자 구분 없이 정규 표현식을 문자열을 비교 var rexp1=/javascript/ var rexp2=/javascript/i var str="Javascript" rexp1.test(str)  ->  false rexp2.text(str)  ->  true
g	문자열 전체를 정규 표현식과 비교 var rexp1=/a/ var rexp2=/a/g var str="javascript" str.match(rexp1)  ->  a str.match(rexp2)  ->  a,a
m	여러 줄의 문자열을 정규 표현식과 비교  var rexp1=/^s/ var rexp2=/^s/m var str="javascript￦nscript" str.match(rexp1)  ->  null str.match(rexp2)  ->  s '^s'는 행의 첫 번째 문자가 s로 시작하는 것을 의미하고 '\n'은 행 바꿈을 의미

 

 

      ⓓ RegExp 객체 주요 패턴 

패턴	설명
ABC	ABC 문자열 검색
[ABC]	A,B,C 중 한 개의 문자를 검색
[^ABC]	A,B,C 문자를 제외한 문자를 검색
[A-Z]	알파벳 대문자 A에서 Z까지 문자를 검색
[a-z]	알파벳 소문자 a에서 z까지 문자를 검색
[0-9]	숫자 0-9를 검색
A|B|C	A 또는 B 또는 C 문자를 검색
^	행의 첫 문자가 일치하는 것을 검색
$	행의 끝 문자가 일치하는 것을 검색
.	하나의 문자를 검색 만약 "." 문자로 사용할 경우 "\." 으로 해야함
\w	알파벳 대소문자, 숫자, _를 검색
\W	알파벳 대소문자, 숫자, _를 제외하고 검색
\d	숫자를 검색
\D	숫자를 제외하고 검색
\s	공백 문자를 검색
\S	공백 문자를 제외하고 검색
*	abc * 일 때 ab,abc,abcc,abccc, . . . 를 의미  ' * ' 바로 앞의 문자('c') 는 없어도 되고 반복되도 가능
?	abc? 일 때 ab, abc를 의미 ' ? ' 바로 앞의 문자('c')는 없어도 되고 반복 문자는 포함되지 않음
+	abc+ 일 때 abc,abcc,abccc, . . . 를 의미 ' + ' 바로 앞의 문자('c')는 꼭 있어야 하고 반복되도 가능
{ }	\d{3}이면 숫자 3개를 의미 \d{3,5}이면 숫자 3~5개를 의미 \d{3.}이면 숫자 3개 이상을 의미
[ㄱ-힣]	한글을 검색

 

 

[ 객체 소멸 방법 ]

• new 연산자를 이용하여 객체를 생성할 수는 있지만 소멸시키는 코드나 방법은 없다.
• 사용하지 않는 객체들을 자동으로 수거하는 가비지 컬렉션(garbage collection) 기법이 사용