자바 스크립트 객체 메서드 - jaba seukeulibteu gaegche meseodeu

객체의 개념

객체(object)란?

객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있습니다.

객체의 예

객체(object)

- 고양이

프로퍼티(property)

- cat.name = "나비"

- cat.family = "코리안 숏 헤어"

- cat.age = 0.1

- cat.weight = 300

메소드(method)

- cat.mew()

- cat.eat()

- cat.sleep()

- cat.play()

고양이 객체는 모두 위와 같은 프로퍼티를 가지지만, 각 프로퍼티의 값은 인스턴스마다 전부 다를 것입니다.

자바스크립트 객체

자바스크립트의 기본 타입(data type)은 객체(object)입니다.

객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합입니다.

프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 합니다.

예제

var cat = "나비"; // 일반적인 변수의 선언

// 객체도 많은 값을 가지는 변수의 하나임.

var kitty = { name: "나비", family: "코리안 숏 헤어", age: 1, weight: 0.1 };

cat          // 나비

kitty.name   // 나비

코딩연습 ▶

자바스크립트에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체입니다.

하지만 숫자, 문자열, 불리언과 같은 원시 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 함께 가지게 됩니다.

객체의 프로퍼티 참조

자바스크립트에서 객체의 프로퍼티를 참조하는 방법은 다음과 같습니다.

문법

객체이름.프로퍼티이름

또는

객체이름["프로퍼티이름"]

예제

var person = {

    name: "홍길동",      // 이름 프로퍼티를 정의함.

    birthday: "030219",  // 생년월일 프로퍼티를 정의함.

    pId: "1234567",      // 개인 id 프로퍼티를 정의함.

    fullId: function() { // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환함.

        return this.birthday + this.pId;

    }

};

person.name    // 홍길동

person["name"] // 홍길동

코딩연습 ▶

객체의 메소드 참조

자바스크립트에서 객체의 메소드를 참조하는 방법은 다음과 같습니다.

예제

var person = {

    name: "홍길동",

    birthday: "030219",

    pId: "1234567",

    fullId: function() {

        return this.birthday + this.pId;

    }

};

person.fullId() // 0302191234567

person.fullId;  // function () { return this.birthday + this.pId; } 

코딩연습 ▶

메소드를 참조할 때 메소드 이름 뒤에 괄호(())를 붙이지 않으면, 메소드가 아닌 프로퍼티 그 자체를 참조하게 됩니다.
따라서 괄호를 사용하지 않고 프로퍼티 그 자체를 참조하게 되면 해당 메소드의 정의 그 자체가 반환됩니다.

연습문제

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

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

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

객체와 메서드

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

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

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

}

 =>

'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, NEGATIVE_INFINITY, POSITIVE_INFINITY 속성은 객체의 '인스턴스'에 사용할 수 없다. 

 var num=10;

 num.MAX_VALUE -> X

 num.MIN_VALUE -> X

    ⓒ Number 객체 메서드 

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

toFixed(n)일 때 n값만큼 소수점 자릿수를 만들어 준다.(자릿수 이전 값 반올림)

num=328.576

num.toFixed(2) -> 328.58(6값 반올림)

toString(n)일 때 n값의 진수로 만들어 줍니다.

num=328.576

num.toString(16) -> 148.9374bc6a7f(16 진수 표현)

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(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

    ⓐ String 객체 생성 방법

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

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

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

문자열의 길이(개수)를 취득합니다.

str="DREAM"

str.lenght -> 5(문자열의 개수)

    ⓒ String 객체 메서드 

charAt(n)일 때 문자열에서 n값과 같은 index 위치의 문자를 반환

str="DREAM"

str.charAt(0) -> "D"

charCodeAt(n)일 때 문자열에서 n값과 같은 index 위치의 문자를 유니코드로 반환

str="DREAM"

str.charCodeAt(0) -> "D"의 유니코드는 68

fromCharCode(n1,n2, . . . )일 때 n1, n2, . . . 를 유니코드 값으로 주면 문자로 반환 

String.fromCharCode(68,82) -> "DR"

indexOf("a")일 때 "a"문자와 일치하는 문자를 왼쪽 문자열부터 검색하여 index값을 반환

str="Javascript"

str.indexOf("a") -> 1

lastIndexOf("a")일 때 "a" 문자와 일치하는 문자를 오른쪽 문자열부터 검색하여 index값을 반환

str="Javascript"

str.lastIndexOf("a") -> 3

slice(n1,n2)일 때 n1값과 같은 index 위치에서 시작하여 문자열 번호 n2까지 추출

str="Javascript"

str.slice(4,10)  ->  s(index 4번) ~ t(10번째 문자열)  ->  "script"

subString(n1,n2)일 때 n1값과 같은 index 위치에서 시작하여 문자열 번호 n2 까지 추출

str="Javascript"

str.substring(4,10)  ->  s(index 4번) ~ t(10번째 문자열)  -> "script"

substr(n1,n2)일 때 n1값은 같은 index 위치부터 index 위치를 포함한 n2개의 문자를 추출

str="Javascript"

str.substr(4,6)  -> s(index 4번) ~ script(index 4번 포함 6개 문자)  -> "script"

split("_")일 때 "_" 문자를 기준으로 문자열을 분할하여 배열로 만들어 준다.

str="Java_script"

str.split("_")  ->  "_"를 기준으로 [0] = "Java" ,    [1]="script" 를 저장 

replace("a","b") 일때 "a"을 "b"로 변경

str="a"

str.replace("a","b")  -> 문자 "a"를 "b"로 변경

두 개의 문자를 하나의 문자로 만들어 준다.

str1="Java"

str2="script"

str1.concat(str2)  ->  "javascript"

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

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

3) Array 객체

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

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

