[자바스크립트] 객체

[객체란]

- 데이터와 데이터와 관련된 동작(기능)을 모두 포함할 수 있는 개념적 존재

- 데이터 : 이름과 값을 가지는 속성(property)

- 동작 : 일련의 관련된 동작을 정의한 함수(function)

- 이름과 값의 쌍인 속성들을 포함하는 컨테이너 : 여러 데이터(속성)을 가지고, 함수를 가짐

- 자바스크립트는 대부분이 객체 기반, 기본 자료형(primitive type) 데이터를 제외하고 객체로 이뤄짐

[객체 생성방법]

- 들어가기 전에, 자바스크립트는 프로토타입 기반 객체지향언어임. 클래스 기반(c-family)에 익숙하다면 헷갈리기 일 쑤....

  그래서 ECMAScript6부터 클래스를 지원...! 하지만 클래스도 결국 함수, 프로토타입 패턴에 클래스 문법을 입혀놓은....

  아직 배워 보지는 않았지만 그렇다고 함. 우선 프로토타입부터 이해해보도록 하자(자바스크립트 소개 포스팅에서 설명해놨음)

  "프로토타입(함수) 기반의 객체지향언어이다" 라는 것만 기억해두자

1) 객체리터럴 : 가장 일반적인 방법, 쉬운 생성방법

- 객체명 = { }, 중괄호( { ....} ) 내에 객체가 가지는 속성(데이터), 값, 동작을 정의함 

- 중괄호 내 아무것도 정의하지 않으면 빈 객체(Object)가 생성됨

- 속성의 값으로 undefined를 제외하고 모두 가질 수 있음(null 포함)

- 속성을 정의할 때에는 속성명: 속성값 으로 하면 됨, 여러 개일 경우 쉼표(,)로 구분(동작도 마찬가지)

- 동작을 정의할 때에는 함수명: function() { } 으로 하면 됨, 동작은 중괄호( { ... } )내에 기술

var emptyObject = {};
 
var person = {
    nose: 1,
    eye: 2,
 
    walk: function(){
        console.log("walking...!");
    }
}
 
console.log(person); //Object { nose: 1, eye:2 }
console.log(person.walk()); // walking...!

2) Object() 생성자함수 : new 연산자와 Object() 함수를 통해 빈 객체를 생성하고, 속성과 동작을 추가할 수 있음

- 객체리터럴 방식은 Object() 생성자함수 방식의 shorthand임

var person = new Object();
person.nose = 1;
person.eye = 2;
person.walk = function(){
    console.log("walking...!");
}
 
person.walk();

3) 생성자함수

- 1, 2번 항목은 속성에 대한 속성값을 초기 고정적으로 주기 때문에 인스턴스 생성시 고쳐야하는 단점이 있음

- 생성자함수는 속성에 대한 속성값을 함수 파라미터로 받아 속성에 대입하는 형태로 동작함

- 생성자함수의 첫글자는 대문자로 지정함(일반 함수와 차이를 내기위해)

- 일반함수도 생성자함수처럼 new를 통해 생성이되므로..... 대문자로 생성자함수임을 구분함

- 속성과 함수에 this를 붙임으로서 인스턴스마다 자신 데이터임을 표시함(같은 생성자함수로 여러 인스턴스를 생성할 때 인스턴스 데이터 구분을 위해)

- 생성자함수 내에 정의된 속성, 함수는 인스턴스에 의해 참조해야함(function-level-scope)

function Person(name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
 
    this.info = function() {
        console.log(this.name +"님의 나이 : " + this.age + ", 성별 : " + this.gender);
    }
}
 
var park = new Person("박진형", 26, "남자");
console.log(park.info()); //박진형님의 나이 : 26, 성별 : 남자
 
var user = new Peson("유저", 1, "모름");
console.log(user.info()); //유저님의 나이 : 1, 성별 : 모름
 

[객체 속성]

1) 속성명 : 일반 문자(""가 아님, 문자열 X), 문자열(빈 문자열 포함), 숫자 가능

2) 속성값 : undefined를 제외한 모든 데이터 가능

3) 속성 조회하기 

var person = {
    "first-name": "jinhyung",
    "last-name": "park",
    age: 26
}
 
console.log(person["first-name"]); // "jinhyung"
console.log(person.age); // 26
 
console.log(person[first-name]); 
//undefined : 정의되지않은, 값이 할당되지않은 속성을 조회하면 다음과 같이 결과가 나옴

4) 속성값 할당

- 동적할당 : 객체 생성 시에 속성 - 속성값을 할당하지않고 객체.속성 = 속성값; 으로 코드 블럭 ( { ... } )외에서 정의하는 것

- 데이터 수정 : 필요 시에 객체.속성 = 속성값; 으로 속성의 값을 수정하여 사용하는 것

- 데이터 삭제 : delete 객체.속성명 으로 해당 속성 삭제할 수 있음, 객체 자체 삭제는 안됨

- 데이터 조회 : for( in )문, 빈 변수을 사용하여 객체 속성을 모두 한번에 조회(반복문)할 수 있음, 객체[변수명]을 이용해 조회가능

var person = {
    "first-name": "jinhyung",
    "last-name": "park",
    age: 26
}
console.log(person["first-name"]); // "jinhyung"
person["first-name"] = "jinbro";
console.log(person["first-name"]); // 데이터 수정 : "jinbro"
console.log(person.gender); //undefined
person.gender = "남자";
console.log(person.gender); //남자
 
delete person.gender;
console.log(person.gender); //undefined
 
delete person; //false, 삭제실패
console.log(person);//object { "first-name": "jinbro", "last-name": "park", age: 26 } 
 
var attr;
for(attr in person){
    console.log(attr + ": " + person[attr]);
}

[알아둬야할점]

1) 객체(object)형은 값을 그대로 저장하는 것이 아니라, 메모리에 값을 저장하고 메모리 주소를 저장함

- object형이란 primitive type을 제외한 자료형, 객체(object) 자료형

- 같은 속성, 값을 가지고 있더라도 객체 1개당 각각의 메모리 주소를 가지고 있기때문에 다름(빈 객체도 마찬가지)

- 기본 자료형(primitive type)은 변수에 값을 직접 저장하기때문에 값이 같으면 같음(메모리에 할당되는 것은 마찬가지이나 값을 저장함)

var person = {
    name: "jinhyung",
    age: 26
}
 
var clone = person;
/* 메모리주소 복사(객체속성값의 주소) */
 
clone.name = "박진형"
 
console.log(person.name); 
/* 
박진형, 메모리 주소에 연결된 값이 변경되었기떄문에,
한 쪽의 값을 변경하더라도 
같은 메모리 주소값으로 참조하는 두 객체의 속성값이 변경된 것처럼 보임
*/                                              Colored by Color Scripter

- object 타입을 제외한 데이터 타입은 값이 한번 정해지면 변경이 불가능함, 같은 메모리 영역 내에서 변경이 불가능하다는 것

=> object type : array, math 등 object를 최상위로 둔 object형(모르겠으면 typeof로)

=> primitive type : http://jinbroing.tistory.com/49 참고

=> 값을 재할당하거나(새로운 메모리 주소 할당) 새로운 변수에 할당하면 됨

var str = "안녕하세요."
 
str[0] = "못안"
 
console.log(str) // "안녕하세요"
 
var modify = str.slice(0, 2)
console.log(modify) //안녕하
 
str = "Hi"
console.log(str) // "Hi"