06. 객체

with 양지은

객체를 공부하기 앞서

자바스크립트란?

객체를 공부하기 전에 JavaScript 라는 언어의 특징에 대해 살펴보자. 위에 있는 자료를 참고하면 client-side language 라는 말과 Object based programming language 라는 말이 눈에 띈다. 즉 JavaScript는 클라이언트 사이드 언어이면서 동시에 객체를 기반으로 둔 언어라는 것을 알 수 있다..

Client?

Client와 Sever의 관계

쉽게 말해 Client란 웹 브라우저에서 움직이는 것들을 말한다. 즉 JavaScript가 웹 브라우저 언어라는 말과 같은 의미이며 사진과 함께 참고하면 웹 브라우저에서 서버에 request 하기 위해 사용되는 언어라는 의미가 된다.

객체지향언어?

객체지향언어는 class를 기반으로 둔 언어를 일컷는다. 하지만 JavaScript 같은 경우 class가 존재하지 않는다. (es6 이후 class 라는 개념이 생김.) 그렇다고 해서JavaScript가 객체지향언어가 아닌 것은 아니다. function이 class를 대채해 사용하고 있다. JavaScript는 프로토타입 기반의 함수형, 명령어, 객체지향적인 특징을 갖고 있다. 자세한건 다중 패러다임 언어 (multiparadigm programming language) 항목을 참고하자. 링크

객체란?

구글에 Object 검색 시 나오는 사진

파파고 Object 검색 참조

위에 있는 사진을 봐도 알다시피 객체(Object) 는 다수의 개념이라는 것을 알 수 있다. 이것을 JavaScript에 대입하면 여러가지 데이터라는 의미가 되고, 즉 객체(Object) 는 한 가지 이상의 데이터 타입을 갖고 있는 복합형 데이터 타입을 갖고 있는 셈이 된다.

Object의 예시

위의 코드에서 처럼 객체(Object)는 하나 이상의 데이터 타입을 갖고 있다. name이라는 String과 age라는 number 데이터 타입을 동시에 가질 수 있기 때문에 복합형 데이터 타입이다. (*Object와 마찬가지로 Array 역시 복합형 데이터 타입이다.)

그렇다면 위와 같은 객체가 없다고 한다면 어떻게 될까?

yes24 Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편 참조

1

var name = "Do it! 자바스크립트";
var auther = "고경희";
var price = 18800;
var sellPrice = 16920;

2

var Book = {
  name : "",
  author : "",
  price : 18800,
  sellPrice : 16920
}

위에 있는 코드를 보다시피 1의 경우는 원하는 데이터 값을 일일히 변수로 선언해줘서 불필요한 공간을 차지하게 되고, 양이 많아 질 수록 유지보수 (관리) 측면에서도 떨어진다는 단점을 갖고 있다. 하지만 2의 경우 데이터 값을 하나의 변수 안에 여러가지 데이터 타입을 선언해줌으로서 한 눈에 들어옴과 동시에 관리도 편해지고 불필요한 공간 역시 덜 차지한다는 장점을 갖고 있어 여러 데이터 값을 관리할 때는 객체를 사용한다. (배열도 객체와 이런점이 비슷하다. JavaScript의 배열은 다른 언어와 달리 여러가지 데이터 타입을 가질 수 있다.)

실습

그렇다면 한 번 실습을 해보자. 자기 자신을 나타내는 객체를 하나 선언 해라. 단 조건은 데이터 타입이 두 가지 이상이여야 한다는 것이다.

문제

문제 : 자신을 나타내는 객체를 선언해보시오. 
단 조건은 데이터 타입이 두 가지 이상이어야함.

실습

var person = {
    name : "je",
    age : 23,
    like : "salmon",
    havePet : false
}

내가 푼 실습은 총 세 가지 데이터 타입이 쓰였다. (String, Number, Boolean) 반드시 객체에 여러가지 데이터 타입을 넣을 필요는 없지만 우리가 만들어본 실습처럼 객체는 여러가지 데이터 타입들을 하나의 변수에 넣고 관리할 수 있다는 점을 염두해두면 좋을 것 같다.

위와 같이 var person = {} 처럼 {} 안에 데이터 값을 넣는 객체를 객체 리터럴(Object Literal) 이라고 한다. 또한 객체 리터럴에 담긴 값들은 속성 이름 (Property name) 과 속성 (Property) 으로 나뉘는데 이때 name은 속성 "je" 는 속성 값이 된다.

리터럴이란?

쉽게 말해 변수 선언과 동시에 값을 할당하는 것.

var a = 10;
// 변수 a를 선언함과 동시에 10을 할당함.

객체 다루기

객체를 다루기 앞서 속성 접근자(property accessor) 에 대해서 알아야 한다.

var obj = {
    a : "name",
    b : 123
}

console.log(obj.b) // 123

위의 코드 처럼 . (온점) 을 이용해 속성에 접근하는 것을 말한다. obj.b를 하게 되면 123이라는 Number 값이 찍히게 된다.

응용

var a = ["a", 123, "b", 456, false, true];
console.log(a.length); // 6

