JavaScript

객체

객체(Object)

지금까지 살펴본 배열은 아이템에 대한 식별자로 숫자를 사용했다. 데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 된다. 이 인덱스를 이용해서 데이터를 가져오게 되는 것이다. 만약 인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용해야 한다. 다른 언어에서는 연관배열(associative array) 또는 맵( map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당한다.

객체의 생성

다음은 객체를 만드는 법이다.

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};

위의 예제에서 egoing은 key가 되고, 10은 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;

객체를 만들었으니 이제는 객체에서 필요한 값을 가져와보자. 다음은 sorialgi라는 이름(key)으로 저장된 값을 가져오는 법이다. 결과는 80이다.

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

다음 방법으로도 객체의 속성에 접근 할 수 있다.

alert(grades.sorialgi);

다음은 객체에 저장된 데이터를 기준으로 반복작업을 하는 방법이다.

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

결과는 아래와 같다.

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

for 문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수 name에 담아서 반복문을 실행한다. 반복문이 실행될 때 변수 key의 값으로 egoing, k8805, sorialgi가 순차적으로 할당되기 때문에 grades[key]를 통해서 객체의 값을 알아낼 수 있다.

객체에는 객체를 담을수도 있고, 함수도 담을 수 있다. 

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();

이것은 자바스크립트를 이용한 객체 지향 프로그래밍 기법의 핵심이 되는 성질로 취지에 따라서 로직을 객체에 그룹핑해서 객체라는 부품을 조립해서 소프트웨어라는 완제품을 만들 수 있게 해준다. 객체 지향에 대해서는 뒤에서 자세히 살펴본다.

댓글

댓글 본문
  1. 혀크크
    20.7.26 완료
  2. 김준석
    20.07.26. 학습완료
  3. 지니
    200714
  4. LittleDuck
    음... , c언어로 절차지향에 익숙해서인지 객체지향은 조금 어렵네요
  5. 준식
    20200606 진행중
  6. 준식
    20200606 진행중
  7. 이병훈
    2020/5/22 생활코딩 강의 듣다가 몇일동안 다른곳 강의 계속 돌아다니면서 정착을 못하고 결국 기초강의 뭐하나 완강하지 못했네요 .. 다시 생활코딩으로 돌아와서 한곳에서만 쭉 파보겠습니다 !!
  8. 행복한개구리
    그저 갓...그저 빛...
  9. CrashOverride
    현재까지 공부한 내용 총집편
    https://jsbin.com......put
  10. 뿡뿡팡야
    완료
  11. 완료
  12. 한강
    감사합니다.! 200301
  13. duldulnet@gmail.com
    대한독립만세!!! 200301
  14. 타나
    그건 this라는 키워드에 대해서 공부하시면 될 것 같아요! 동영상 3:50 부터 this에 대한 설명이 시작됩니다.
    대화보기
    • galangal
      20.01.15 완료
    • 2020.01.10
    • 2020.01.09
    • 헝그리
      질문있습니다.
      그냥 console.log(this.list); 하게 되면 undefined 가 뜨고
      함수안에 넣어서 grades.show();를 하게되면 Object가 뜨는데 왜그런건가요??
    • 뉴비
      댓글삭제가 안되네요 부탁드려요
    • 굼벵이
      완료
    • 오현주
      2019.12.16 수강
    • 마두사랑
      11-11까지
    • 제니
      10/31/2019 완료!
    • 박하히
      아하 그렇군요 ㅋㅋ 감사합니다 늦은시간까지 답변달아주시고 감사합니다
      대화보기
      • egoing
        그건 보증하지 않는 것 정도로 이해하시면 좋을 것 같아요. 예를들면 다른 브라우저에서는 다를수도 있는거죠.
        대화보기
        • 박하히
          그런데 공부하면서 궁금한점이 하나 생겼습니다. 배열은 들어간 순서대로 정렬이 되지만 설명에서는 객체는 순서가 없다고 하셨는데 for in 문을 사용할때 객체도 왜 배열처럼 똑같이 순서대로 출력이 되는건가요?
        • 홍주호
          20191015 완료
        • 박창신
          완료
        • 이이이이이뻐
          여기서 느끼시면 안됩니다...
          대화보기
          • samgoing
            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();
          • samgoing
            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();
          • 2019.7.23 완료
          • 은영
            목소리 너무 좋네요.. ㅎ....
          • ㅇㅇ
            감사합니다ㅏ. 근데 저는 key값이 1개만 나오네여 왜그런지..모르겟어여
          • ㅇㄹㅇ
            감사합니당.. 그런데 ...목소리가 너무 멋져용
          • #jslearner
            최고의 강의 였습니당. !!!감사해여 ~~
          • GODisgood
            객체 들로 이루어진 배열도 있겠네요?!?!?!?!?!?!?!?@?@?@?@?@?@?@?@?@?@ ..
            .

            머리가 아픕니다...
          • Youngnam Ko
            돌파 ㅎㅎ
          • 쌀쌀
            두번 들으니까 완전 이해되네요 설명 정말 잘하세요 ㅎㅎㅎ 감사합니다.
          • 나그네
            와.... C++ 잠깐 공부할 때 포기했던 객체의 개념을 이제야 조금 알게 되었네요.
            정말 감사합니다. 그나저나 목소리가 참 멋있네요. 남자인데 반하겠어요.
            빨리 방송국 심야 DJ 자리 알아보세요... 하하
          • 호두
            조립식
          • Misoon Jang
            아 배열까지는 괜찮았는데
          • 미완성
            20190108
          • choon
            감사합니다.
          • Hyun
            2/3까지는 그렇구나 하면서 봤는데 3/3을 보니까 객체의 굉장함을 알았습니다 ㄷㄷㄷ..
          • 코드
            감사합니다~
          • 스탐
            감사합니다.
          • 공상철
            늘 감사하는 맘입니다.
          • signal
            객체(2/3) 영상의 예제(for...in)를 일반 for문으로 동일하게 동작시키려면 어떻게 해야하는지 궁금합니다.
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기