본문 바로가기
개발/javascript & jquery

생활코딩 함수,배열,객체

by areumtb 2016. 12. 29.

- 함수

- return a;   함수의 출력

1.함수종료

2.함수의출력값으로반환 후 종료

   =>  

1
2
3
4
5
6
7
8
function get_member(){
    return 'egoing';
    return 'k8805';
    return 'sorialgi';
}
alert(get_member());
    ==> 'egoing' 출력 후 종료됨
 
cs


- 함수를 정의하는 또 다른 방법

1
2
3
4
5
6
7
8
var numbering = function (){    ===> numbering 변수가 함수를 가지게 되는것임
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
numbering();   ==  function numbering(){} 와 같은것
cs



- 익명함수

1
2
3
4
5
6
(function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
 })();
cs


1.함수정의

2.정의된함수를 ()로 묶음

3.뒤에 (); 바로 실행


==> 익명함수 : 바로실행시 이렇게 사용


- 배열

 배열의 조작

 - 배열의 추가

   

1
2
3
4
5
6
7
8
9
10
//push() : 배열의 끝에 원소를 추가
var li = ['a''b''c''d''e'];
li.push('f');
alert(li); // ['a', 'b', 'c', 'd', 'e','f']
 
//concat() : 복수의 원소를 추가
var li = ['a''b''c''d''e'];
li = li.concat(['f''g']);
alert(li);
 
cs


- 객체 


객체(Object): 일반적으로 JAVA에 MAP(key:value)라고 생각하면 되는것 같다.


객체의 생성 (key:value,key:value...)


1. var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};

2.

var grades = {};
grades['egoing'] = 10;
grades['k8805'] = 6;

grades['sorialgi'] = 80;
3.
var grades = new Object();
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;

※ 객체에는 객체뿐만 아니라 함수도 담을 수 있다. ※

객체의 데이터 꺼내기 : 키 값으로 데이터를 꺼낸다.

1. grades['sorialgi'] => 80

2.grades.sorialgi => 80 (간결해서 일반적으로 많이 사용)

※ 객체에서 데이터를 꺼낼때 1번방법 같은 경우에는

grades['sori'+'algi'] == grades['sorialgi'] 와 같은 안에를 먼저 계산해서('sori'+'algi'='sorialgi')

객체를 찾기 때문에 가능함 그러나 grades.sori+algi 이거는 불가능함.

==> 때에 따라서 사용하면 좋다.


객체와 반복문의 조우

객체를 반복문을 통해 값을 꺼낼시 for(key in grades) {}을 아용해서 반복문을 실행한다.

-for(key in 객체변수명) {객체의 키 값을 이용해서 데이터를 추출}

:객체의 키 (변수명을 바꿀수 있다. key 대신 var name라고 하면 for문 안에서 key가 name으로 바뀜)

ex) for(var name in grades){console.log(name);} ==> key값들이 출력됨

==> 객체의 키 값만큼 반복문을 실행한다.


-- 객체뿐만이 아니라 배열에서도 사용 가능하다.

1
2
3
4
5
6
var li = ['a''b''c''d''e'];
for(key in li){
console.log(li[key]);  ==> a
                           b
                           c .... 출력됨
}
cs




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


객체에 함수담기


- 객체 안에 객체담기

1
2
3
4
5
var grads = {  //  {안에 담긴건 객체 라고 함}
    'list' : {'egoing'10'k8805'6'sorialgi'80};
}
alert(grads[list]); // {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
- 객체 안에 객체꺼내기
alert(grads[list][egoing]) // 10
cs


- 객체안에 함수 담기 

1
2
3
4
5
6
7
8
9
var grads = {  //  {안에 담긴건 객체 라고 함}
    'list' : {'egoing'10'k8805'6'sorialgi'80};
    'show' : function(){
                alert("하이하이");
            }
}
객체안에 함수 불러오기
grads[show]()// 함수는 () 이걸로 호출시킴
 ==> 하이하이
cs

==> js에서는 함수도 하나의 값이고 값으로서의 함수는 객체안에 저장될수있다.


- this

: 함수가 속해있는 객체를 가르키는 변수 (지금 예제에서는)

    

1
2
3
4
5
6
7
8
var grads = {  //  {안에 담긴건 객체 라고 함}
    'list' : {'egoing'10'k8805'6'sorialgi'80};
    'show' : function(){
                console.log(this.list); //{'egoing': 10, 'k8805': 6, 'sorialgi': 80}
this : 지금 이 함수가 속해있는 변수 == grads 
            }
}
grads[show](); 
 ==> Object {'egoing'10'k8805'6'sorialgi'80}  

cs


     - 객체지향프로그래밍


var grades = {
'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
'show' : function(){
for(var name in this.list){
console.log(name,this.list[name]); // , 를 통해 여러가지의 값을 한꺼번에 출력가능하다
}
}
};
grades.show();
==> egoing 10
k8805 6
sorialgi 80


==> 

하나의객체 == grades

객체안에 데이터  == list

그 데이터를 사용하는 함수가 있다. == show

그 함수를 호출할때는 그 객체에 소속되어있는 함수를 호출해서 출력 == grades.show();



grades객체는 객체 안에 list라는 데이터와 show라고하는 함수를 그룹화해서 담고있는 객체

  : list와 show는 서로가 관련성을 가지고 있어야만 그룹화가 가능함


==> 객체지향프로그래밍

연관되어있는값과 연관되어있는 처리를 각 하나의 그룹안에 모아서 그룹핑해놓은것

댓글