티스토리 뷰

Programming/JavaScript, jQuery

[javascript 10강] 객체

국브 2019. 2. 13. 14:59

 [javascript 10강] 객체



자바스크립트에서도 객체형식을 지원합니다.

객체라는 설명을 하는것은 정말 어려운것같습니다.


그럼 객체란 무엇일까요?

우선 프로그래밍에서는 객체는 속성과 기능을 갖고있는것 입니다.

이렇게 말하면 어려울것같고..


사람을 기준으로 객체를 설명해보겠습니다.

사람은 모두다 똑같이 키, 몸무게 등을 갖고있습니다.

또한 사람마다 할수있는 능력또한 모두 다릅니다.

A라는 사람은 키 : 180, 몸무게 : 80, 능력 : 프로그래밍 이라는사람이 있을수있고..

B라는 사람은 키 : 170, 몸무게 : 75, 능력 : 헬스트레이너 이라는 사람도 있을수도 있습니다.


그럼 키와 몸무게는 모두 갖고 있지만 사람마다 각각 다르기때문에 사람의 속성이 될수 있고..

사람마다의 능력또한 모두다 다르기때문에 기능으로 될수 있습니다.

(물론 능력도 속성이 될수는있지만.. 뭔가를 시행할수 있는 기능이기 때문에 기능으로 예를 들었습니다.)


그럼 자바 스크립트 에서 사람이라는 객체를 만든다면.. 

속성 : 키, 몸무게 가 될것이고..

기능 : 능력 으로 만들수 있을것입니다.


이렇게 객체는 여러 분야에서도 생각할수 있습니다.

자동차도 각각의 기능과 옵션이 다르고 연비또한 다를것이고..

회사도 하는일이 모두 다르고 직원의 수도 다를것입니다.


이렇게 객체의 개념이 생긴다면 객체의 기준을 잡고 속성과 기능을 나뉘어 객체를 만들수 있을것입니다.


객체글에 들어가기전 javascript 에 부족한 부분이 있다면 하단링크를 통해 찾아보시길 바랍니다.


 이전 글 링크 


2019/02/07 - [Programming/JavaScript, jQuery] - [javascript 1강] 자바스크립트 개요 및 개발환경설정

2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 2강] 입출력 및 기본문법

2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 3강] 변수와 자료형

2019/02/10 - [Programming/JavaScript, jQuery] - [javascript 5강] 배열

2019/02/10 - [Programming/JavaScript, jQuery] - [javascript 4강] 연산자

2019/02/11 - [Programming/JavaScript, jQuery] - [javascript 7강] 반복문(제어문)

2019/02/11 - [Programming/JavaScript, jQuery] - [javascript 6강] 조건문(제어문)

2019/02/12 - [Programming/JavaScript, jQuery] - [javascript 8강] 함수

2019/02/12 - [Programming/JavaScript, jQuery] - [javascript 9강] 함수 심화




 객체 생성


위에서 말씀드린 객체의 개념이 생겼다면 이제 객체를 만들어보고 코딩을 해보겠습니다.

사용방법을 보시면 프로그래밍을 많이하셧던 분이시라면 Map 으로 생각하실수도 있지만..

Map 과 다르게 자바스크립트 객체는 기능(함수) 를 넣을수 있습니다.


 사용방법 및 문법 


1. 객체 생성법


var 객체변수명 = {

속성명1 또는 기능명1:속성값1 또는 기능1,

속성명2 또는 기능명2:속성값2 또는 기능2,

속성명3 또는 기능명3:속성값3 또는 기능3

}


(속성또는 기능은 제한없이 만들수 있습니다.)


2. 객체 사용법(객체 접근방법)


객체변수명.속성명 ; , 객체변수명.기능명();

또는 

객체변수명["속성명"]; , 객체변수명["함수명"];



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
    
            var person = {
                height:180,
                weight:80,
                fn: function (x,y){
                    console.log("난 덧샘을 잘하지! 두수의 합은 " + (x+y) +" 야!");
                }
            }
            
            console.log("키:" + person.height);
            console.log("몸무게:" + person.weight);
            person.fn(10,9);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 

           var person = {
                height:180,
                weight:80,
                fn: function (x,y){
                    console.log("난 덧샘을 잘하지! 두수의 합은 " + (x+y) +" 야!");
                }
            }

person 이라는 객체를 생성하고

속성으로 height : 180, weight : 80, fn : function (x,y){ console.log("난 덧샘을 잘하지! 두수의 합은 " + (x+y) +" 야!");}  을 만들어 주었습니다.


           console.log("키:" + person.height);
            console.log("몸무게:" + person.weight);
            person.fn(10,9);

콘솔로그로 person.height , person.weight 값을 출력해 보았고

person.fn 함수에 매게변수값 10,9 를 넣어 실행했습니다.


그결과 위의 이미지처럼 나오는것을 확인할수 있습니다.




 객체 for ~in 사용


