9. 자바스크립트 객체

객체 

  자바스크립트의 가장 기초적인 자료형은 객체이다. 자바스크립트에서 거의 모든 것은 객체이다. 문자열, 수치형, 부울

  형을 불변경 객체라고 한다. 즉 내용을 변경 할 수 없지만 어짼든 객체라는 의미이다.

  객체는 객체 지향 기술의 핵심 개념이다. 객체는 데이터와 동작을 가지고 있다.

  객체의 데이터는 객체가 가지고 있는 특정값이다. 객체의 동작은 객체가 수행할 수 있는 행동이다.

  자바 스크립트에서 객체의 데이터와 동작은 각각 변수와 함수로 표현할 수 있다. 객체 안의 변수를 속성이라고 하고

  객체 안의 함수를 메서드라고 부른다. 속성과 메서드는 객체 내부에 존재하며 서로 긴밀하게 연결되어 있다.

  객체 안의 메서드는 객체 내부의 변수를 언제든지 직접 접근하여 사용할 수 있다. 객체 안의 변수는 외부 세계로부터는

  감추어져 있다.

객체 생성 및 사용

 객체의 종류

  자바스크립트에서 사용되는 객체를 크게 2가지로 나누면 내장 객체와 사용자 정의 객체로 나눌 수 있다.

  + 내장 객체: 생성자가 미리 작성되어 있다.

  + 사용자 정의 객체: 사용자가 생성자를 정의한다.

  자바스크립트에 내장된 객체는 생성자를 정의하지 않고도 사용이 가능하다.

 객체 생성 방법

  자바스크립트는 문법 측면에서 볼 때 상당히 유연성 있는 객체 지향 언어이다.

  자바스크립트에서 새로운 객체를 생성하는 데는 크게 나누어서 2가지의 방법이 있다.

  + 객체를 객체 상수로부터 직접 생성한다.

  + 생성자 함수를 이용하여 객체를 정의하고 new를 통하여 객체의 인스턴스를 생성한다.

  자바스크립트에서는 클래스라는 개념이 없으며 모든 것은 객체이고 생성자 함수가 클래스의 역할을 흉내낸다.

 객체 상수로부터 객체 생성

  이전에도 등장하였지만 객체 상수를 사용하여 myCar 객체를 생성해 보면 다음과 같다.

var myCar = {
    model: "520d",
    speed: 60,
    color: "red",
    brake: function () {this.speed -= 10;},
    accel: function () {this.seed += 10;}
};

  위의 문장이 실행되면 바로 객체가 생성되고 객체의 이름이 myCar가 된다. 이후부터는 다음과 같이 바로 사용하면 된

  다.

myCar.color = "yellow";
myCar.brake();

  이 방법은 간단하기는 하지만 객체를 하나만 생성할 수 있다. 추가로 객체를 생성하려면 동일한 코드를 반복해야 한다.

  따라서 이런식으로 정의된 객체를 싱글톤이라고 부른다.

 생성자 함수를 이용한 객체 생성

  개발자는 자신만의 객체도 생성할 수 있다. 이것을 사용자 정의 객체라고 한다. 사용자 정의 객체를 생성하려면 생성자

  라는 특별한 함수가 필요하다. 생성자는 객체를 초기화하는 역할을 한다. 객체를 생성하는 연산자는 new이다.

function Car(model, speed, color) {
    this.model = model;
    this.speed = speed;
    this.color = color;
    this.brake = function () {
        this.speed -= 10;
    }
    this.accel = function () {
        this.speed += 10;
    }
}

  this는 코드를 실행하는 현재 객체를 의미한다. 생성자는 전달된 매개 변수값으로 현재 객체의 속성을 설정한다.

  this가 없다면 속성을 지역 변수로 혼동할 수 있기 때문에 객체의 속성에는 반드시 this를 붙인다. 앞에 this가 붙은

  변수는 속성이고 앞에 this가 붙는 함수는 메서드이다.

  생성자를 정의하였으면 객체는 다음과 같이 생성할 수 있다.

