JavaScript 개발자 수업 61일차(2) - Object, BOM

1. Object

2. BOM

---

1. Object

[ JavaScript 전체 구성 ]

  1) Core (ECMScript, 언어 기본)

  2) BOM (브라우저 조작)

  3) DOM (브라우저 조작)

 

[ JavaScript Object(객체) ]

  1) 내장 객체: Array, Date, Math, RegExp 등...

  2) BOM 객체: window, document, loaction, form 등...

  3) DOM 객체: element, attribute, text 등...

  4) 사용자 정의 객체: 개발자가 직접 정의한 객체

 

[ 사용자 정의 객체 만들기 ]

  1) Object 생성자 함수 사용 하기

- 객체 프로퍼티(Property) 추가는 객체에 마음대로 지정해서 추가를 한다.

- 즉, 객체에 자바처럼 프로퍼티를 선언하지 않아도 되며, 실제로 아무것도 없어도 직접 필요한것만 그때그때마다 마음대로 지정해서 값을 넣으면 된다.

- 방법은 간단하지만, 단점은 존재한다. 만약 아래 예제의 조건과 똑같은 조건으로 하나의 객체를 만들때 오타가 발생하더라도 추가되므로, 객체의 틀(규칙)이 없기 때문에 아무렇게나 만들게되면 문제가 발생한다.

var im1 = new Object();

im1.name = '홍길동';
im1.age = 20;
im1.address = '서울시';

console.log(im1.name);    // 홍길동
console.log(im1.age);     // 20
console.log(im1.address); // 서울시
console.log(im1);         // { name: '홍길동', age: 20, address: '서울시' }


var im2 = new Object();

im2.na = '아무개';
im2.a =20;
im2.address = '서울시';

console.log(im2)          // { na: '아무개', a: 20, address: '서울시' }

 

  2) 객체 리터럴 표기법 {} 사용 하기

var im = {}; //new Object()

im = { 
    name: '홍길동', 
    age: 20, 
    address: '서울시'
};

console.log(im) // { name: '홍길동', age: 20, address: '서울시' }

 

[ 프로퍼티 접근 방법 ]

  1) 멤버 접근 연산자: '.'을 붙인뒤 접근 멤버명을 입력한다.

  2) key 접근 연산자: '[ ]'안에 key를 입력한다. 

var im = new Object();

im = { 
    name: '홍길동', 
    age: 20, 
    address: '서울시'
};


// 1. 멤버 접근
console.log(im.name);    // 홍길동

// 2. key 접근
console.log(im['name']); // 홍길동


var prop = 'name';
console.log(hong[prop]); // 홍길동

im['phone-number'] = '010';
console.log(im);         // { name: '홍길동', age: 20, address: '서울시', 'phone-number': '010' }

 

[ 프로퍼티 삭제하기 ] 

- delete

var im = new Object();

im = { 
    name: '홍길동', 
    age: 20, 
    address: '서울시'
};

delete im.age;
console.log(im); { name: '홍길동', address: '서울시' }

 

[ 프로퍼티 탐색하기 ]

- 해당 객체가 어떤 프로퍼티를 가지고 있는지 순차적으로 탐색한다.

- for in

var im = new Object();

im = { 
    name: '홍길동', 
    age: 20, 
    address: '서울시'
};

for (var prop in im) {
    console.log(prop, im[prop]);
}

--> name 홍길동
    age 20
    address 서울시

 

[ 객체의 멤버 구성 ] 

  1) 변수

  2) 메소드( function, 함수)

var im = new Object();

/* ---- 예제 1 ---- */
im.name = '홍길동'
im.age = 20

im.hello = function() {
    console.log('hello');
};

console.log(im); // { name: '홍길동', age: 20, hello: [Function (anonymous)] }
im.hello();      // hello


/* ---- 예제 2 ---- */
im.info = function() {
    console.log('저는 %s입니다. 나이는 %d세입니다.', this.name, this.age);
};
im.info();       // 저는 홍길동입니다. 나이는 20세입니다.


/* ---- 예제 3 ---- */
im = {
    name: '아무개',
    age: 27,
    address: {
        si: '서울시',
        gu: '강남구',
        dong: '역삼동',
        bunji: '20번지'
    },
    info: function() {
        console.log(this.name, this.age);
    }
};

console.log(im.name);     // 아무개
console.log(im.age);      // 27
console.log(im.address);  // { si: '서울시', gu: '강남구', dong: '역삼동', bunji: '20번지' }
im.info();                // 아무개 27
 
console.log(im.address.dong);       // 역삼동
console.log(im.address['dong']);    // 역삼동
console.log(im['address']['dong']); // 역삼동

 

[ 자바스크립트의 변수 ]

  1) 지역 변수, Local Veriable

  - 함수만 인식한다. (제어문은 인식하지 못한다.)

  - 즉, 함수 내부 안에서는 지역 변수 개념이 없다. (자바와 다르니 헷갈리지 말것.)

  2) 전역 변수, Global Veriable

  - 어디에도 소속되지 않은 변수

  - 적용 범위: 현재 파일 전체

