[생활코딩] JavaScript 문법 - 객체

배열과 객체는 비슷하면서도 다르다. 사실 공부하기전에는 어떤 것에다가 ( ), [ ], { } 를 써줬나 많이 헷갈렸는데 이번에 다시 정리하다보니 잘 알게되었다. 함수가 괄호 ( ) / 배열이 대괄호 [ ] / 객체가 중괄호 { }를 써준다. 밑에서 더 자세하게 객체를 공부해보자.

---

객체(object)

• 객체의 역할은 배열과 비슷하다. 연관돼있는 데이터들을 담아내는 그릇 역할을 한다.
• 객체는 index로 우리가 직접 원하는 데이터를 지정할 수 있다.
• key는 index의 역할을 하며, value는  key에 연결되어 있는 값이다.
• 배열은 [ ]대괄호로 시작해서 대괄호로 끝난다.
• 객체는 { }중괄호로 시작해서 중괄호로 끝난다.
• 객체를 대표하는 변수를 만들고 { }에객체를 담아내야 한다.
• 객체에는 객체를 담을수도 함수를 담을 수도 있다.

객체의 생성 

배열은 원소의 식별자로 숫자를 사용했다. 바로 index(색인). 데이터가 추가되면 배열 전체에서 중복되지 않는 index가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 된다.  이 index를 이용해서 데이터를 가져오게 되는 것이다. 만약 index로 문자를 사용하고 싶다면 객체(object)를 사용해야한다. 다른 언어에서는 연관배열 (associative array), 맵(map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당한다. 

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
// egoing은 key, 110은 value 가 된다


var grades = {}; // 비어있는 객체 { } 활용
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;


var grades = new Object();
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;

//위의 3가지처럼 객체를 다른 방법으로 만들 수 있다.

// 2가지 방법으로 sorialgi 라는 이름(key)으로 저장된 값 가져오기 ↓
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
alert(grades['sorialgi']);

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
alert(grades.sorialgi);

결과 => 80

객체와 반복문의 조우(for in 문)

배열은 저장된 데이터들이 순서를 가지고 있다. 즉, 먼저 들어간 것과 나중에 들어간 것이 기록되어있는 것이다. 그 상태가 내부적으로 유지되고 있기 때문에 데이터를 가져오게 되면 집어넣었던 순서대로 꺼내올 수 있다. 배열에 있어서 추가된 데이터는 순서를 바꾸기에 중요한 정보이다.

 

객체에는 key와 valaue가 있는데 key와 value의 쌍이 객체 안에 저장이 된다. 배열과 달리 그 저장된 순서는 존재하지 않다. 즉, '저장된 값이 순서에 따라 나오지 않을 것이다'를 알아야하고 배열에 있는 값을 가져올 때는 for in 문을 사용한다.

1. grades 라는 변수가 가리키는 { }그릇에 담겨있는 값들을 하나씩 가져온다.
2. for문이 한 번 실행할 때마다 가져와서 변수 name에다가 담는다.
3. 반복문이 실행될 때 변수 name의 값으로 egoing, k8805, sorialgi가 순차적으로 할당된다.
4. grades[name]를 통해서 객체의 값 vaule를 알아낼 수 있다.

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(var name in grades) {
    document.write("key : "+name+" value : "+grades[name]+"<br />");
} // 잘보면 " " + 변수는 그냥 "" 없이 쓰고 + " " + 또 변수는 ""없이 쓰는 것을 이용 + " " 이런식 

결과
key :   egoing value : 10
key :   k8805 value : 6
key :   sorialgi value : 80

HTML과 활용

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(var name in grades) {
    document.write("<li>key : "+name+" value : "+grades[name]+"</li>");
}
결과 ↓

• key :   egoing value : 10
• key :   k8805 value : 6
• key :   sorialgi value : 80

for in 문은 배열에서도 쓸 수 있다

var arr = ['a', 'b', 'c']

for(var name in arr){
	console.log(name);
}

객체 지향 프로그래밍

객체라고 하는 것에 담길  수 있는 값은 무엇인가?

• 객체
• 함수. But 함수를 선언하려면 뒤에 ( )가 딸려온다.

this도 자주 보이던데 이것은 무엇인가?

• JS언어에 내장되어있는 변수로 이 함수가 속해있는 객체를 가리키는 변수이다.
• this.list를 실행하면, 객체 grades가 갖고 있는 list라 하는 key값이 가리키는 객체를 가리킨다.
• 변수 grades는 list라는 데이터와 show라는 함수를 그륩핑한 그릇이라고 할 수 있다.

서로 연관되어있는 값과 연관되어있는 어떤 처리를 하나의 그릇안에 모아서 그륩핑 해놓은 프로그래밍 스타일 기법을 '객체지향 프로그래밍' 이라고 한다. 이것은 자바스크립트를 이용한 '객체 지향 프로그래밍' 기법의 핵심이다. 로직을 객체에 그룹핑하고, 객체라는 부품을 조립해서 소프트웨어라는 완제품을 만들 수 있게 해준다. 

var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show' : function(){
        for(var name in this.list){
            document.write(name+':'+this.list[name]+"<br />");
        }
    }
};
grades.show();

---

JAVASCRIPT 기본 문법 시리즈

[생활코딩] JavaScript 기본문법 정리 (숫자와 문자, 변수, 주석, 줄바꿈과 여백, 비교)

[생활코딩] JavaScript 기본문법 정리 (숫자와 문자, 변수, 주석, 줄바꿈과 여백, 비교)

[생활코딩] JavaScript 문법 - 조건문

[생활코딩] JavaScript 문법 - 조건문

[생활코딩] JavaScript 문법 - 반복문

[생활코딩] JavaScript 문법 - 반복문

[생활코딩] JavaScript 문법 - 배열