var myCar = new Car("520d", 60, "white");
myCar.color = "yellow";
myCar.brake();

  객체를 생성하려면 먼저 new 연산자를 쓰고 그 뒤에 생성자를 호출하는 문장을 작성하면 된다. new연산자가 객체를

  생성하고 생성자가 객체를 초기화 한다. new 연산자를 생략하고 생성자만 호출하면 객체가 만들어지지 않는다.

  항상 new 연산자를 사용해야 한다.

  이 방법의 장점은 개발자가 원하는 개수만큼 객체를 쉽게 만들 수 있다는 점이다.

 객체 멤버 사용하기

  객체 안의 속성과 메서드를 객체 멤버 라고 한다. 객체 멤버를 사용하기 위해서는 점연산자를 사용한다. 먼저 어떤

  객체에 속해 있는지를 말하고 나중에 멤버 이름을 말하는 것이다.

  구체적으로 myCar라는 이름의 객체 안에 color 속성을 "red"로 변경하는 문장은 다음과 같다.

myCar.color = "red";

   객체의 메서드도 동일한 형식으로 호출할 수 있다.

myCar.brake();

 기존의 객체에 속성과 메서드 추가하기

  자바스크립트에서는 기존에 존재하고 있던 객체에도 속성을 추가할 수 있는데, 생성자를 변경할 필요 없이 단순히

  값을 대입하는 문장을 적어주면 된다.

  새로운 속성 turbo와 새로운 메서드 showModel()을 myCar 객체에 추가하려면 다음과 같이 하면 된다.

