javascript 객체 기본(생활코딩)

● 배열/객체에서의 반복문

var memberObject = {
    // 원소의 이름 : 원소 값
    manager: 'egoing',
    developer: 'graphittie',
    designer: 'leezche'
}
//객체 값에 접근
//1
console.log('memberObject.designer', memberObject.designer);
//2
console.log("memberObject.['designer']", memberObject['designer']);
//삭제
delete memberObject.manager
console.log('after delete memberObject.manager', memberObject.manager);//undefined 출력됨

var memberArray = ['egoing','graphittie','leezche'];
console.group('array loop');
var i = 0;
while(i<memberArray.length){
    console.log(i, memberArray[i]);
    i = i + 1;
}
console.groupEnd('array loop');

console.group('object loop');
var memberObject = {
    manager: 'egoing',
    developer:'grphittie',
    designer: 'leezche'
}

for(var name in memberObject ){ // (현재 원소의 이름이 들어갈 변수) in (객체)
    //객체에 있는 원소의 개수만큼 중괄호가 실행됩니다. 
    console.log(name);
}
console.groupEnd('object loop');
console.group('object loop');
var memberObject = {
    manager: 'egoing',
    developer:'grphittie',
    designer: 'leezche'
}

for(var name in memberObject ){ // (현재 원소의 이름이 들어갈 변수) in (객체)
    //객체에 있는 원소의 개수만큼 중괄호가 실행됩니다. 
    console.log(name, memberObject[name]);
}
console.groupEnd('object loop');

실행결과

array loop
  0 egoing
  1 graphittie
  2 leezche
object loop
  manager
  developer
  designer
object loop
  manager egoing
  developer grphittie
  designer leezche

● 객체 사용 이유

• 날짜와 관련된 기능, 수학과 관련된 기능 등을 잘 정돈하기 위해서 객체를 이용
• 예를 들어 Math라는 객체에는 수학과 관련된 여러 함수들이 그룹화되어 있음

console.log("Math.PI", Math.PI); // 파이 값을 출력합니다.
console.log("Math.random()", Math.random()); // 랜덤 값을 출력합니다.
console.log("Math.floor(3.9)", Math.floor(3.9)); // 값을 반올림합니다.

● 'this'

어떤 메소드에서 그 메소드가 속해 있는 객체를 가리키는 특수한 키워드

var kim = {
    name: 'kim',
    first: 10, //첫번째 게임 점수
    second: 20,  // 두번째 게임 점수 
    sum:function(){ // 게임 접수 합계 함수
        return this.first+this.second;
    }
}

console.log("kim.sum()",kim.sum());

● 객체 생성 함수

• 그냥 함수를 호출할 경우 일반 함수 취급되지만 new 라는 키워드를 붙일 경우 객체를 생성하는 생성자가 됨

function Person(){
    this.name = 'kim';
    this.first = 10;
    this.second = 20;
    this.third = 30;
    this.sum = function(){ 
        return this.first+this.second+this.third;
    }
}

console.log('Person()', Person());  // undefined
console.log('new Person()', new Person()); // 객체 생성

function Person(name,first,second,third){
    this.name = name;
    this.first = first;
    this.second = second;
    this.third = third;
    this.sum = function(){ 
        return this.first+this.second+this.third;
    }
}

//객체를 찍어내는 constructor 함수 만들기
var kim = new Person('kim',10,20,30);
var lee = new Person('lee',10,10,10);

● prototype

• prototype을 이용해 객체의 재사용성을 높일 수 있음
• 객체의 속성들 (변수들)은 생성자 함수 안에 넣고 객체의 메소드들은 생성자의 prototype에 추가하는 것이 일반적

function Person(name,first,second,third){
    this.name = name;
    this.first = first;
    this.second = second;
    this.third = third;
    
}
//만약 sum의 내용이 수정된다해도 한번만 수정하면 됨
Person.prototype.sum = function(){ 
    return this.first+this.second+this.third;
}

var kim = new Person('kim',10,20,30);
var lee = new Person('lee',10,10,10);
console.log("kim.sum()",kim.sum());
console.log("lee.sum()",lee.sum());

만약 하나의 객체에서만 sum이라는 함수를 다르게 동작시키고 싶다면?

function Person(name,first,second,third){
    this.name = name;
    this.first = first;
    this.second = second;
    this.third = third;
    
}
Person.prototype.sum = function(){ 
    return 'prototype : ' + (this.first+this.second+this.third);
}

var kim = new Person('kim',10,20,30);

kim.sum = function(){
    return 'this : ' + (this.first+this.second+this.third);
}
var lee = new Person('lee',10,10,10);

//kim과 lee에서 각각 sum을 호출한 결과가 다르게 나옴
console.log("kim.sum()",kim.sum());
console.log("lee.sum()",lee.sum());

● class

     ○ constructor 함수

        객체의 초기 값을 지정하기 위해서 객체가 생성될 때 실행되기로 약속된 함수

        -> constructor를 이용해 객체의 초기 값을 설정

class Person{
    constructor(name,first,second){ // 약속된 이름으로 바꾸면 안됩니다.
        this.name = name;
        this.first = first;
        this.second = second;
        console.log('constructor');
    }
}
var kim = new Person('kim',10,20);
console.log('kim',kim);

     ○ 메소드 만들기

//프로토타입 이용하기
class Person{
    constructor(name,first,second){ // 약속된 이름으로 바꾸면 안됩니다.
        this.name = name;
        this.first = first;
        this.second = second;
        console.log('constructor');
    }
}
Person.prototype.sum = function(){ 
    return 'prototype : ' + (this.first+this.second+this.third);
}

//클래스 내부에 정의하기
class Person{
    constructor(name,first,second){ // 약속된 이름으로 바꾸면 안됩니다.
        this.name = name;
        this.first = first;
        this.second = second;
        console.log('constructor');
    }
    sum(){ 
        return 'prototype : ' + (this.first+this.second);
    }
}