속성과 메소드



객체 내부에 있는 값을 속성(property)라고 한다. 객체의 속성은 모든 자료형이 될 수 있다.


속성중 자료형이 함수인 경우에 이 속성은 특별히 메소드(method)라고 부른다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <script>
        var person = {
            //property
            name : 'jenny',
            years : 24,
            married : false,
 
            //methos
            eat : function(food) {
                alert(this.name + ' eats ' + food); //this키워드 사용
            }
        };
 
        person.eat('apple');
    </script>
cs


this 키워드

객체내의 메소드에서 객체가 가진 속성을 사용하고 싶을때에는 반드시 this키워드를 사용하여야 한다.

자바나 C++은 this 키워드를 생략할 수 있지만, 자바스크립트는 this키워드를 생략할 수 없다.


'개발 > JavaScript' 카테고리의 다른 글

[JavaScript] textContent, innerText, innerHTML 비교  (0) 2021.04.18
[JavaScript] in, with 키워드  (0) 2018.07.08
[JavaScript] 객체  (2) 2018.07.06
[JavaScript] 클로저  (0) 2018.06.21
[JavaScript] 콜백함수  (0) 2018.06.21

객체


 

객체의 생성 및 접근

 

객체는 key와 value로 이루어져 있다. 그러므로 객체를 생성할 때 key와 value값을 이용한다.

 

 

 

1
2
3
4
5
6
7
        var book = {
            name : 'harry potter',
            author : 'J.K Rolling',
            page : 300,
            code : '2523ab11',
            'How many' : 15
        };
cs

 

 

 

위와 같이 중괄호 { } 안에 key와 value값을 이용해서 객체를 생성하면 된다.

 

key값은 문자열이나 식별자(변수이름과 비슷)를 사용한다. 대부분 식별자를 사용하지만, 띄어쓰기가 있는 것과 같은 식별자로 사용할 수 없는 단어를 사용

 

할 때는 문자열을 사용한다.

 

value값으로는 모든 자료형이 들어갈 수 있다. 

 

생성된 객체에 접근할 때는 배열의 인덱스를 이용하는 방법처럼 접근하는 방법과 .을 이용해서 접근할 수 있다.

 

1
2
3
4
5
6
7
8
        alert(book[name]);
        alert(book[author]);
 
        alert(book.name);
        alert(book.author);
 
        //alert(book.How many);
        alert(book['How many']);
cs

 

위의 코드와 같이 객체이름 옆 대괄호에 key값을 넣어 사용해도 되고, . 연산자를 이용해서 접근할 수도 있다.

 

단, key값이 식별자가 아니라 위 코드의 'How many'와 같이 문자열일 경우에는 반드시 대괄호를 사용해야만 객체의 요소에 접근 할 수 있다.

 

'개발 > JavaScript' 카테고리의 다른 글

[JavaScript] in, with 키워드  (0) 2018.07.08
[JavaScript] 객체의 속성과 메소드  (0) 2018.07.08
[JavaScript] 클로저  (0) 2018.06.21
[JavaScript] 콜백함수  (0) 2018.06.21
[JavaScript] 내부함수와 자기호출함수  (0) 2018.06.20

클로저



클로저는 내부함수가 외부함수의 지역변수에 접근할 때 내부함수가 소멸되기 전까지 내부함수가 접근한 지역변수가 소멸되지 않는 현상을 말한다.


원래 외부함수 내에 정의된 지역변수는 외부함수가 호출되고나서 소멸되면 함께 소멸되어야 하지만, 내부함수가 그 지역변수에 접근하고 있다면,


그 내부함수가 소멸되기 전까지 지역변수는 소멸되지 않는데 이러한 메커니즘을 클로저라고 한다.


클로저의 정의는 다양하다.


 1. 외부함수의 지역변수를 남겨두는 현상.


 2. 외부함수 내의 변수가 살아있는 것이기 때문에, 외부함수로 인해 생겨난 공간.


 3. 리턴된 내부함수 자체.


 4. 살아남은 외부함수 내의 지역변수 자체.


위의 정의들 모두 클로저와 관련된 개념이라고 볼 수 있다.


<script>
function closer(name) {
var output = 'My name is ' + name;
return function() {
alert(output);
}
};

//alert(output);

var test1 = closer('Lee');
test1();
</script>


함수 closer의 지역변수 output은 함수가 호출되고 나면 소멸되어 외부에서 접근할 수가 없다. 


그래서 주석처리된 문장을 실행할 경우에는 오류가 발생한다.


하지만 리턴하는 내부함수인 익명함수가 변수 output을 사용하고 있다.


따라서, 리턴된 익명함수를 변수 test1에다가 저장하고 test1을 이용해서 저장된 함수를 호출하면 변수 output이 소멸되지 않고 있음을 알 수 있다.


이것이 바로 클로저이다.


아래의 코드를 살펴보면 클로저의 특징을 좀 더 알 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <script>
        function music_artist(artist) {
            return {
                get_music : function() {
                    return artist;
                },
                set_music : function(_artist) {
                    artist = _artist;
                }
            }
        }
 
        var rock = music_artist('Beatles');
        var dance = music_artist('Lady Gaga');
 
        alert(rock.get_music());    //Beatles 출력
        alert(dance.get_music());   //Laydy Gaga 출력
 
        rock.set_music('Oasis');
 
        alert(rock.get_music());    //Oasis 출력
        alert(dance.get_music());   //Laydy Gaga 출력
    </script>
cs


 1. 함수 music_artist가 함수가 아닌 메소드를 가진 객체를 반환하고 잇다. 클로저는 객체를 반환 할 때도 사용할 수 있다.

    지역변수인 artisit를 객체 내부에 있는 두개의 메소드에서 사용함으로써 클로저를 사용하고 있다.


 2. 13행과 14행에서 두개의 변수가 동일한 함수 music_artist의 리턴값을 저장하고 있지만 16행과 17행에서 각각의 결과는 다르다.

    즉, 외부함수가 실행 될 때마다 새로운 지역변수를 가진 클로저가 생성된다는 것을 알 수 있다.


 3. 19행에서 set_music메소드를 호출하여 지역변수의 값을 바꾼뒤, 21행에서 get_music메소드를 호출 하였더니

     set_music메소드로 변경한 지역변수 값이 출력되었다.

     이를 통해서 하나의 외부함수 내에 정의된 내부함수나 메소드는 외부함수의 지역변수를 공유한다는 것을 알 수 있다.


 4. 외부함수 music_artist의 지역변수 artist는 내부에 정의된 메소드를 통해서만 값을 변경하거나 사용할 수 있다.

    이는 클로저를 통해서 자바스크립트에서 Private한 속성을 사용할 수 있게 해준다.

'개발 > JavaScript' 카테고리의 다른 글

[JavaScript] 객체의 속성과 메소드  (0) 2018.07.08
[JavaScript] 객체  (2) 2018.07.06
[JavaScript] 콜백함수  (0) 2018.06.21
[JavaScript] 내부함수와 자기호출함수  (0) 2018.06.20
[JavaScript] 가변인자함수  (0) 2018.06.20

+ Recent posts