//기존의 myCar 객체가 있었다고 가정하자.
myCar.turbo = true;
myCar.showModel = function() {
    alert("모델은" + this.model + "입니다.)
}

프로토타입

  각 객체는 다른 객체와 완전히 별도로 취급되었다. 따라서 하나의 객체가 가지고 있는 속성과 메서드는 다른 객체가

  전혀 이용할 수 었없다. 속성이나 메서드를 여러 객체가 공유하는 것이 어떤 경우에는 필요하다.

  자바스크립트로 게임을 제작한다고 가정하자. 점을 나타내는 객체가 필요하게 되어서 다음과 같이 생성자 함수를 정의

  하였다.

function Point(xpos, ypos) {
    this.x = xpos;
    this.y = ypos;
    this.getDistance = function () {
        this.Math.sqrt(this.x * this.x + this.y * this.y);
    };
}

  여기서 getDistance()는 원점으로부터의 거리를 계산하는 함수이다. 그런데 여러 개의 점이 필요하다고 가정하자.

  위의 생성자를 사용하여 필요한 만큼의 객체를 생성하는 코드는 다음과 같다.

var p1 = new Point(10, 20);
var p2 = new Point(10, 30);

  물론 이렇게 해도 실행에는 전혀 문제가 없다. 하지만 이것은 메모리를 낭비하면서 비효율적이다.

  getDistance() 메서드는 객체당 하나씩 가지고 있을 필요가 없다. 따라서 하나의 getDistance() 메서드를 모든 객체가

  공유하면 되는 것이다.

  결론적으로 객체는 사진만의 데이터를 가져야 하지만 메서드는 가급적 서로 공유하는 편이 좋다. 자바스크립트에서는

  프로토타입이라는 개념을 통하여 여러 객체가 공유하는 메서드를 정의할 수 있다.

 프로토타입

  자바스크립트의 모든 객체는 prototype이라는 숨겨진 객체를 가지고 있으며 이 객체를 이용해 공유되는 메서드를 작성

  할 수 있다. 앞의 Point 객체에 대하여 프로토 타입을 이용해 공유되는 메서드를 정의하여 보면 다음과 같다.

function Point(xpos, ypos) {
    this.x = xpos;
    this.y = ypos;
}
Point.prototype.getDistance = function () {
    return Math.sqrt(this.x * this.x + this.y * this.y);
};

  Point.prototype이라는 숨겨진 객체가 있으며 여기에 getDistance()를 정의해 두면 Point 객체는 모두 getDistance() 메

  서드를 공유할 수 있다는 것이다.

  getDistance() 메서드를 프로토타입 안에 정의하였지만 객체를 통하여 메서드를 호출하는 방법은 동일하다.

var p1 = new Point(10, 20);
p1.getDistance();

  또 하나의 인스턴스가 생성되어서 getDistance()가 호출된다고 해도 동일한 메서드가 사용된다.

var p2 = new Point(10, 30);
p2.getDistance();

  위의 내용을 예제를 통하여 살펴보자.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            function Point(xpos, ypos) {
                this.x = xpos;
                this.y = ypos;
            }
            Point.prototype.getDistance = function (p) {
                return Math.sqrt(this.x * this.x + this.y * this.y);
            }
            var p1 = new Point(10, 20);
            var d1 = p1.getDistance();
            var p2 = new Point(10, 30);
            var d2 = p2.getDistance();
            document.writeln(d1 + "<br>");
            document.writeln(d2 + "<br>");
        </script>
    </body>
</html>

 프로토타입 체인

  자바스크립트에서 속성이나 메서드를 참조하게 되면 다음과 같은 순서대로 찾는다.

  1. 객체 안에 속성이나 메서드가 정의되어 있는지 체크한다.

  2. 객체 안에 정의되어 있지 않으면 객체의 prototype이 속성이나 메서드를 가지고 있는지 체크한다.

  3. 원하는 속성/ 메서드를 찾을 때까지 프로토타입 체인을 따라서 올라간다.

  이것을 프로토타입 체인이라고 한다. 프로토타입 객체는 개별 객체에서 시작해서 생성자의 프로토타입을 통하여

  Object의 프로토타입까지 연결되어 있다.

  프로토타입 체인은 __proto__속성을 이용해 연결된다. 자바스크립트에서는 프로토타입을 이용해 상속을 어느 정도 

  구현할 수 있다.

 Object 객체

  Object 객체는 자바스크립트 객체의 부모가 되는 객체이다. 자바스크립트의 모든 객체는 Object 객체를 기초로 하여

  생성된다. 따라서 객체는 내부에 Object 객체의 속성과 메서드를 가지고 있다고 생각해도 좋다.

속성/ 메서드	설명
constructor	속성으로 생성자 함수를 가리킨다. var d = new Date(); d.constructor는 Date와 같다.
valueOf()	메서드로서 객체를 숫자로 변환한다.
toString()	메서드로서 객체의 값을 문자열로 변환한다.
hasOwnPropery()	전달 인수로 주어진 속성을 가지고 있으면 true 반환
isPrototypeOf()	현재 객체가 전달 인수로 주어진 객체의 프로토타입이면 true 반환

  Object 객체의 메서드는 하위 객체에서 재정의해서 사용할 수 있다. 예를 들어 Object 객체의 메서드인 toString()을 하

  위 객체에서 오버라이딩해서 다시 정의 할 수 있다.

myCar.toString = function () {
    return "새로 생성된 객체입니다."
}
document.write(myCar.toString()); // "새로 생성된 객체입니다."를 출력한다.

 자바스크립트 내장 객체

 Date 객체

  Date 객체는 날짜와 시간 작업을 하는데 사용되는 가장 기본적인 객체이다. 자바스크립트의 모든 내장 객체 중에서도

  Date 객체는 상당히 많이 사용된다.

  새로운 Date 객체는 다음과 같이 생성한다.

var today = new Date(); // 현재 날짜를 가진 객체를 생성

  위의 문장은 현재 시간을 가지고 있는 Date 객체를 생성한다. 현재 시간은 GMT나 UTC 기준으로 표시된다.

  Date 객체 생성자

  Date 객체의 생성자는 아주 다양하게 지원된다. Date 객체를 생성하는 기본적인 4가지의 방법이 있다. Date 객체를 생

  성할 때, 문자열을 인수로 줄 수 있고 정수를 줄 수도 있다.

    new Date() // 현재 날짜와 시간
    new Date(milliseconds) // 1970/01/01 이후의 밀리초
    new Date(dateString) // 다양한 문자열
    new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])

  자바스크립트의 Date객체는 매우 강력한 날짜 파서를 가지고 있어서 문자열로 날짜를 지정하는 많은 방법을 지원한다.

  가장 기본적인 방법은 연, 월, 일, 시, 분, 초, 밀리초의 문저대로 정수를 입력하는 방법이다. 여기서 주의할 점은 월은 0

  부터 시작한다는 점이다. 1월이면 0을 입력한다.

    var d1 = new Date(2013, 7, 24); // 2013년 8월 24일
    var d2 = new Date(2013, 7, 24, 18, 30, 0); // 2013년 8월 24일 18시 30분
    var d2 = new Date(2013, 7, 24, 18, 30, 0, 0); // 2013년 8월 24일 18시 30분

  또 1970년 이후로 경과된 밀리초를 입력해서 시간을 설정할 수도 있다. 이것은 유닉스 운영체제에서 처음으로 사용한

  방법이다.

    var d3 = new Date(100000000); // 율리우스 숫자로 날짜를 지정

  Date의 메서드

  Date 객체는 아주 많은 메서드를 가진다. Date 객체에서 년, 월, 일, 시, 분, 초를 각각 설정하고 추출할 수 있는 메서드

  를 제공한다.

  객체 지향에서 getXXX() 타입의 메서드는 접근자로서 객체의 속성을 추출하는데 사용된다. setXXX() 타입의 메서드는 

  설정자로서 객체의 속성을 설정하는 데 사용된다. 여기서도 월이 0부터 시작하는 것에 유의하자.

  toXXXString() 형태의 메서드는 날짜를 특정 문자열 형태로 반환하는 데 사용된다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            var today = new Date();
            document.write(today.toDateString() + "<br>"); // wed Jun 24 2020
            document.write(today.toISOString() + "<br>"); // 2020-06-24T06:04:40.605z
            document.write(today.toJSON() + "<br>"); // 2020-06-24T06:04:40.605z
            document.write(today.toLocaleDateString() + "<br>"); // 2020년 6월 24일 수요일
            document.write(today.toLocaleTimeString() + "<br>"); // 오후 3:04:40
            document.write(today.toLocalString() + "<br>"); // 2020년 6월 24일 수요일 오후 3:04:40
            document.write(today.toString() + "<br>"); // wed Jun 6 15:04:40 UTC+0900 2020
            document.write(today.toTimeString() + "<br>"); // 15:04:40 UTC+0900
            document.write(today.toUTCString() + "<br>"); // wed, 24 Jun 2020 06:04:40 UTC
        </script>
    </body>
