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. 수복
    나중에 다시 한 번 더 봐야겠어요
  3. 기오뎅기
    그건 얼러트 안하고 그냥 쓸수있는거에요
    대화보기
    • GoldPenguin
      완료했습니다.
    • 코딩멸치
      c로 치면 구조체라고 생각해도 되는건가요????객체의 개념을 c++에서 배워서 js의 객체의 개념이 좀 많이 헷갈리네요....c랑 많이 비슷하면서도 다른점이 헷갈리는게 쉽지 않네요
    • 이성준
      좋은 강의 감사합니다
    • 이성준
      와따깔라깔라끼(감사합니다.)
    • 은하수
      강의 잘들었습니다. 감사합니다^^
    • Jeong Min Lee
      강의 잘 봤습니다. 감사합니다. ^^
    • 감사합니다.
      日日新又日新~!!
    • grades.list.egoing 혹은 grades['list']['egoing'] 입력하시면 됩니다~
      대화보기
      • 이미 list 안에서 hello를 20이라고 지정했기 때문에, a.list 에서는 어떻게 해도 hello 값이 20이 나옵니다.
        그냥 a.hello 치면 처음에 지정한 'hello' : 10 값을 낼 수 있어요~
        대화보기
        • this.this
          var a = {
          'hello' : 10,
          'list' : { 'show' : function(){
          console.log(this.hello);
          },
          'hello' : 20
          }
          }
          a['list']['hello']() 를 하면 20 이 출력되는데
          혹시 10을 출력하고 싶으면어떻게해야되나요??
          console.log(this.this.log);로 바꾸면 에러가 나온데 ..
        • 아이노바
          가슴으로 말합니다. 너무 감사합니다.
        • dnflwlq601@naver.com
          질문이 잇습니다.
          마지막예제에서 객체 list에 egoing을 key로 받아 value로써 10을 출력하려면 어떻게해야합니까?
          저는 grades.list['egoing']을 했는데 동작하지 않았습니다.ㅠㅠㅠ
        • 신시내티
          for in Loop 완전 신기하네요.

          var object = {'A':'a', 'B':'b', 'C':'c', 'D':'d'}
          for (key in object) {
          document.write(key, object[key]);
          }

          쉽게 설명해주셔서 감사합니다.
        • 신시내티
          이제껏 들어본 객체지향프로그래밍에 대한 설명중 가장 명쾌하게 설명하신것 같아요. 이제야 이해가 되네요. 감사합니다!
        • 신시내티
          https://www.w3schools.com......asp

          이 곳으로 가시면 객체에 관한 또 다른 설명과 연습문제들이 있으니, 참고 하실분은 참고 하세요.
        • publicum
          브라우저에 내장된 console박스로 값을 출력하라는 명령입니다.
          사용자가 볼 수 있는 브라우저의 화면으로 출력을 하는 document.write 라는 명령과 달리 브라우저 화면 자체에는 아무것도 표시가 안된다는 차이가 있습니다.
        • nevertoolate
          difficult... ^&^;;;;
          i will watch these lessons again. ^&^;;;;;
        • 유미
          console.log는 무슨 뜻이죠?
        • Seo Yun Seok Tudoistube
          여기서 부터 뭔가 프로그램 하는거 같은 느낌이 듭니다. 감사합니다^_____^!!!
        • sssjunn
          감사합니다
        • 장석규
          2017/06/14 완료
        • Gangso Lee
          done_감사합니다.
        • 리느
          감사합니더~
        • ecologer
          function 이 하나의 요소로서 기능을 발휘하는 것에 대해 굉장히 매력적이면서도 문법이 꽤나 복잡해 지네요.
        • 김소희
          잘봤습니다!
        • 최규선
          20170421 수강완료
        • String
          20170406 완료
        • 이승우
          20170330완료
        • gangsorhee@gmail.com
          완료
        • 김세창
          어렵당...ㅎㅎ^^
          2017/03/27 수강완료~
        • SangHyeok Kim
          2017/03/24 수강완료
        • 닥강정
          감사합니다~~~
        • 문바이
          Java의 OOP
          Java의 List, Set, Map에 대한 사전지식이 있으면, 이해하는데 조금더 도움이 됩니다.

          egoing님이 이 부분을 어떻게 하면 쉽게 이해시키고,
          약식코드로 모든것을 간단히 보여 줄 수 있게 할 수 있을까 하는
          고민과 고통이 느껴지는 군요.

          항상 감사히 잘 보고 있습니다.
        • 878데카르트
          감사합니다!
        • 으노
          배열 : 인덱스-값의 쌍으로 이루어진 데이터를 담는 그릇이라면
          객체 : '사용자정의'-값의 쌍으로 이루어진 그릇

          객체에서 속성-값 이라는 개념으로 알고는 있었는데
          인덱스와 연관지어서 설명해주시니까 이해가 되네요
        • 폭스킴
          grades['show']();를 보니 grades.show(); 가 가슴에 와 닿네요~ 쵝오~ ^^
        • 임지호
          객체 : 연관된 데이터를 담는 그릇. 인덱스를 문자로 사용하는 것이 배열과 다른 점.
          - var .... = {'key값' : value값 , ~~~~}의 형태, 빈 객체 만들고 후에 값 지정도 가능
          - 객체와 반복문이 만날 때 for(key in 객체) { ...key - key값 or 객체[key] - value값}(배열에서도 사용 가능)
          - 객체 안에 객체 또는 함수가 들어갈 수 있음(연관된 데이터, 처리를 그룹핑해서 프로그래밍하는 것을
          객체지향프로그래밍이라 함)
          - 함수 안에서 this를 사용하면 함수를 가지고 있는 객체를 가리키는 변수로 사용된다.
        • 완료!
          감사합니다~ 완료!
        • 솔군
          2016.10.12 강의 시청
        • 신입프로그래머
          잘 들었습니다 강의 너무나 감사합니다!
        • 취준생1
          감사합니다!
        • cicada
          감사합니다
        • 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
            객체가 들어오고나서 부터는 조금씩 헷갈리네요...
            한번에 문법을 쭉 봐서 그런가 여러번 다시 봐야겠어요 ㅠ
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기