[Web_JavaScript] 07

● 객체

- 객체의 고유한 속성을 프로퍼티(property)라고 부르며, 여러 프로퍼티와 값의 쌍으로 표현된다.

- 객체가 호출하는 함수는 메소드라고 부른다.

 

 

 

● 객체 사용 방법

account.프로퍼티명

account['프로퍼티명']

 

(ex)

account = {name: '한동석', number: '110-11-11111', code: '1234'};

console.log(account.name);

 

(ex)

account = {deposit: function(){...}};

account.deposit();

 

 

 

● 프로토타입

- new 뒤에 나오는 생성자를 자바스크립트에서는 프로토타입이라고 부른다.

- 프로토타입은 함수로 선언하여 사용한다.

 

 

 

● JSON

- JSON.parse(): JSON을 JS Object로 변경할 때 사용

- JSON.stringify(): JS Object를 JSON으로 변경할 때 사용

 

 

---

 

실습(객체(1))

1. 처음에 들어갈 값을 알 때 사용

let account = {
    owner: "홍길동",
    code: "1234",
    balance: 15000,
    deposit: function(money){this.balance += money;},  // 입금
    withdraw: function(money){this.balance -= money;},  // 출금
    showBalance: function(){return this.balance}  // 현재잔액
};

with(console){
    log(account);
    log(account.owner); 
    log(account['owner']);
    log(account['balance']);

    account.deposit(50000);
    log(account.showBalance());
    
    account.withdraw(20000);
    log(account.balance);
}

 

결과

 

 

 

2. 당장 넣을 값에 대해 알 수 없을 때 사용

let account = new Object();
account.owner = "홍길동";
account.code = "1234";
account.balance = 15000;
account.deposit = deposit;
account.withdraw = withdraw;

function deposit(money){
    this.balance += money;
}

function withdraw(money){
    this.balance -= money;
    return money;
}
 
account.deposit(50000);
console.log(account['balance']);
console.log(account.withdraw(30000) + "원 출금 후 잔액 : " + account.balance + "원");

 

결과

 

 

 

 

실습(객체(2))

1. 문제

// 기차에 등급별 좌석 구현
// 3명의 고객이 있으며, 각 고객별 정보는 다음과 같다.

// [1]
// 이름: 홍길동
// 나이: 20
// 등급: 1

// [2]
// 이름: 이순신
// 나이: 40
// 등급: 2

// [3]
// 이름: 장보고
// 나이: 19
// 등급: 3

// 3명은 기차 한 대에 모두 탑승한다.
// 기차 객체를 만들고 각 손님들을 프로퍼티로 선언한다.

 

 

 

2. 코드

// [1]
hong = {name: '홍길동', age: 20, level: 1};

// [2]
lee = {name: '이순신', age: 40, level: 2};

// [3]
jang = {name: '장보고', age: 19, level: 3};

// 기차 객체를 만들고 각 손님들을 프로퍼티로 선언한다.
train = new Object();

// Key가 passenger1이고 Value가 hong인 프로퍼티 생성
train.passenger1 = hong;
train.passenger2 = lee;
train.passenger3 = jang;

console.log(train);

 

결과

 

 

 

 

 

실습(객체(3))

function User(id, pw, name, age){
    this.id = id;
    this.pw = pw;
    this.name = name;
    this.age = age || 1;
    this.intro = function(){
        with(console){
            log(this.id);
             log(this.pw);
            log(this.name);
            log(this.age);
        } 
    }
}

kim = new User("kim1234", "1234", "김철수", 20);
hong = new User("hong1234", "3434", "홍길동");

console.log(kim);
kim.intro();

kim.intro = intro;
kim.intro();

function intro() {
    console.log("자기소개");
}

 

결과

 

 

 

 

실습(JSON(1))

user = {name: '홍길동', age: 20};

// js object는 json으로 판단되지 않기 때문에 오류 발생
// JSON.parse(user); 

userJSON = JSON.stringify(user);
console.log(typeof userJSON);  // JSON : string
console.log(typeof user);  // JS Object : object

// JSON을 JSObject로 바꾸었기 때문에 프로퍼티 접근 가능
console.log(JSON.parse(userJSON).name); 

// JSON은 프로퍼티 접근 불가능
console.log(userJSON.name);

 

결과

 

 

 

 

실습(JSON(2))

1. 문제

// 상품명과 가격을 JSON으로 만든다.
// JSON을 Object 객체로 변환한다.
// 각각의 프로퍼티를 출력한다.
// JSON으로 변환한 뒤 출력한다.

 

 

 

2. 코드

let productJSON = '{"name": "마우스", "price": 18000}';
let product = JSON.parse(productJSON);
console.log(product.name);
console.log(product.price + "원");

productJSON = JSON.stringify(product);
console.log(productJSON);

 

결과

 

 

 

 

실습(JSON(3))

1. 문제

// 비행기에 승객이 2명이 있다.

// 1번, 2번 승객
// 이름, 나이, 성별

// js object에 담고 JSON으로 변환하기
// JSON으로 변환한 다음 타입 확인
// JSON을 js object로 변환한 뒤 이름과 나이, 성별 출력
// 이 때 이름, 나이, 성별 출력은 메소드로 선언한다.

 

 

 

2. 코드

function Passenger(name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;

    this.intro = function(){  // 이름, 나이, 성별 출력을 메소드로 선언
        with(console){
            log(this.name);
            log(this.age);
            log(this.gender);
        }
    }  
}

let passenger1 = new Passenger("김철수", 20, "남자");
let passenger2 = new Passenger("김영희", 21, "여자");
let plane = new Object();

plane.passenger1 = passenger1; 
plane.passenger2 = passenger2;

console.log(plane);
plane.passenger1.intro();
plane.passenger2.intro();

// js object 프로퍼티 중에서 메소드는 JSON으로 변환 시 없어진다.
// 이는, JSON의 목적이 데이터 전달이므로, 데이터가 아니라고 판단되면 없앤 뒤 변환된다.
let planeJSON = JSON.stringify(plane);
console.log(planeJSON);
console.log(typeof planeJSON);

plane = JSON.parse(planeJSON);

// 메소드는 JSON으로 변환했을 때 없어졌으므로 출력되지 않는다.
console.log(plane);

 

결과