</html>

  두 개의 날짜 비교하기

  Date 객체는 2개의 날짜를 비교하는 데도 사용된다. 예를 들어 사용자로부터 받은 날짜를 특정한 날짜와 비교할 수

  있다. 날짜 간격을 구할 때는 밀리초의 차이값을 (1000*60*60*24)로 나누어주면 된다.

  카운트다운 타이머 만들기

  현재 날짜와 내년 1월1일까지 사이의 날짜를 계산하여 보자.

var = now = new Date();
var newYear = new Date('January 1, ' + (now.getFullYear() + 1));
var diff = newyear - now;

 문제는 diff가 밀리초 단위라는 것이다. 이것을 나눗셈과 나머지 연산을 통하여 초, 분, 시간, 날짜 단위로 계산하며 된다.

 Number 객체

  Number 객체는 수치형 값을 감싸서 객체로 만들어 주는 랩퍼 객체이다. 랩퍼 객체란 수치값을 직접 사용할 수는 없고

  반드시 객체가 필요한 경우에 사용된다.

  Number 객체는 Number()로 생성할 수 있다. 예를 들어 다음 코드는 숫자 7을 가지고 있는 Number 객체를 생성한다.

var num = new Number(7);

  단순한 수치값에도 메서드를 붙이면 자바스크립트가 자동적으로 숫자에 랩퍼 객체를 감싸서 객체로 만든다. 따라서

  다음과 같은 문장이 가능하다.

1.234.toString(); // 1.234를 감싸는 랩퍼 객체가 생성된다.

  Number 객체의 속성 중 일부는 다음과 같다.

  + MAX VALUE - 표현할 수 있는 가장 큰 값

  + MIN VALUE - 표현할 수 있는 가장 작은 값

  + NaN - "Not-a-Number"의 약자

  Number 객체의 메서드 중 일부는 다음과 같다.

  +toExponential([digits]) - 지수형으로 반환, 인수는 소수점 이하 숫자의 개수이다.

  +toFixed([digits]) - 고정소수점 방식으로 반환, 인수는 소수점 이하 숫자의 개수이다.

  +toPrecistion([precision]) - 유효숫자 수를 지정한다.

  +toString([radix]) - 주어진 진법으로 숫자를 반환한다.

  Number 객체는 2개의 실수를 소수점 2째 자리까지 비교하고 싶은 경우에 사용할 수 있다.