circle.color="red"

circle[0]="red"

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

    ⓐ 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=[];

ary[0] = "html";

ary[1] = "css";

ary[2] = "javascript";

ary[3] = "jQuery";

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

배열의 개수를 취득

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

ary.length  ->  4(배열의 개수)

    ⓒ Array 객체 메서드

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

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"]

배열 안의 값들을 문자로 연결

ary=["a","b","c","d","e"]

ary.join("/")  ->  a/b/c/d/e

배열을 연결

ary1=["a","b","c"]

ary2=["d","e"]

ary1.concat(ary2)  ->  ["a","b","c","d","e"]

배열값들을 문자열로 변환

ary=["a","b","c"]

ary.toString()  ->  "a,b,c"

지정된 부분의 배열을 삭제하거나 추가할 수 있다.

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"]

배열의 첫 요소를 삭제

ary= ["a","b","c","d","e"]

ary.shift()  -> index 0번째를 삭제

ary -> ["b","c","d","e"]

배열의 첫 요소를 추가

ary=["a","b","c","d","e"]

ary.unshift("f")  ->  6개 배열이 된다.(첫 번째 배열 요소에 "f"를 추가)

ary  ->  ["f","a","b","c","d","e"]

배열의 마지막 요소를 삭제

ary= ["a","b","c","d","e"]

ary.pop()  -> index 4번째 요소를 삭제

ary  ->   ["a","b","c","d"]

배열의 마지막 요소에 추가

ary= ["a","b","c","d","e"]

ary.push("f")  ->  6개 배열이 된다.(마지막 배열 요소에 "f"를 추가)

ary  ->   ["a","b","c","d","e","f"]

배열의 순서를 바꿔 준다.

var ary= ["a","b","c","d","e"]

ary.reverse()  ->  "e","d","c","b","a"

ary  ->  [ "e","d","c","b","a"]

배열을 오름차순으로 정렬

배열값이 숫자인 경우에도 문자열로 정렬하기 때문에 문제발생

* 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차원 배열이란 배열값에 배열이 저장되는 형태

4) Math 객체

    ⓐ Math 객체 사용 방법

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

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

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

    ⓒ Math 객체 메서드

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)

 6) 정규 표현식 객체

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

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

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

         ⓐ RegExp 객체 생성 방법

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

  var rexp=new RegExp("Javascript","igm")

  igm은 생략 가능하며 필요에 따라 하나씩 사용 가능 

  var rexp=/Javascript/igm

  igm은 생략 가능하며 필요에 따라 하나씩 사용 가능 

        ⓑ RegExp 객체 메서드

정규 표현식 문자열의 일치 여부에 따라 true 또는 false를 반환

var rexp=/Javascript/

rexp.text("Javascript")  ->  true

rexp.test("jQuery")  ->  false

정규 표현식과 일치하는 문자열을 반환

var rexp=/Javascript/

rexp.exec("Javascript jQuery")  ->  Javascript

정규 표현식과 일치하는 문자열을 반환

var rexp=/Javascript/

str="Javascript jQuery"

str.match(rexp)  ->  javascript

정규 표현식과 일치하는 문자열의 시작 index 위치를 반환

var rexp=/Javascript/

str="Javascript"

str.search(rexp)  ->  0

       ⓒ RegExp 객체 플래그

대소문자 구분 없이 정규 표현식을 문자열을 비교

var rexp1=/javascript/

var rexp2=/javascript/i

var str="Javascript"

rexp1.test(str)  ->  false

rexp2.text(str)  ->  true

문자열 전체를 정규 표현식과 비교

var rexp1=/a/

var rexp2=/a/g

var str="javascript"

str.match(rexp1)  ->  a

str.match(rexp2)  ->  a,a

여러 줄의 문자열을 정규 표현식과 비교 

var rexp1=/^s/

var rexp2=/^s/m

var str="javascript￦nscript"

str.match(rexp1)  ->  null

str.match(rexp2)  ->  s

'^s'는 행의 첫 번째 문자가 s로 시작하는 것을 의미하고 '\n'은 행 바꿈을 의미

      ⓓ RegExp 객체 주요 패턴 

하나의 문자를 검색

만약 "." 문자로 사용할 경우 "\." 으로 해야함 

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) 기법이 사용