웹 프로그램

코스 전체목록

닫기

객체

객체(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. seaWater
    2021. 9. 14. 완료
  2. 완료
  3. labis98
    20210819 good~~~!!!
  4. 2021.07.26 완
  5. 낭만고양이
    수강완료
  6. 드림보이
    수강완료했습니다...
  7. 20210619
    전보단 이해가 잘되군요
  8. GelandeWagen
    210604 ok
  9. Amousk
    좋은 강의 감사합니다.
  10. coding_prince
    감사합니다.
  11. 전보다는 이해하기 쉬운거 같아요!!!
  12. 수업은 들었는데너무 어렵네요 헷갈리기도 하고.. 다음에 또 들어야 겠습니다.
  13. 앙냥냥
    2021.03.26 봤숩니당 객체랑 배열 비슷하면서도 달라서 넘..나.. 헷갈리지만 잘 정리해 봐야게써요.. . . ㅇ<-<
  14. Asanagi
    2021. 03. 15 완료!
  15. 진돌
    2021. 03. 05 완료!
  16. 정재진
    완료
  17. 홍주호
    21.1.2
  18. 열심히
    20210102 완료
  19. 정상에 오르자가자고고
    완료
  20. 2020.12.22
  21. LEGEND
    쵸또.. 무즈카시꾸낫따,.크큭..
  22. 201209
  23. psyless
    20201130
  24. 강승
    사랑합니다
  25. 박병진
    2020.10.20완
  26. 당근조아
    201017 완
  27. 코딩지니어스
    20201010 완료
  28. 20201007 완료
  29. Yongbeom Kwon
    200911 완료
  30. switpotato
    20200815 완료
  31. 혀크크
    20.7.26 완료
  32. 김준석
    20.07.26. 학습완료
  33. 지니
    200714
  34. LittleDuck
    음... , c언어로 절차지향에 익숙해서인지 객체지향은 조금 어렵네요
  35. 준식
    20200606 진행중
  36. 준식
    20200606 진행중
  37. 이병훈
    2020/5/22 생활코딩 강의 듣다가 몇일동안 다른곳 강의 계속 돌아다니면서 정착을 못하고 결국 기초강의 뭐하나 완강하지 못했네요 .. 다시 생활코딩으로 돌아와서 한곳에서만 쭉 파보겠습니다 !!
  38. 행복한개구리
    그저 갓...그저 빛...
  39. Useok
  40. CrashOverride
    현재까지 공부한 내용 총집편
    https://jsbin.com......put
  41. 뿡뿡팡야
    완료
  42. 완료
  43. 한강
    감사합니다.! 200301
  44. duldulnet@gmail.com
    대한독립만세!!! 200301
  45. 타나
    그건 this라는 키워드에 대해서 공부하시면 될 것 같아요! 동영상 3:50 부터 this에 대한 설명이 시작됩니다.
    대화보기
    • galangal
      20.01.15 완료
    • Blanc
      2020.01.10
    • BLANK
      2020.01.09
    • 헝그리
      질문있습니다.
      그냥 console.log(this.list); 하게 되면 undefined 가 뜨고
      함수안에 넣어서 grades.show();를 하게되면 Object가 뜨는데 왜그런건가요??
    • 뉴비
      댓글삭제가 안되네요 부탁드려요
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기