<script>
    var count1, count2;
    count1 = new Number(1.237);
    count2 = 1.238;
    if (count1.toFixed(2) === count2.toFixed(2))
        alert("소수점 2째 자리까지 같습니다.");
</script>

 String 객체

  String 객체도 아주 많이 사용되는 객체이다. String 객체의 속성은 다음과 같다.

  +length - 문자열의 길이다.

  String 객체의 lenght 속성은 간단하지만 많이 사용된다. 만약 웹 사이트에 회원으로 가입할 때 아이디를 6자 이상으로

  해달라고 할 때도 lenght 속성을 이용한다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function checkID() {
                var s = document.getElementById("id").value;
                if (s.length < 6) {
                    alert("아이디는 6글자 이상이여야 합니다.");
                }
            }
        </script>
    </head>
    <body>
        아이디: <input type="text" id = "id" size = 10>
        <button onclick="checkID()">검사</button>
    </body>
</html>

  대소문자 변환

  toUpperCase()와 toLowerCase()를 사용하면 문자열의 글자를 대문자 혹은 소문자로 변환할 수 있다.

var result1 = s.toLowerCase();
var result2 = s.toUpperCase();
document.writeln(result1); // 출력 abcde
document.writeln(result1); // 출력 ABCDE

  문자열 붙이기

  concat() 메서드는 하나의 문자열을 다른 문자열과 합친다. 결과는 새로운 문자열이 된다.

  연산자를 사용해도 동일한 결과를 얻을 수 있다.

var s1 = "문자열1 ";
var s2 = "문자열2 ";

s3 = s1.concat(s2);
document.writeln(s3 + '<br>'); // "문자열1 문자열2"

  문자열 검색

  indexOf() 메서드는 문자열 안에서 주어진 텍스트가 처음 등장하는 위치를 반환한다.

var s = "자바스크립트에 오신 것을 환영합니다.";
var n = s.indexOf("환영");
document.writeln(n + '<br>'); // 15

  문자열 매칭

  match() 메서드는 문자열 안에서 일치하는 콘텐츠를 탐색하는 데 사용된다.

  match() 메서드에서는 ?, *, ^등의 정규식 기호를 사용할 수 있다.

str = "Like father, like son."; 
// like를 찾는다. i와 g는 옵션으로 insensitive, globally를 의미한다.
result = str.match(/like/ig);
document.writeln(result + '<br>');

  문자열 대체

  replace() 메서드는 문자열 안에서 주어진 값을 다른 값으로 대체한다. replace()도 정규식을 사용할 수 있어서 가장 강

  력한 기능 중의 하나이다.

s = "Hong's number is 123-4567.";
result = s.replace("Hong's", "Kim's");
document.writeln(result);

  만약 대소문자에 관계없이 Hong이나 hong을 모두 Kim으로 바꾸고 싶으면 다음과 같이 정규식을 사용한다.

