Languages/Java Script

[Js] 객체 | javascript 객체 | 객체 지향 프로그래밍

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

객체(Object)

서로 연관되어 있는 데이터를 담아내기 위한 일종의 그릇 이라는 점에서 객체는 배열과 유사한 역할을 지닌다.

하지만

지금까지 살펴본 배열은 아이템에 대한 식별자로 숫자를 사용했다.

데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 된다.

이 인덱스를 이용해서 데이터를 가져오게 되는 것이다.

만약 인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용해야 한다. 다른 언어에서는 연관배열(associative array) 또는 맵( map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당한다.

쉽게 생각하면

배열로 a =['a','b','c']가 있다고 가정한다면 a,b,c 각각 인덱스 0,1,2로 결정이 되지만

객체의 경우 a,b,c 각각의 인덱스를 숫자가 아닌 다른 문자(ex : a=first, b = second ..)로 사용할 수 있다는 것이다.

객체의 생성

다음은 객체를 만드는 법이다.

<script>
    var grades = {'haeun': 10, 'admin': 6, 'root': 80}; //객체에서 인덱스는 문자! 
    //haeun, admin, root = 인덱스이고 그 뒤에 값들은 인덱스에 해당하는 value이다.
</script>

위의 예제에서 haeun은 key가 되고, 10은 value가 된다. 아래는 객체를 만드는 다른 방법이다.

<script>
    var grades = {};
    grades['haeun'] = 10;
    grades['admin'] = 6;
    grades['root'] = 80;
</script>

아래와 같은 방법으로도 객체를 만들 수 있다.

<script>
    var grades = new Object();
    grades['haeun'] = 10;
    grades['admin'] = 6;
    grades['root'] = 80;
</script>

객체를 만든 후 필요한 값을 가져오기 위해서는

Object이름 . 접근할 인덱스 (key) 로 가져오면 된다.

위 예시를 보면 grades.a 와 같이 출력을 하였다.

a+ab+abc = 10+30+50 이므로 결과는 아래와 같이 나오게 된다.

다른 방법으로 표기하고 싶다면

위와 같이 객체에서 필요한 값을 가져올 수도 있다.

▼ 꿀 Tip

대괄호 안에 들어간 경우 프로그래밍적으로 조작 가능.

즉 접근할 때 문자열 취급하기 때문에

'k8805'라는 인덱스의 값이 6일 때

문자열의 합을 이용해서 표기 할 수도 있다.

반복문을 이용해서 객체를 다루어 보자!

<script>
    var grades = {'haeun':10, 'admin':20, 'root':30};
    for(key in grades){
        document.write("key : "+key+", value : "+grades[key]+"<br />");
    }
</script>

배열은 순서가 있지만 (0,1,2, 등 각 자리에 순서가 정해져있음)

객체는 key와 value로만 이루어져 있고 순서가 존재하지 않는다.

때문에 위와 같은 방법으로 출력을 해주면 된다!

그래서 for in 문을 사용해야 한다.

for중간에 in이 있는데 in을 중심으로 in뒤는 객체가 위치하고, 앞쪽에는 객체의 키 값이 들어간다.

(이것은 약속사항이다.)

for in ! 새로운 반복문 형태

for 문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수 name에 담아서 반복문을 실행한다.

반복문이 실행될 때 변수 key의 값으로 haeun, admin, root 가 순차적으로 할당되기 때문에

grades[key]를 통해서 객체의 값을 알아낼 수 있다.

※ 배열 객체 어디서든 사용 가능하다.

객체에는 객체를 담을수도 있고, 함수도 담을 수 있다.

<!DOCTYPE html>
<html>
<head>
	<title>haha</title>
</head>
<body>
<script type="text/javascript">
	/*   함수를 객체로 만들 수도 있다. 
    	 자바스크립트에서는 함수도 값이기 때문에 객체 안에 저장이 될 수 있음.
    */
    var grades = {
    	'list' : {'haeun' : 10,'admin' : 8, 'root':80}, //또다른 객체가 됨. 연결해줘야 하니 , (콤마) 빼먹으면 에러남.
    	'show' : function(){ 
    		alert('Hello world');
    	}

    }
    alert(grades['list']['haeun']); //list에 접근하여 haeun이라는 객체를 출력하고 싶을때 
    //alert(grades['show']()); // 이표현은 alert()를 두번 실행시킴 -> undefined
    grades['show'](); //이게 맞는 표현
</script>


</body>
</html>

this

this 는 객체를 가르키는 변수이다. (약속된 변수)

즉 함수가 소속된 객체를 가르킨다는 것이다.

다른 출력법도 확인해보자.

하나의 객체가 있고, 그 안에 어떠한 데이터가 있고,(list : ...)

이 데이터를 사용하는 함수가 들어있으며(show)

이를 호출 할때 객체.함수(); 형식으로 어떠한 일을 처리 할 수 있는 것이다.

이처럼 관련성이 있는 것들을 그룹지어 사용하는 것을 객체지향 프로그램이라고 한다.

서로 연관된 값, 데이터, 처리 등을 하나의 그릇 안에 넣어 그룹핑 하는 것을 의미한다.

이것은 자바스크립트를 이용한 객체 지향 프로그래밍 기법의 핵심이 되는 성질로

취지에 따라서 로직을 객체에 그룹핑해서 객체라는 부품을 조립해서 소프트웨어라는 완제품을 만들 수 있게 해준다.

객체 지향에 대해서는 뒤에서 자세히 살펴본다.

'Languages > Java Script' 카테고리의 다른 글

[Js] UI와 API 그리고 문서보는 법 \| API란? \| javascript API (0)	2021.02.04
[Js] 모듈 \| 모듈의 사용 \| Node.js에서의 모듈의 로드 \| javascript 모듈 \| 라이브러리 (0)	2021.02.04
[Js] 배열 \| javascript 배열 \| 배열이란? (0)	2021.02.03
[Js] 함수 \| 함수의 형식 \| 함수의 정의와 호출 \| 입력과 출력 (0)	2021.02.03

Contents

새소식

인기 검색어

[Js] 객체 | javascript 객체 | 객체 지향 프로그래밍

객체(Object)

객체의 생성

this

'Languages > Java Script' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바