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. signal
    객체(2/3) 영상의 예제(for...in)를 일반 for문으로 동일하게 동작시키려면 어떻게 해야하는지 궁금합니다.
  2. inpa
    파이썬과 병행 공부하고있습니다. 파이썬과 다른점이 띄군요. 햇깔려 죽는줄 알았습니다 ㅎㅎ

    arr = ['1', 2000 'bad']
    이라는 문자와 정수가 섞인 배열이 있을때,

    자바스크립트:
    for i in arr{
    document.write("i="+i);
    }
    출력해보면
    i=0
    i=1
    i=2
    인덱스값이 i에 들어갑니다. 따라서,
    for i in arr{
    document.write("i="+arr[i]);
    }
    로 바꿔주어야
    i=1
    i=2000
    i=bad
    가 될 수 있습니다.

    ======================

    파이썬의 경우:
    for i in arr:
    print("i="+i);

    i=1
    에러
    i=bad
    arr[i]안쓰고 바로 i에 배열값이 들어가 출력되는, 차이점을 알 수 있었습니다.
    다만 두번째 출력문에선 에러가 뜨는데, 문자열끼리 이어주는 문자열 연산자 + 허용범위가 두 언어가 다르기 때문인걸 알았습니다.

    파이썬에선 'my age is' + 20 문법이 되지 않습니다.
    문자열 + 정수는 성립되지않기 때문이죠. 'my age is', 20 처럼 콤마연산자를 써주여야 합니다.
    그러나 자바스크립트에선 'my age is' + 20 가능합니다.
    앞서 배운 '1'==1 -> True 였기 때문이죠. 20이 정수지만 문자로 정보치환을 해서 문법이 가능한 것 같았습니다.
  3. 아 정말 감사합니다. 늘 자바스크립트에 대해 막막했었는데, 너무 쉽게 예제를 통해서 설명해 주셔서 이해가 정말 잘되네요.
  4. 헐 대박...bbbbbbbbbbbbbbbbbbbbbbbb
    감사합니다. 이런 것이 있는 줄도 몰랐네요. 감사합니다.
    대화보기
    • egoing
      차이점을 비교해주는 서비스로 비교해보세요 ;)
      https://www.diffchecker.com/
      대화보기
      • ...왜 내가 하면 오류 나고 복사해서 하면 멀쩡한가....
        대체 무엇이 문제인가 내 손은.. ㅠㅠㅠㅠㅠ
      • rlfhfh451@naver.com
        배열은 저장된 데이터를이 숫서를 가지고 있습니다
      • 감사합니다 점점 어려워지네요.. ㅠㅠ
      • study_y
        박수!
        대화보기
        • 생선과고양이
          여기서부터 머리가 복잡해지기 시작합니다 ㅜㅜ
        • mook_frontdv
          이고잉님 좋은강의 감사드립니다. 귀에쏙쏙 들어오네요 ㅎㅎ
        • 안장호
          감사합니다~! ^^
        • 듀티프리
          좋아요. 감사합니다
        • nomad코딩
          var grades = {
          'list' : {'egoing': 10, 'k8805': 8, 'sorialgi': 80}
          }
          document.write(grades.list);

          이것의 결과는 [object Object]로 뜨는게 맞나요?
        • alert(a['hello']);
          alert(a['hello']);
          대화보기
          • 흠 배열의 함수.? 라고생각하면되나요
          • -정리-
            객체(object)
            이름이 있는 정리정돈 상자

            - 객체 불러오기
            object['egoing'];
            object.egoing;
            key값으로 문자열과 메소드가 올수 있고, 숫자열도 올 수 있지만,
            object[1]은 실행 가능하고, object.1은 실행이 불가능하다.
            object['egoing']의 'egoing'은 문자열이기 때문에,
            object['ego'+'ing']도 실행가능

            - for in 문
            객체,배열안의 값을 모두 가져올때 사용
            for (* in **){
            console.log(* + **[*]);
            }
            ** 에는 객체의 이름이 오고,
            * 에는 객체 안의 key값이 인자로써 변수(매개변수라고 해야하나?)안에 대입된다.

            - 객체 안에 객체를 삽입할 수 있다.
            - 객체 안에 함수를 삽입할 수 있다.

            - this ??
            this는 '소속되어 있는 객체를 가리키는 약속되어 있는 변수'

            - 객체지향 프로그래밍
            서로 연관되어 있는 값과
            서로 연관되어 있는 처리를
            하나의 그릇에 모아서 그룹핑하는 방식
          • 박인호
            12-08
            수강완료.
          • 고스트프리
            완료
          • 시니치123
            객체부터 어려워지기 시작하네요....................
            열심히 하겠습니다.
          • 이병학
            객체....
            약감 감이 오는 듯 한데....
            감사합니다.
          • 수복
            나중에 다시 한 번 더 봐야겠어요
          • 기오뎅기
            그건 얼러트 안하고 그냥 쓸수있는거에요
            대화보기
            • 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 완료
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기