생활코딩 자바스크립트 기본 - 객체

본 게시글은 인프런 강의 "생활코딩 - 자바스크립트(JavaScript) 기본"를 보고 공부한 내용을 정리하고 있습니다.

https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/dashboard

[무료] 생활코딩 - 자바스크립트(JavaScript) 기본 - 인프런 | 강의

---

객체

연관된 데이터를 담아내는 그릇과 같은 역할을 한다. 배열과 비슷한데, 차이점이 존재한다. 배열은 색인이 자동으로 숫자로 추가되지만, 객체는 원하는 값으로 인덱스를 지정할 수 있다.

 

객체를 만드는 법

var order = {'lee': 10, 'kim': 5, 'park': 45};

위에서는 lee는 key가 되고, value는 10이다.

map과 비슷하다.

var order ={};
order['lee']=10;
order['kim']=5;
order['park']=45;

다음과 같이 만들어도 같은 기능을 한다.

lee에 저장된 value를 가져오는 방법은 다음과 같다.

document.write(order['lee']);

아래 코드도 같은 값을 가져온다.

document.write(order.lee);

 

반복문과 객체

var order = {'lee': 10, 'kim': 5, 'park': 45};

다음과 같은 객체가 있다.

반복문에서 for(명칭 in 객체) 이런 꼴을 사용하면 for(var i =0 ; i<객체.length;i++)와 같은 효과를 낼수 있다.

for(key in order){
    document.write(key+" : "+order[key]+"<br>");
}

order.key는 order[key]와 같아 보이지만 실행이 되지 않는다.

 

html의 ul태그와 합쳐서 사용을하면 다음과 같이 사용할 수 있다.

<ul>
<script text="text/javascript">
    var order = {'lee': 10, 'kim': 5, 'park': 45};
    for(key in order){
        document.write("<li>"+key+" : "+order[key]+"</li>");
    }
</script>
</ul>

ul태그 사용은 다음을 참고하면 된다.

https://leewang31.tistory.com/entry/%EC%B2%98%EC%9D%8C-%EC%8B%9C%EC%9E%91%ED%95%98%EB%8A%94-Html-%EB%A6%AC%EC%8A%A4%ED%8A%B8?category=1039117 

처음 시작하는 Html - 리스트

객체 지향 프로그램밍

var grades = {
    'list': {'lee': 5, 'kim': 9, 'park': 2}}

다음과 같이 객체 안에 객체를 넣을 수 있다.

이떄 객체를 호출할 때는 grade.list이런 방식으로 호출하거나 this.list와 같이 호출 할수 있다.

this 함소가 소속되어있는 객체

var grades = {
    'list': {'lee': 5, 'kim': 9, 'park': 2},
    'show': function () {
        for (var name in this.list) {
            document.write(name+" : "+ this.list[name]+" ");
        }
    }
}
    grades.show();

뿐만아니라 객체 안에 함수도 넣을수 있다.

실행하면 결과 값은 다음과 같다