07. 에서 배울 수 있는 배열 객체도 위와 같은 속성 접근자를 이용해 속성에 접a근 할 수 있다.

var a = new Deta();
console.log(a); // 현재 시간이 뜬다.
a.getDay // 현재 날짜를 012345에 맞춰 가져옴 

변수에 특정한 객체를 넣고 속성 접근자를 이용해 객체에 있는 속성을 사용할 수도 있다.

여기에 있는 값들에 접근할 수 있는 것이다.

객체 다루기 (1)

아래는 값을 넣을 때 (input) 사용하는 방법 들이다.

var user = {
    nickname: "je",
    Level: 27,
    job: "arms"
};
// user 객체를 위주로 사용할 것이다.

First Tab

var user = { }
user.nickname = "happy";
console.log(user) // {nickname : "happy"}

Second Tab

var user = {
    nickname: "happy",
    Level: 27,
    job: "arms"
};

user.address = "seoul";

console.log(user); // {nickname: "happy", 
// Level: 27, job: "arms", address: "seoul"}

Third Tab

var rank = 23451;

var user = {
    nickname: "je",
    Level: 27,
    job: "arms",
    reank;
};

console.log(user); // {nickname: "je", Level: 27, 
// job: "arms", rank: 2142}

아래는 값을 빼낼 때 (output) 사용하는 방법 들이다.

First Tab

var person = {
  name : "je",
  age : 22,
  isStudy : true
};
console.log(person.age) // 22

Second Tab

var user = {
    nickname: "je",
    Level: 27,
    job: "arms",
    laguges: ["en", "ko"]
};

console.log(laguges[0]); // "en"

이렇듯, 속성 접근자를 사용하여 속성을 넣어줄 수도 있고 속성을 가져올 수도 있다.

JavaScript 에서는 이런 식으로 객체를 사용하기도 한다.

var obj = {
    fun: function () {
       return 'Hi';   
     } 
}

obj.fun(); // "Hi"

물론 아래 같은 코드도 가능하다. 대신 return 값을 선언해줘야 값이 출력된다. (05. 함수와 이벤트 참조)

function foo() {
 var b = { 
      a: "a", c:123, d:"b" 
       }; 
 return b;
} 
console.log(b); // {a: "a", c: 123, d: "b"}

즉 JavaScript는 구조화가 자유롭다는 것을 알 수있다. 다른 언어를 공부하다 접하는 경우 Js의 이런 점 때문에 어려울 수 있지만 c언어에서 #include ~~~ 를 해주듯 언어의 특징이라고 생각하고 공부하면 될 것 같다.

객체의 종류

JavaScript 객체는 크게 다섯 가지 종류로 나뉜다.

• window (최상위 객체)

• 브라우저 객체 모델

• 기본 내장 객체 모델

• 문서 객체 모델

• 사용자 정의 객체

window 객체

about:blank 에 가서 직접 개발자도구에서 window를 검색해보자.

엄~청나게 많은 값들이 뜨는 걸 볼 수 있다.

window 객체는 우리가 자주 사용하는 (var 변수나 function 같은 함수 들도 포함하는 최상위 객체 들이다. 변수나 함수를 선언해주고 window.식별자명과 같은 식으로 console.log에 검색했을 때 값이 아래와 같이 뜨는 것을 볼 수 있다.

즉 window는 최상위 객체다!

단, let과 const는 window.식별자명 하면 뜨지 않으니 참조 바란다.

let과 const는 var과 다르다.

이와 관련해선 나중에 내용을 추가 할 예정이다.

기본 내장 객체 모델

Js의 브라우저 객체 모델 종류

브라우저 객체 모델이란 쉽게 말해서 JavaScript에 내장되어 있는 객체들을 말한다. 대표적으로 Array가 있고 NaN (not number) String 등도 내장 객체다.

브라우저 내장 객체 모델

브라우저 내장 객체를 쉽게 정리한 사진

브라우저 내장 객체를 쉽게 정리한 사진2

브라우저 내장 객체 모델이란 쉽게 말해 브라우저에 계층적으로 내장되어 있는 객체들이다. 자세한 부분은 BOM에 대한 부분을 참조하자.

브라우저 객체 모델

HTML을 조작하기 위한 객체를 일컷는다. getElementByTagName() 과 같은 식으로 생겼다. 자세한 부분은 DOM에 대한 부분을 참조하자.

사용자 정의 객체

사용자 정의 객체는 우리가 계속해서 보고 만들었던 var obj = { 블라블라 } 형태의 리터럴 객체들을 일컷는다.

프로토타입과 인스턴스

프로토타입과 인스턴스의 예시

객체를 공부하다보면 프로토타입(prototype)과 인스턴스(instance)라는 용어를 보게 될 것이다. 처음 보면 헷갈릴 수 있지만, 프로토타입(prototype)의 기능을 인스턴스(instance)가 갖고 있는 것이다.

쉽게 말해 프로토타입(prototype)이 가장 큰 파일이고 인스턴스(instance) 가 작은 파일이라고 생각하면 된다.

var a = new Date();
console.log(a); // 1
console.log(Date()); // 2
// 1과 2의 값은 같은 값을 출력한다.