var num1 = 10;

function local() {
    //함수 내부 안에서의 변수는 지역 변수이다.
    var num2 = 20;
    console.log(num2);
    
    if (true) {
        var num3 = 30;
        console.log(num3);
    }
    console.log(num3); // 제어문 밖에 num3 변수 선언
}

local();

--> 20
    30
    30

 

[ 호이스팅, Hoisting ]

- 자바스크립트 엔진이 구문(문장)을 실행하기 전에 소스상의 모든 변수 선언문과 함수 선언문을 소스의 최상단으로 이동시킨다.( 끌어올린다. )

- 함수 호이스팅

- 변수 호이스팅 ( 의미가 없기때문에, 사용을 안한다. )

console.log(dog);
cat();

var dog = '강아지';

function cat() {
    console.log('고양이');
};

--> undefined
    고양이

 

[ 지역 함수, Local Function ]

- 함수 안에 또 다른 함수 선언

- 함수 안에 또 다른 함수는 해당 함수 안에서만 호출이 가능하다.

- 쓰는이유는 네임 충돌 방지 및 자원 관리가 편하다.

function f1() {
    console.log('f1의 함수입니다.');
    
    function f2() {
        console.log('f2의 함수입니다.');
    }
    f2();
    console.log('f1의 함수입니다.');
}

f1();

--> f1의 함수입니다.
    f2의 함수입니다.
    f1의 함수입니다.

 

[ 익명 함수, 즉시 실행 함수 ]

- 폐쇄적인 환경을 만들기 위해서 사용된다.

- 네임 충돌 발생 방지 및 자원 관리가 편하다.

(function () {

    var num = 100;

    function test() {
        console.log('test');
    }

    test();
    console.log(num);
})();

--> test
    100

 

[ 생성자 함수 ]

- 자바스크립트는 클래스가 없기 때문에 생성자 함수가 존재한다.

- 이름이 파스칼 표기법(대문자 시작) 이며, 'this'가 의미 하는것은 나중에 생성될 객체라는 뜻이다.

- 생성자 함수는 단독 호출이 불가하다. 반드시 new 연산자와 함께 사용한다.

- 모든 객체는 object 자료형 이기 때문에 객체를 구분할 땐 'typeof'로는 확인을 못한다. 따라서 어떤 생성자인지 확인이 가능한 'constructor'로 확인한다.

 

[ 생성자 함수 예제 1 - 기본 ] 

// 생성자 함수 생성
function User() {
    this.name = '홍길동';
    this.age = 20;
    this.hello = function() {
        console.log(this.name, this.age);
    };
};

// 생성자 함수 호출
var user = new User();

user.hello();                  // 홍길동 20
console.log(user);             // User { name: '홍길동', age: 20, hello: [Function (anonymous)] }
console.log(typeof user);      // object
console.log(user.constructor); // [Function: User]

 

[ 생성자 함수 예제 2  - 매개변수 ] 

function Member(name, age) {
    this.name = name;
    this.age = age;
}

var m1 = new Member('홍길동', 20);
var m2 = new Member('아무개', 22);
var m3 = new Member('하하하', 27

console.log(m1);               // Member { name: '홍길동', age: 20 }
console.log(typeof m1);        // object
console.log(m1.constructor);   // [Function: Member]

 

2. BOM

[ 정의 ]

- Browser Object Model

- HTML 문서의 내용을 읽은 뒤, 트리구조로 만들어 놓은 모델이다.

- 정적 구조: HTML 코드에 상관없이 구조가 고정이다.

- BOM 트리에 존재하는 태그는 매핑되는데, 트리에 없는 태그는 조작이 불가능하다.

- 태그를 접근할 때 접근 가능 태그 or 접근 불가능 태그로 구분한다.

- 태그 접근 시 사용하는 식별자는 'name'을 사용한다.  

- 접근 가능 태그는 밑에 BOX 트리를 참조한다.

BOM 트리

 

[ 태그 접근 예제 ]

- JavaScript로 찾은 태그의 참조 객체는 여러 프로퍼티를 제공하는데, 상당수는 html 태그가 가지던 속성의 이름과 동일하게 제공된다. (해당 속성을 조작 가능한 프로퍼티로 제공된다. )

See the Pen BOM 예제 by yhyuk (@yhyuk) on CodePen.

 

 

---

MEMO>
# '프로퍼티(Property)', '객체(Object)' 두 키워드의 의미가 자꾸 헷갈리는데 정확히 알아 두자.

# 자바스크립트는 향상된 for문 안에 익명 함수가 들어있는 형태가 많다. 빨리 적응하자.

# 배운것들을 하루하루 그날 그날 정리하는데 처음으로 밀리기 시작했다. 정리를 어떻게 해야 할지 몰라서 그런거 같다. 수업 때 더 집중해서 들어야겠다.