2020-02-05 JavaScript-객체

생활코딩 JavaScript의 강의를 듣고 나름대로 정리한 내용이다.

https://opentutorials.org/course/743/6491

객체 - 생활코딩

//객체 1강 객체의 문법
객체 : 연관된 데이터를 담는 데이터 자료형이라는 점에서는 배열과 유사하다.
하지만, 객체의 경우 인덱스로 문자를 사용할 수 있다.
배열의 경우는 인덱스가 자동으로 만들어진다.(인덱스가 0부터 시작한다.)

객체의 생성
다음은 객체를 만드는 법이다.
let grades = {'ron' : 100, 'tom' : 80, 'susan' : 50};

혹은

let grades = { }; // 먼저 비어 있는 객체를 만들어준다.
grades['ron'] = 100;
grades['tom'] = 80;
grades['susan'] = 50;

혹은

let grades = new Object( ); // new Object( ) === { }
grades['ron'] = 100;
grades['tom'] = 80;
grades['susan'] = 50;
// index의 역할을 하는 것 : key, 이에 따른 값 : value
// 여기서 ron, tom, susan은 key이고 100, 80, 50은 value이다.

객체의 성분(element) 가져오기
let grades = {'ron' : 100, 'tom' : 80, 'susan' : 50};

grades.ron; // 100
grades['ron']; // 100
grades.tom; // 80
grades['tom']; // 80
grades.susan; // 50
grades['susan']; // 50

//객체 2강 객체와 반복문의 조우
배열은 저장된 데이터들이 순서를 가지고 있다. 따라서 for문을 통해 데이터를 순서대로 꺼내올 수 있다.
하지만 객체 안에 저장된 데이터들은 순서가 없다. 단지 key : value의 쌍으로 이루어져 있을 뿐이다.

let grades = {'ron' : 100, 'tom' : 80, 'susan' : 50};
for(key in grades) { // 반복문이 실행될 때마다 grades라는 변수 안에 담겨 있는 값들을 하나씩 가져오는데, key값만을 key라는 변수에 담는다.
    console.log(key); // ron, tom, susan
    console.log(grades[key]); // 100, 80, 50
}   

html 상에서

  
    
    
    
    

      

 

 

 

 

    

  
// 화면 상에 li태그로 감싼 채 key : ~ value : ~ 형태로 출력된다.

for in문을 배열에서도 사용할 수 있다.
let array = ['2', '4', '6', '8'];
for(let name in array) {
  console.log(name); // 결과 : 0, 1, 2, 3 <= 배열의 index는 0부터 차례대로 자동으로 지정되어 있다.
  console.log(array[name]); // 결과 : 2, 4, 6, 8
}

//객체 3강 객체지향 프로그래밍
let grades = {
    'list' : {'ron' : 100, 'tom' : 80, 'susan' : 50},
    'show' : function( ) {
        alert('Hello world');
    }
} // 객체 안에는 배열이든 함수든 다 저장할 수 있다.
grades['show']( ); // 'Hello world'가 출력된 alert 창이 뜬다.
grades['list']['ron']; // 100
grades['list']['tom']; // 80
grades['list']['susan']; // 50

this => 자바스크립트에서 약속되어져 있는 변수

let grades = {
    'list' : {'ron' : 100, 'tom' : 80, 'susan' : 50},
    'show' : function( ) {
        for(var name in this.list) {
            console.log(name, this.list[name]);
            // 여기서 this는 함수가 소속되어 있는 객체를 가리킨다.
            // 여기서 this.list == grades.list
        }
     }
}
grades.show( ); // grades 객체에 소속되어 있는 함수를 호출한다.
grades 객체는 list 데이터와 show라는 함수를 grouping한 그릇이다.
list와 show는 서로 관련성이 있어야 한다.
서로 관련성이 있는 것끼리 grouping할 수 있다.
이와 같은 것을 객체 지향 프로그래밍이라고 한다.