생활코딩

Coding Everybody

객체

토픽 생활코딩 > 언어 > 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. 성공중
    24.8.5 완료
  2. 공부하자
    학습완료
  3. DreamBoy
    2023.10.06. JavaScript 입문 수업 - 자바스크립트 기본 시작 - 객체 파트 수강했습니다.
  4. TTimotti
    var가 없어도 동작은 합니다만 권장되지는 않습니다. 특히 var를 사용하는 경우라면요. let을 사용하세요.
  5. 코딩이조아
    for(var name in grades)에서 name도 변수, for(key in grades)에서 key도 변수 같은 문법인데 var를 빼먹으신 것 같네요.
    대화보기
    • 건강행복
      감사합니다.
    • 바르다
      위 예제 for in문에서 for(var name in grades)를 사용하는 이유는 무엇인가요?
      즉 for(key in grades)와의 차이점은 변수를 새로 만든다는 것인데.. 왜 이렇게 해야 하는건가요?
      this를 사용하기 위함인가요?
    • 하앙
      완료
    • 220930
    • 헤밍웨이
      220824
      객체가 딕셔너리와 같은 뜻이었는지 몰랐네요..
      객체지향 프로그래밍, this에 대해서도 호기심이 가득합니다!
    • gusxorla
      220810
    • 손도로도로
      0707
    • 요기효
      220604
    • 진진리
      22.06.03
    • 진진리
      22.04.27 완료
    • Rachelcarson
      너무 잘 이해시켜주시네요. 이제 책봐도 다이해가고 그래요. 선생님 진짜 최고이십니다!!
    • 너구리기린
      2022.04.11 재수강 필요!!
    • mary5544
      객체 어렵지만 일단 완료!
    • chrr
      2022.02.21. 수강완. 좋은 강의 감사합니다.
    • 소설가
      2022-02-16 완료
      고맙습니다.
    • 임앤강
      2022-02-06 수강완료 !! 감사합니다 !!
    • 낀찐
      2022. 01. 18 완료
    • tchaikovsky
      최고입니다
    • 마스터하자
      2021.12.16 객체지향 들어가니까 많이 어렵네요 다시 한번 복습해야겠습니다.
    • pmxsg
      2021.12.13 수강
    • 드림보이
      2021.12.03. 객체 파트 수강완료
    • GelandeWagen
      복습 ok
    • 안녕,쨈
      21/10/27
    • seaWater
      2021. 9. 14. 완료
    • choi
      완료
    • labis98
      20210819 good~~~!!!
    • 2021.07.26 완
    • 낭만고양이
      수강완료
    • 20210619
      전보단 이해가 잘되군요
    • GelandeWagen
      210604 ok
    • Amousk
      좋은 강의 감사합니다.
    • coding_prince
      감사합니다.
    • yogg
      전보다는 이해하기 쉬운거 같아요!!!
    • 짜rr
      수업은 들었는데너무 어렵네요 헷갈리기도 하고.. 다음에 또 들어야 겠습니다.
    • 앙냥냥
      2021.03.26 봤숩니당 객체랑 배열 비슷하면서도 달라서 넘..나.. 헷갈리지만 잘 정리해 봐야게써요.. . . ㅇ<-<
    • Asanagi
      2021. 03. 15 완료!
    • 진돌
      2021. 03. 05 완료!
    • 정재진
      완료
    • 홍주호
      21.1.2
    • 열심히
      20210102 완료
    • 정상에 오르자가자고고
      완료
    • Coen
      2020.12.22
    • LEGEND
      쵸또.. 무즈카시꾸낫따,.크큭..
    • 201209
    • psyless
      20201130