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. 완료!
    감사합니다~ 완료!
  2. 솔군
    2016.10.12 강의 시청
  3. 신입프로그래머
    잘 들었습니다 강의 너무나 감사합니다!
  4. 취준생1
    감사합니다!
  5. cicada
    감사합니다
  6. ibmike
    console.log(grade.key); 라는 뜻은
    'grade' 라는 객체 안의 'key' 라는 이름의 key 값의 value 를 출력하라는 의미입니다.
    var grade = {'aa':1, 'bb':2, 'cc':3}; 라고 정의된 grade 라는 객체안에는
    'aa' 라는 key 안에 1이라는 value
    'bb' 라는 key 안에 2 라는 value
    'cc' 라는 key 안에 3이라는 value가 있지만
    'key' 라는 key값은 존재하지 않기 때문에 undefined 라고 뜨는 겁니다.



    원하시는게 각각의 key 의 value 를 출력하고 싶으신 거라면
    for (key in grade){
    console.log(grade[key])
    }
    이런식으로 작성하시면 되고

    만약 특정 key의 value
    예를 들면 'aa' 라는 key 값의 value 를 출력하겠다면
    이런식으로 작성하시면 됩니다.

    for (key in grade){
    if(key == "aa"){
    console.log(grade[key]);
    }
    }

    사용하신 자바스크립트의 foreach 구문에서 사용된 key 의 뜻은 index
    즉, 객체의 key의 키운팅의 의미입니다.
    반복문을 사용하고 작성하신 이름을 비슷하게 하시다 보니 조금 헛갈리신듯 합니다 ^^
    자바스크립트 foreach 구문의 형식을 먼저 파악해보시면 어떤 곳에서 잘못 이해하셨는지 금방 아실수 있을 겁니다.
    대화보기
    • yihsang
      좋은 수업 감사드립니다.
    • 카스테라는없다
      ?!?!???!!!??!!인덱스로 문자나 문자열을 사용한다구요????? 그런게 가능했다니!!!!?!????!!?!???!!?!
    • JustStudy
      고맙습니다
    • Ki Seob Shin
      객체가 들어오고나서 부터는 조금씩 헷갈리네요...
      한번에 문법을 쭉 봐서 그런가 여러번 다시 봐야겠어요 ㅠ
    • 공부합시다
      CHO11 님,

      전에 예제에서는 key 라는 변수를 만드셨는데 지금은 name으로 만드신겁니다.

      name은 변수 입니다.

      변수 name을 CHO11로 바꿔서 함 해 보시면 이해가 빠르실듯....
      대화보기
      • 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();

        에서 for 안에 있는 name은 뭘 뜻하는건가요? key 대신 사용된건가요?
      • Byeong Koo Kang
        좋은 정보 감사합니다.
      • 심비행기
        아하. 네 이해가 되는 것 같습니다.
        감사드립니다!
        대화보기
        • 쩜문법은어려워
          안녕하세요. 저도 헷갈렸던부분인데
          grade.key 라고쓰시면 grade가 가지고있는 키중에 key라는 키를 찾아 값을 받아온다는 의미가되요
          그런키는없어서 표시가안되는거죠. 여기서 key를 변수로 생각하는게 아니라 키의값 그자체로 찾게되요.
          원하는 값을출력할려면 grade[key]하시면되요. 이건 key의값으로 그러니까 aa같은거 값을찾는다는 뜻이에요.
          키를쩜으로 지정할때는 변수를 쓸수없다는걸 기억하세요.
          대화보기
          • 구묵
            감사합니다.. ㅎㅎ 민망해라 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
            대화보기
            • 김세정
              @구묵
              list에 'book'이 없어서
              document.write(grad2.list['book']); 를 못찾는거 같은데요,
              list 키값에 book을 추가하시던가
              document.write(grad2.list['memo']); 처럼
              키값이 갖고 있는 객체를 부르면 잘 나오네요~
              대화보기
              • 심비행기
                우선 좋은 강의 감사드립니다.
                궁금한점이 있어서요.

                for in문에서
                var grade = {'aa':1, 'bb':2, 'cc':3};
                for (key in grade){
                  console.log(grade[key]);
                }
                위와 같이 코드를 작성한 경우,
                1, 2, 3 이 정상적으로 출력이 됩니다.

                그런데 궁금한 점은,
                console.log(grade.aa); 를 하면 1이 정상적으로 출력이 되는데

                for (key in grade){
                  console.log(grade.key);
                }
                를 하면 언디파인드가 출력이 되네요.
                저 key변수안에는 객체안의 key가 들어가있는 건데 왜 언디파인드가 뜰까요?
              • 구묵
                객체에 또 객체와 함수를 넣은 경우 document.write가 실행되지 않는 이유는 뭘까요? 코드 삽입합니다~
                var grad2 = {
                'list': {'memo': 10000000, 'evernote':11, 'simplenote':12},
                'show': function(){
                document.write('Hello world');
                alert('Hi');
                }
                }
                alert(grad2.list['memo']);
                alert(grad2['list']['memo']);
                document.write(grad2.list['book']);
                // 왜 alert 는 되고 document.write는 안될까?
                grad2['show']();

                또 콘솔창에서 실행해본 결과 //undefinedHelloworld
                라고 뜨는걸 보니, document.write(grad2.list['book']); 는 값을 아예 안받고 있는 것 같아요.
                알려주세요~ㅋㅋㅋ
              • HOHOHO
                자바와 자바스크립트는 완전히 다른언어입니다~ c, c++보고 오셨으면 아실꺼같은데~ 느낌상 오타이신가보네요
                대화보기
                • 이영훈
                  C랑 C++을 보고왔는데, 자바는 신기한 기능이 많네요 감사합니다. 강의 정말재밌네요 ~ 중간 중간 던지시는 농담이 ㅋㅋㅋ 지루하지 않은 강의 감사합니다.
                • 엔트
                  감사합니다!!
                  너무 쉽게 설명해주셔서 단번에 이해하고 넘어갑니다 {!(-_-b)!}
                • ㅁㄴㅇㄹ
                  객체 안에서 별명과 해당 별명으로 불리울 데이터를 대입하는 거라고 생각하시면 돼요
                  컴퓨터는 메모리에 데이터를 담아놓고 있기 때문에, 어떤 데이터를 가져오려면 해당 메모리의 주소값을 불러와야(호출해야)해요. 근데 그 주소값을 우리가 모두 외울 수 없기 때문에 부르기 쉽게 별명을 붙여놓고.. 그것이 변수죠.

                  var user = {
                  '별명' : 'ㅜㅜㅜㅜ'
                  }
                  user.별명;
                  별명에다가 'ㅜㅜㅜㅜ' 라는 데이터를 담는 것 이죠. ㅜㅜㅜㅜ 라는 데이터를 사용하고 싶을 땐 user라는 오브젝트 안에 있는 별명을 호출하면 돼요.

                  var user2 = {
                  'nickname' : 'ㅜㅜㅜㅜ',
                  'show': function () {
                  console.log(this.nickname);
                  }
                  }
                  user2.show();
                  이건 user2 라는 객체에 nickname 이라는 별명과 show라는 별명이 두개나 있는데show라는 별명엔 함수가 들어있네요. 그래서 호출할 때 user2.show() 하는 것 이에요.
                  대화보기
                  • Kevin Lee
                    @NewRun
                    지금 공부하면서 보니 배열에서 0 1 2 출력되는 것은 index가 맞는 것 같습니다.
                    객체에서 for in 구문 배울 때를 미루어볼 때
                    그 name 이란 것은 key값에 대해 선언된 변수로 보이네요.
                    객체에서의 key 역할이 배열에서 index이고, index는 무조건 0부터 차례대로 지정되기 때문에
                    값을 따로 담지 않아도 0,1,2 순으로 출력되는게 맞지 않겠나 싶습니다.
                    다만, 이 로직의 결과는 언제나 0,1,2이기 때문에 효용성이 없을 것 같고, 대신
                    console.log()괄호 안에 index 변수 'name' 이 아니라 그 배열 자체를 담아서
                    의미있는 결과(value값)를 출력해내는 것이 그 부분의 요지였던 것 같네요.
                    제가 제대로 이해하고 있는 거 맞나요? ㅎㅎ;;
                  • 0 1 2 는 배열 안의 a, b, c에 해당하는 각 인덱스 값을 의미하는 것 같습니다. 배열에선 첫번째 값이 0, 두번째 값이 1, .... 이런식으로 가서 그렇게 뜨지않나 싶네요.
                  • Jerome
                    저도 그부분이 헷갈립니다 그 부분부터 강의가 빨라지는듯한 느낌??!!!~
                    대화보기
                    • NewRun
                      크롬 개발자 도구에서

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

                      for(var name in arr){
                      console.log(name);
                      }
                      0 1 2 가 출력 되는데
                      값이 따로 담지 않았는데 0 1 2 는 무엇을 의미하나요? 그냥 index 값인가요?
                    • 준맹
                      ... 이젠 진짜 어렵네요 갈수록 앞에 들었던 내용이 생각이 안 납니다ㅠ그래도 일단 한 번 듣고 또 듣는게 낫겠죠?
                      좋은 수업 감사드려요.
                    • 하냥
                      그거 그냥 문자예요..
                      대화보기
                      • beginner
                        안녕하세요. 위 객체에 대한 설명에서 객체를 'dictionary'라고 원어를 적으셨는데, 혹시 'object'라고 표현해야하지 않는지요? ("만약 인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용해야 한다.") 멋진 강의 감사드립니다.
                      • egoing
                        grades['egoing'] = [10, 20, 30];

                        :)
                        대화보기
                        • 최진
                          혹시 key 값에 여러 개의 value 값을 넣을 수 있을까요?
                          이를테면

                          grades['egoing'] = 10, 20, 30;

                          이런식으로..
                        • ㅜㅜㅜㅜ
                          궁금한게있어서요 : <-이게 무슨 의미인지 도저히 모르겠네요 ㅠㅠㅠㅠ예제연습하면서 처음 보는거같은데....
                        • 행복한빛
                          질문 드려요.
                          3번째 동영상에서
                          for(var name in this.list)<< 구문이 있는데요.
                          여기서 var name이라고 변수를 지정해주셨는데 그 값은 없잖아요
                          근데 이게 자동으로 key로 인식이 되는 건가요?
                          꼭 key 라고 적지 않아도, 어떤 이름을 쓰든 key로 적용이 되는 것인지 궁금합니다.
                        • Bae_God
                          c언어 공부하고 자바스크립트보는데 소름돋는다... 구조체를 저렇게 자유롭게 캬
                        • juno
                          좋은 강의 감사드립니다. ^^
                          마지막 예제 관련해서 질문이 있는데요.

                          for loop 안에 this.list[name] 이렇게 하면 value 가 출력이 되지만 this.list.name 으로 입력하면 value 가 출력되지 않습니다. 두 경우 모두 value 가 출력되어야 할 것 같은데 아닌가요??
                        • 최선완
                          key 별다른건 없어요.
                          빨간 그릇 안에는 캐찹이 있다. 파란 그릇 안에는 물이 있다. 노란 그릇 안에는 레몬에이드가 있다.
                          그리고 이 것들은 장바구니 안에 들어있다.
                          이것을 객체지향으로 표현해보면,

                          var basket = {'red' : "캐찹" , 'blue' : 물 , 'yellow', "레몬에이드"};

                          alert(basket.red) ; 케챱 출력.
                        • 순수하다
                          다행히 웹디로 일하고 있어서.. HTML은 충분히 해결이 되는데.. key가 헷갈리네요, key 는 무언가를 담는 그릇이고 이 그릇안에 저장되어 있는 겂을 in 하여 불러온다, 이 불러온 값들은 각기 객채로 표현된다.. 여기 까지만 이해 했네요 ;;
                        • 학동역
                          잘 보고있습니다 감사합니다
                          좀 어려워진 느낌이 드네요
                        • pupu
                          잘보았습니다.
                        • kush
                          저도 2/3 부분부터,
                          갑자기 이고잉님께서 key를 안쓰고 name을 쓰셔서, 그 때부터 멘붕이 오네요ㅠㅠ
                          그 부분 빼고는 싹다 이해가 됩니다. 필승명강의 최고입니다.
                        • YellowBall
                          잘 들었습니다.
                        • 머머
                          key는 그냥 담는용도인거 같아요. key대신 abc나 뭐 아무거나 써도 상관없더라구요.
                          대화보기
                          • 추남
                            으악 마지막에 확 어려워지네요. 일단 못알아들어도 끝까지 한 번 쓱 훑고, 다시 반복해서 봐야겠어요. ㅠㅠ
                          • 찐똥구리구리
                            두번 보니 이해가 좀 가기시작하네요....더디지만...조금씩 이해하는 것 같아요...감사합니다^^
                          • Anonym
                            다른문자를써도 상관없습니다!
                            대화보기
                            • 엑소버드
                              for in 쓸 때
                              꼭 key를 안 써도 되는건가요?
                            • gohu517
                              강의 정말 감사합니다. 만나서 식사대접이라도 해드리고 싶네요 정말 감사해요 +_+=b
                            • pathfinder
                              정말 어디까지가 이고잉님의 한계인지... 명강의 박수 큰박수드립니다...개념이 쏙쏙...감사
                            • 민팀장
                              점점.....그래도..c언어 쬐금 훑어본게 도움이 되네요..
                            버전 관리
                            egoing
                            현재 버전
                            선택 버전
                            graphittie 자세히 보기