저번 반복문 글에서 for ~ in 으로 리스트를 사용하는것을 배웠습니다.

객체또한 for ~ in 으로 사용이 가능합니다.


 사용방법 및 문법 


for(var 변수명(객체의 key 값을 사용할 변수) 명 in 객체명){

반복문 실행기능

}



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
    
            var person = {
                height:180,
                weight:80,
                fn: function (x,y){
                    console.log("난 덧샘을 잘하지! 두수의 합은 " + (x+y) +" 야!");
                }
            }
            
            for(var key in person){
                
                console.log("key 명:" + key);
                console.log("key 값:" + person[key]);
                
            }
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


객체 생성법에서 사용했던 예제를 for in 을 사용하였기 때문에

for in 부분만 설명하도록 하겠습니다.


           for(var key in person){
                
                console.log("key 명:" + key);
                console.log("key 값:" + person[key]);
                
            }

for 문에 변수를 key 라고 만들어 주었고 생성해둔 객체 person 을 넣어 주었습니다.

그다음 실행문에서는 key 값을 출력해 속성명을 확인하였고

person[key] 로 객체에 있는 속성에 접근하여 속성의 값을 확인하였습니다.

그결과 위와같이 출력되는것을 확인할수 있습니다.




 객체 속성추가, 속성삭제


객체를 생성한후에 속성을 추가하거나 제거를 할수 있습니다.

사용발법은 아래와 같습니다.


 사용방법 및 문법 


1. 속성추가


객체명.새로운속성명 = 속성값;


2. 속성삭제


delete 객체명.속성명;



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
    
            var person = {
                height:180,
                weight:80,
                fn: function (x,y){
                    console.log("난 덧샘을 잘하지! 두수의 합은 " + (x+y) +" 야!");
                }
            }
            
            //속성 추가
            person.face = "잘생김";
            
            //속성 제거
            delete person.weight;
            
            for(var key in person){
                
                console.log("key 명:" + key);
                console.log("key 값:" + person[key]);
                
            }
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


객체 생성법에서 사용했던 예제를 속성추가, 삭제 를 사용하였기 때문에

속성 추가, 삭제 부분만 설명하도록 하겠습니다.


           person.face = "잘생김";
            
            //속성 제거
            delete person.weight;

person.face = "잘생김"; 에서는 person 객체에 face 라는 속성을 추가하여 값을 "잘생김" 이라고 넣어 주었습니다.

그다음 weight 이라는 속성을 삭제하기위해 delete person.weight; 라고 입력해주었습니다.


그다음 for 문을 사용하여 속성명 및 속성값을 확인한결과

위와같이 출력되는것을 확인할수 있습니다.




 in키워드, with 키워드


객체안에 내가 찾고있는 속성의 유무를 확인하기 위해서 in 키워드가 사용되고

속성에 보다 편하게 접근할수 있는 with가 있습니다.


 사용방법 및 문법 


1. in 키워드 (반환값 boolean)


"찾으려는 속성명" in 객체명;


2. with 키워드


with(객체명){

속성명

}



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
    
            var person = {
                height:180,
                weight:80,
                fn: function (x,y){
                    console.log("난 덧샘을 잘하지! 두수의 합은 " + (x+y) +" 야!");
                }
            }
            
            console.log("height" in person);
            
            with(person){
                console.log("키:" + height);
                console.log("몸무게:" + weight);
                console.log("능력:" + fn);
            }
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


객체 생성법에서 사용했던 예제를 in, with 키워드를 사용하였기 때문에

in, with 키워드 부분만 설명하도록 하겠습니다.

console.log("height" in person); 이라고 적어둔곳을 보면 in 키워드를 사용하였습니다.

"height" 속성이 person 객체에 있는지 확인하였고 결과로는 true 가 나온것을 확인할수 있습니다.


           with(person){
                console.log("키:" + height);
                console.log("몸무게:" + weight);
                console.log("능력:" + fn);
            }

with 키워드를 사용하여 person 객체에 접근하여 사용하였습니다.

with 구문 안에 속성 명을 입력하여 속성의 값을 출력하였고

그결과 위와같은 출력결과를 얻을수 있습니다.




 글을 마치며..


요즘 많이 사용하는 프로그래밍언어들은 모두 객체지향 언어입니다.

그렇기 때문에 이번글에서 객체라는 개념을 꼭! 이해하세요.

그래야 나중에 다른언어를 사용하더라도 쉽게 배울수 있습니다.

모두 수고하세요! 


도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 




저작자표시 비영리 변경금지

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[javascript 12강] 내장객체  (0) 2019.02.17
[javascript 11강] 객체 심화  (0) 2019.02.13
[javascript 9강] 함수 심화  (0) 2019.02.12
[javascript 8강] 함수  (0) 2019.02.12
[javascript 7강] 반복문(제어문)  (0) 2019.02.11
댓글