result = s.replace(/Hong's/i, "Kim's"); // H/hong's을 Kim's로 변경

  split(delimiter[, limit])

  split()는 첫 번째 인수를 분리자로 하여서 주어진 문자열을 분리한 수에 각 항복을 가지고 있는 배열을 반환한다.

  split()를 이용해 문자열을 배열로 변환할 수 있다.

s = "One, Two, Three, Four, Five";
array = s.split(',');
for (i = 0; i < array.length; i++) {
    document.writeln(i + '-' + array[i] + '<br>');
}

  HTML 랩퍼 메서드

  HTML 랩퍼 메서드는 문자열을 적절한 HTML 태그로 감싼 후에 반환한다.

  문자열 리터럴과 문자열 객체

  자바스크립트에서 문자열에는 2가지 종류가 있다. 문자열 리터럴과 문자열 객체 바로 그것이다. 문자열 리터럴은 큰 따

  옴표로 생성된다. 문자열 객체는 new를 이용해 생성된다.

  문자열 리터럴과 문자열 객체

  string 객체가 함수로 전달될 때는 값만 전달된다. 즉 함수 안에서 전달받은 문자열을 변경하더라도 원본은 변경되지 

  않는다.

  Math 객체

  Math 객체는 수학적인 작업을 위한 객체이다. Math는 생성자가 아니라 바로 객체이다. 따라서 new를 통하여 객체를

  생성할 필요 없이 바로 이용하면 된다.

Array 객체

  자바스크립트에서는 배열도 객체로 포함된다. 배열을 나타내는 객체는 Array이다. Arrary 객체를 new 연산자로 생성하

  고 배열 요소에 테이터를 넣으면 된다.

var myArray = new Array(); // Array는 배열을 나타내는 객체이다.
myArray[0] = "apple";
myArray[1] = "banana";
myArray[2] = "orange";

  + 배열을 크기가 자동으로 조절된다. 자바스크립트에서 배열의 크기는 현재 배열의 크기보다 큰 인덱스를 사요하면 자

  동으로 증가한다.

  + 하나의 배열에 여러 가지 자료형을 혼합하해서 저장할 수 있다. 하나의 배열에 정수와 문자열을 동시에 저장하는 것

  이 가능하다. 객체 저장도 가능!

  + 만약 배열의 크기보다 큰 인덱스 값으로 배열 요소에 접근하면 오류가 발행하지 않고 undefined 값이 반환된다.

  따라서 프로그래밍 실수가 있더라도 프로그램이 중지되지 않는다.

 Array의 속성과 메서드

  가장 많이 사용되는 속성은 배열의 크기인 lenght이다. 배열 요소를 반복하면서 처리할 때, 사용한다.

  Array 객체도 상당한 양의 메서드를 가지고 있다. 기본적인 자료 구조에 속하는 스택과 큐를 구현하는 메서드도 있다는

  것이다.

concat(value1[value2[value...]])

 concat() 메서드는 전달된 인수를 배열의 끝에 추가 한다. 인수는 배열일 수도 있다.

var x = [1, 2, 3];
var y = [4, 5, 6];
var joined = x.concat(y);

document.writeln(x); // 출력: 1, 2, 3
document.writeln(joined) // 출력: 1, 2, 3, 4, 5, 6

 

 indexOf(searchStr[, startlndex])

  indexOf() 메서드는 요소의 값을 가지고 요소의 인덱스를 찾을 때, 사용한다.

var fruits = ["apple", "banana", "grape"];
document.writeln(fruits.indexOf("banana")); // 출력: 1

 push(value),pop()

  push()는 스택에 데이터를 삽입하는 메서드이다. pop()은 스택에서 데이터를 꺼내는 메서드이다. 스택에 데이터를 넣었

  다가 꺼내면 순서가 반대로 된다.

 shift(), unshift()

  shift() 메서드는 배열의 첫 번째 요소를 반환하고 이 첫 번째 요소를 배열에서 제거한다. unshift()와 함께 사용하면 자

  료 구조 중의 하나인 큐를 구현 할 수 있다.

 sort()

  sort() 메서드는 배열을 알파벳순으로 정렬한다.

var myArray = [10, 7, 23, 99, 169, 19, 11, 1];
myArray.sort() // 알파벳순으로 정렬 [1, 10, 11, 169, 19, 23, 7, 99]
myArray.sort(function(a-b) {return a - b}); // 숫자 순서대로 정렬 [ 1, 7, 10, 11, 19, 23, 99, 169]
document.writeln(myArray);

 Array.slice([begin[, end]])

  slice() 메서드는 배열의 일부를 복사하여 새로운 배열로 반환한다. 시작 인덱스가 없으면 0으로 가정한다. 종료 인텍스

  가 없으면 끝까지 반복한다.

 join(delimeter)

  join() 은 배열의 요소들을 하나의 문자열로 출력한다. 이 기능은 배열을 서버로 보낼때, 아주 유용하다. 이때 분리자가

 각 요소를 분리하게 된다.

var fruits = ["apple", "banana", "peach"];
var s = fruits.join("+");
document.weriteln(s+'<br>'); // 출력 apple+banana+peach

 filter()

  filter() 메서드는 어떤 조건에 부합하는 요소만을 선택하여 새로운 배열로 만들어서 반환한다. 요소를 선택하는 함수를

  작성하여 인수로 전달한다.

var = numbers = [10, 20, 30, 40, 50];
function isBigEnough(element, index, array) {
    return (element >= 30);
}

var filtered = numbers.filter(isBigEnough);
document.werite("필터링 된 배열:" + filtered); // 필터링 된 배열: 30, 40, 50

 2차원 배열

  자바스크립트에서도 2차원 배열이 가능하다.

var x = [0, 1, 2, 3, 4, 5, 6];
var y = [x];
document.writeln(y[0]); // 출력: 0, 1, 2, 3, 4, 5, 6
document.writeln(y[0][2]; // 출력: 2

자바스크립트에서의 오류 처리

  자바스크립트에서는 변수의 자료형을 지정하지 않기 때문에 오류가 발생할 확률도 높이진다. 오류가 발생하면 자동적

  으로 실행이 중단되면서 대화상자가 등장한다. 대화 상자에서 디버그하겠다고 "확인"을 누르면 소스 파일에서 오류가

  발생한 위치를 보여준다. 따라서 이것을 보고 오류를 수정하면 된다.

  자바스크립트에서 오류를 예외라는 이름으로 부른다. 예외가 발행하는 이유는 여러가지가 있다

  + 개발자의 타이핑 오류 때문에 문법적인 오류가 발생할 수 있다.

  + 브라우저마다 지원하는 특징이 다르므로 발생할 수 있다.

  + 사용자로부터 잘못된 입력 때문에 발생할 수 있다.

  + 인터넷 서버 오류 때문에도 발생할 수 있다.

  오류가 발생했을때 프로그램에서 오류를 감지하여 우아하게 프로그램을 종료하거나 오류를 처리한 후에 계속 실행할

  수 있다면 더 나은 프로그램이 될 수 있다. 이것을 자바스크립트에서는 예외 처리라고 한다.

 try-Catch 구조

  자바스크립트에서의 예외 처리기는 try 블록과 catch 블록으로 이루어 진다. try 블록에서는 예외가 발생할 수 있다.

  발생된 예외는 catch블록에서 처리한다.

  예를 들어 고의적으로 try블록에서 alert()를 allert()로 타이핑 오류를 저질렀다. catch블록은 try블록에서의 오류를 잡아

  서 처리한다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            var msg = "";
            function test() {
                try {
                    allert("Hello World!"); // 고의적인 타이핑 오류
                }
                catch (error) {
                    msg = "다음과 같은 오류가 발생하였음:" + error.message;
                    alert(msg);
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="try-catch 시험" onclick="test()">
    </body>
</html>

 throw 문장 

  throw 문장은 개발자가 오류를 생성 할 수 있게 한다. 예외를 발생시키는 것을 예외를 던진다(throw)고 표현한다.

  개발자는 자신이 어떤 기준을 정하고 이 기준에 맞지 않으면 사용자에게 어떤 경고 메세지를 줄 수 있다. 이러한 경우

  에 throw 문장이 try-catch 문장과 함께 사용된다.

  개발자는 다음과 같은 문장으로 예외 객체를 발생시킬 수 있다.

throw "예외 메시지";

  다음 예제를 통해 throw문장과 try-catch 구조를 사용해 보자

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            var solution = 53;
            function test() {
                try {
                    var x = document.getElementById("number").value;
                    if (x == "") throw "입력 없음";
                    if (isNaN(x)) throw "숫자가 아님";
                    if (x > solution) throw "너무 큼";
                    if (x < solution) throw "너무 작음";
                    if (x == solution) throw "성공";
                }
                catch (error) {
                    var y = document.getElementById("message");
                    y.innerHTML = "힌트: " + error;
                }
            }
        </script>
        <h1>Number Guess</h1>
        <p>1부터 100 사이의 숫자를 입력하시오.</p>
        <input id="number" type="text">
        <button type="button" onclick="test()">숫자 추측</button>
        <p id="message"></p>
    </body>
</html>