Recent Posts
Recent Comments
Link
Tags more
11-22 00:01
Today
Total
관리 메뉴

삶 가운데 남긴 기록 AACII.TISTORY.COM

javascript 함수2 본문

DEV&OPS/Javascript

javascript 함수2

ALEPH.GEM 2022. 2. 21. 17:01

네임 스페이스(name space)

전역 유요 범위 안에 함수나 변수 객체들을 선언하면 라이브러리나 규모가 큰 프로그램을 만들 때 이름이 겹칠 우려가 있습니다. 

네임 스페이스는 변수 이름과 함수이름을 한 곳에 모아서 충돌을 방지하는 방법입니다.

 

객체를 네임 스페이스로 활용

객체를 전역 변수로 하나 생성하고 그 객체에 프로그램 전체에서 사용하는 모든 변수와 프로퍼티를 정의하는 방법입니다.

 

함수를 네임 스페이스로 활용

함수 안에서 선언된 변수의 유효 범위는 함수 내부이기 때문에 함수 바깥에서는 읽거나 쓸 수 없는 성질을 이용하는 방법입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> 함수로 네임 스페이스 관리</title>
    <script>
        var x = "global var x";
        (function(){
            var x = "local var x";
            var y = "local var y";
        })();
        console.log(x);     /* global var x */
        console.log(y);     /* Uncaught ReferenceError: y is not defied */
    </script>
</head>
<body>

</body>
</html>

 

모듈 패턴

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> 모듈 패턴으로 네임스페이스 관리 </title>
    <script>
        var Module = Module || {};
        (function(_Module){
            var name = "No Name";   /* private 변수 */
            /* private 함수 */
            function getName(){
                return name;
            };
            /* public 함수 */
            _Module.showName = function(){
                console.log(getName());
            };
            /* public 함수 */
            _Module.setName = function(x){
                name = x;
            };
        })(Module);
        Module.setName("Marry");
        Module.showName();      //Marry
    </script>
</head>
<body>
<div>showName 메서드는 getName을 참조하고 있고 setName 메서드는 name을 참조하고 있습니다.</div>
<div>지역변수 name과 지역함수 getNmae은 클로저의 내부 상태로 저장됩니다.</div>
</body>
</html>

 

일급 객체

  • 변수나 프로퍼티(멤버)나 배열 요소에 할당 할 수 있음.
  • 함수의 인수로 사용할 수 있음.
  • 함수의 리턴값으로 사용할 수 있음.
  • 프로퍼티와 메서드를 가질 수 있음.
  • 이름없는 익명 리터럴로 표현할 수 있음.
  • 동적으로 생성 할 수 있음.
자바스크립트 함수는 일급 객체 입니다.
그래서 함수형 프로그래밍이 가능합니다.
함수는 Function 생성자의 prototype 객체의 프로퍼티를 상속받습니다.

 

apply() 와 call()

선택한 this와 인수를 사용하여 함수를 호출합니다.

차이점은 apply의 인수는 배열이고 call의 인수는 쉼표로 구분한 값의 목록입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> apply와 call</title>
    <script>
        function say(greetings, honorifics){
            console.log(greetings + " " + honorifics + this.name);
        }
        var tom = {name: "Tom"};
        var becky = {name: "Becky"};
        say.apply(tom, ["Hello","Mr."]);        /* Hello Mr.Tom */        
        say.call(becky, "hi!", "Ms.");          /* hi! Ms.Becky */
    </script>
</head>
<body>

</body>
</html>

 

bind()

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> bind</title>
    <script>
        function say(greetings, honorifics){
            console.log(greetings + " " + honorifics + this.name);
        }
        var tom = {name: "Tom"};
        var sayToTom = say.bind(tom);
        sayToTom("Hello","Mr.");		/* Hello Mr.Tom */
    </script>
</head>
<body>

</body>
</html>

 

고차 함수

함수형 프로그래밍 처럼 한수를 인수로 받거나 함수를 리턴하는 함수를 말합니다.

 

콜백 함수

자바스크립트에서는 콜백 함수를 매우 많이 사용합니다.

예를들어 이벤트 핸들러가 대표적인 콜백 함수 입니다.

특정 이벤트가 발생 하면 실행되도록 등록하는 함수가 콜백 함수 입니다.

button.addEventListener("click", function() { alert("경고"); }, false);

 

 

 

 

 

 

 

 

 

 

 

 

728x90
저작자표시

'DEV&OPS > Javascript' 카테고리의 다른 글

javascript prototype  (0) 2022.02.23
javascript ECMAScript 6부터 추가된 함수와 객체의 기능  (0) 2022.02.21
javascript 함수  (0) 2022.02.21
javascript 브라우저 입출력  (0) 2022.02.21
javascript Expression  (0) 2022.02.21
'DEV&OPS/Javascript' Related Articles more