생활코딩

코스 전체목록

닫기

객체

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