[JavaScript] 함수의 호출

함수의 호출


자바스크립트에서 함수는 일종의 객체이다. 객체는 속성을 가지고 있다. 

그 속성에 값이 저장되어 있다면 속성(프로퍼티)라고 한다. 그 속성에 함수가 있다면 메소드라고 한다. 

함수에 대한 기본 수업에서 함수를 호출하는 방법을 알아봤다. 아래는 함수를 호출하는 가장 기본적인 방법이다.


function func(){

// func라는 이름의 함수는 객체이기 때문에 이 함수는 메소드를 가지고 있다. 이 메소드는 자바스크립트에서 만든 것이기 때문에 내장된 객체이다. 

}// func라는 이름의 함수를 정의하면 func.apply/func.call(객체.메소드)--> func라는 함수(객체)를 호출하는 역할을 한다.

func();

JavaScript는 함수를 호출하는 특별한 방법을 제공한다. 본 토픽의 시작에서 함수를 객체라고 했다. 

위의 예제에서 함수 func는 Function이라는 객체의 인스턴스다. 따라서 func는 객체 Function이 가지고 있는 메소드들을 상속하고 있다. 

지금 이야기하려는 메소드는 Function.apply과 Function.call이다. 이 메소드들을 이용해서 함수를 호출해보자. 결과는 3이다.


function sum(arg1, arg2){

    return arg1+arg2;

}

alert(sum.apply(null, [1,2]))

크롬 개발자 도구에서 sum.apply 치면 function apply() {[native code]} 

{[native code]} --> apply는 sum이라는 객체에 담긴 메소드라는 것을 의미/ {[native code]}: apply이라고 하는 메소드가 브라우저에서 여러분에게 제공(내장 메소드)하는 메소드이기에 코드를 보여줄 수 없다.(내장된 코드는 native code라는 것을 표시)


alert(sum(1,2))

alert(sum.apply(null, [1,2]))--> 결과가 둘다 같다. [ ]안에 배열의 순서를 맞추어 인자의 수를 맞춘다.

apply이라는 것은 null의 대상이 객체에 들어있는 값을 넣을 때 사용한다.


함수 sum은 Function 객체의 인스턴스다. 

그렇기 때문에 객체 Function 의 메소드 apply를 호출 할 수 있다. 

apply 메소드는 두개의 인자를 가질 수 있는데, 첫번째 인자는 함수(sum)가 실행될 맥락이다. 

맥락의 의미는 다음 예제를 통해서 살펴보자. 두번째 인자는 배열인데, 이 배열의 담겨있는 원소가 함수(sum)의 인자로 순차적으로 대입된다. 

Function.call은 사용법이 거의 비슷하다 여기서는 언급하지 않는다.


좀 더 흥미로운 예제를 살펴보자. 결과는 6과 185이다.

o1 = {val1:1, val2:2, val3:3}

o2 = {v1:10, v2:50, v3:100, v4:25}

function sum(){

    var _sum = 0;

    for(name in this){// this라는 것은 현재 정해져 있지 않다. 그것은 호출할 때 정해진다.(o1, o2)

        _sum += this[name];

    }

    return _sum;

}

alert(sum.apply(o1)) // 6 --> this의 대상이 된다.(o1.sum())

alert(sum.apply(o2)) // 185 --> this의 대상이 된다.(o2.sum())

apply

예제가 복잡해보이지만 하나씩 분해해서 생각해보면 어렵지 않다.

우선 두개의 객체를 만들었다. o1는 3개의 속성을 가지고 있다. 각각의 이름은 val1, val2,val3이다. o2는 4개의 속성을 가지고 있고 o1과는 다른 속성 이름을 가지고 있고 속성의 수도 다르다.

그 다음엔 함수 sum을 만들었다. 이 함수는 객체의 속성을 열거할 때 사용하는 for in 문을 이용해서 객체 자신(this)의 값을 열거한 후에 각 속성의 값을 지역변수 _sum에 저장한 후에 이를 리턴하고 있다.

객체 Function의 메소드 apply의 첫번째 인자는 함수가 실행될 맥락이다. 이렇게 생각하자. sum.apply(o1)은 함수 sum을 객체 o1의 메소드로 만들고 sum을 호출한 후에 sum을 삭제한다. 아래와 비슷하다. 

(실행결과가 조금 다를 것이다. 그것은 함수 for in문으로 객체 o1의 값을 열거할 때 함수 sum도 포함되기 때문이다.)


o1.sum = sum;

alert(o1.sum());

delete o1.sum();

sum의 o1 소속의 메소드가 된다는 것은 이렇게 바꿔 말할 수 있다. 함수 sum에서 this의 값이 전역객체가 아니라 o1이 된다는 의미다. 

일반적인 객체지향 언어에서는 하나의 객체에 소속된 함수는 그 객체의 소유물이 된다. 하지만 JavaScript에서 함수는 독립적인 객체로서 존재하고, apply나 call 메소드를 통해서 다른 객체의 소유물인 것처럼 실행할 수 있다. 흥미롭다.

만약 apply의 첫번째 인자로 null을 전달하면 apply가 실행된 함수 인스턴스는 전역객체(브라우저에서는 window)를 맥락으로 실행되게 된다.



'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] this  (0) 2014.12.07
[JavaScript] 생성자와 new  (0) 2014.12.07
[JavaScript] 콜백  (0) 2014.12.07
[JavaScript] 값으로서의 함수  (0) 2014.12.07
[JavaScript] 객체  (0) 2014.12.06

[JavaScript] 콜백


콜백


콜백이란 어떠한 함수가 수신하는 인자가 함수인 경우 콜백이라 한다. --> 함수를 정의한 곳의 매개변수(여기서는 인수가 된다. 인자와 인수와 비교)가 함수인 경우를 말한다.


1. 처리의 위임

값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있다. 

값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다. 

인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다.


function sortNumber(a,b){//콜백함수

    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.

    return b-a;

}

var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];

alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

numbers는 객체이다. (배열객체)

sort(sortNumber()); -->sortNumber가 콜백함수이다. 

콜백 함수라는 것을 수신하는 sort 메소드가 콜백함수의 내용을 인자로 전달받아서 내부적으로 호출하는 것을 통해서 sort라는 함수가 동작하는 기본적인 동작방법을 개발자가 변경할 수 있다.

 --> 즉, 값으로써 함수를 사용할 수 있기 때문에 오리지널 함수(sort)의 동작 방법을 개발자가 값을 전달하는 것을 통해서 완전하게 바꿀 수 있다. 

이것이 콜백이다.(콜백이 가능한 이유: 자바스크립트에서는 함수가 값이기 때문이다.)

(여기서 sort는 함수가 아닌 메소드라고 한다.), 배열이나 sort는 자바스크립가 기본적으로 가지고 있는 기능이기에 내장객체, 내장메소드, 빌트인 객체, 빌트인 메소드라 한다. 

우리가 만드는 객체, 메소드, 함수는 사용자 정의 객체, 사용자 정의 함수라 한다.


2. 비동기 처리

cf.) 글작성->이메일 발송-> 작성완료: 순차적작성을 동기식 처리라고 한다. 

글작성하고 이메일 발송 부분은 예약하고 작성완료(to do)를 하면 순식간에 일이 처리된다. 내부적으로는 예약 부분을 백그라운드에서 비동기적으로 처리

웹페이지에 표시되지않은 데이터를 화면에 표시할 수 있는 이유는 내부적으로 화면에 표시된 정보를 서버에 요청해서 화면에 표시한 것이다.(웹페이지 리로드 없이 작업한 것임)

클릭시 웹페이지가 변경되지 않고 서버와 웹브라우저가 조용히 통신하는 기법을 Ajax라고 한다.

콜백은 비동기처리에서도 유용하게 사용된다. 시간이 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다. 

다음 코드는 일반적인 환경에서는 작동하지 않고 서버 환경에서만 동작한다. 동영상을 참고한다.


datasource.json.js


{"title":"JavaScript","author":"egoing"}


demo1.html


<!DOCTYPE html>

<html>

<head>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

</head>

<body>

<script type="text/javascript">

    $.get('./datasource.json.js', function(result){ 

    // 서버와 통신이 끝났을 때 호출되도록 약속된 함수 기재

        console.log(result);

         // 함수를 호출했을때 result라는 매개변수에 담음(json.js에 있는 데이터)

         //--> 이 값을 받아서 다음 작업 할 수 있다.(이러한 것이 가능한 것은 콜백(비즈니스-사용자에게 위임)이라는 것이 있기 때문이다.)

    }, 'json');

</script>

</body>

</html>

서버에서 정보를 가지고와 무슨일을 할 것인가에 대한 것을 사용자에게 위임을 해야 하는데 그 위임하는 기법을 콜백함수를 통해 인자로 전달 받는다. 그래서 get이라는 메소드가 동작하는 방법을 바꿀 수 있다. 



'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] 생성자와 new  (0) 2014.12.07
[JavaScript] 함수의 호출  (0) 2014.12.07
[JavaScript] 값으로서의 함수  (0) 2014.12.07
[JavaScript] 객체  (0) 2014.12.06
[JavaScript] 배열  (0) 2014.12.06

[JavaScript] 값으로서의 함수

값으로서의 함수와 콜백


JavaScript에서는 함수도 객체다. 

다시 말해서 일종의 값이다. 

거의 모든 언어가 함수를 가지고 있다. JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다.

함수역시 변수에 담을수 있다.(var a = function(){})

function a(){} // var a = function( ){ }(함수가 값이므로 가능하다.)

위의 예제에서 함수 a는 변수 a에 담겨진 값이다. 또한 함수는 객체의 값으로 포함될 수 있다. 이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부른다.


a = {

    b:function(){

    }

};//객체는 {에서 }로 끝난다.

함수는 값이고 그렇기 때문에 객체안에 저장될 수 있다 .

객체 안에서 b라는 것은 어떤 값을 저장하고 있는 그릇역할(key-value) b는 그릇안에서 변수와 같은 역할을 하고 있다 (값을 저장하고 있기 때문에)

a라는 변수는 b라는 값이 있는데 그 속성의 값이 함수인데 이 함수를 메소드라고 한다.(객체 안에 저장되어 있는 함수를 메소드라고 부른다.)


cf.) 객체 안에서 변수 역할 하는 것을 프로퍼티(속성)라 한다. 그리고 그 속성에 저장되어 있는 값이 함수라면 메소드라 부른다. 

객체 >변수(프로퍼티) > 함수(메소드)


함수는 값이기 때문에 다른 함수의 인자로 전달 될수도 있다. 아래 예제를 보자.

function cal(func, num){

    return func(num)

}

function increase(num){

    return num+1

}

function decrease(num){

    return num-1

}

alert(cal(increase, 1));

alert(cal(decrease, 1));

10행을 실행하면 함수 increase와 값 1이 함수 cal의 인자로 전달된다. 함수 cal은 첫번째 인자로 전달된 increase를 실행하는데 이 때 두번째 인자의 값이 1을 인자로 전달한다. 

함수 increase은 계산된 결과를 리턴하고 cal은 다시 그 값을 리턴한다.


함수는 함수의 리턴 값으로도 사용할 수 있다.

function cal(mode){

    var funcs = {

        'plus' : function(left, right){return left + right},

        'minus' : function(left, right){return left - right}

    }

    return funcs[mode];//cal('plus')(2,1));로 호출하명 mode는 plus가 된다.

}

alert(cal('plus')(2,1));

alert(cal('minus')(2,1));   


당연히 배열의 값으로도 사용할 수 있다.

var process = [

    function(input){ return input + 10;},

    function(input){ return input * input;},

    function(input){ return input / 2;}

];

var input = 1;

for(var i = 0; i < process.length; i++){

    input = process[i](input);

}

alert(input);





'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] 함수의 호출  (0) 2014.12.07
[JavaScript] 콜백  (0) 2014.12.07
[JavaScript] 객체  (0) 2014.12.06
[JavaScript] 배열  (0) 2014.12.06
[JavaScript] 함수 정의하는 방법  (0) 2014.12.06

[JavaScript] 객체


객체


1. 객체(Object)

객체는 배열이라는 것과 유사한 역할을 한다. 배열은 연관되어 있는 데이터를 담아내기 위한 일종의 그릇이다. 객체 역시도 마찬가지로 그릇이다.

하지만 객체와 배열의 차이는 배열은 index가 자동으로 0부터 할당하여 추가되지만 객체는 index가 문자일 수도 있고 숫자일 수도 있다. (우리가 직접 지정할 수 있다.) 

이 단원에서는 데이터를 담아내는 객체를 설명한다.

지금까지 살펴본 배열은 아이템에 대한 식별자로 숫자를 사용했다. 데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 된다. 

이 인덱스를 이용해서 데이터를 가져오게 되는 것이다. 만약 인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용해야 한다. 

다른 언어에서는 연관배열(associative array) 또는 맵( map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당한다.


2. 객체의 생성

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

(1) 첫번째 방법

var grades = {'test1': 10, 'test2': 6, 'test3': 80};

cf.) 배열은 '['에서 ']'로 끝난다.

위의 예제에서는 객체를 정의하는 문장이다. test1은 key(index)가 되고, 10은 value(index의 값)가 된다. 

변수 grades에 객체를 담아내면 그 변수를 통해 객체를 제어할 수 있다.


(2) 두번째 방법

var grades = {};// 비어있는 객체를 만든다.

grades['test1'] = 10; // 비어있는 객체에 접근하여 []에 index(key)를 부여한다. 그 index의 값(value)은 10이다.

grades['test2'] = 6;

grades['test3'] = 80;


(3) 세번째 방법

var grades = new Object();//'{ }'와 같은 의미

grades['test1'] = 10;

grades['test2'] = 6;

grades['test3'] = 80;


객체를 만들었으니 이제는 객체에서 필요한 값을 가져와보자. 다음은 test2라는 이름(key)으로 저장된 값을 가져오는 법이다. 결과는 80이다.

var grades = {'test1': 10, 'test2': 6, 'test3': 80};

alert(grades['test3']);//alert(grades.test3);와 같다.


다음 방법으로도 객체의 속성에 접근 할 수 있다.

alert(grades.test3);


3. 객체를 다루는 법

다음은 객체에 저장된 데이터를 기준으로 반복작업을 하는 방법이다.

var grades = {'test1': 10, 'test2': 6, 'test3': 80};

for(key in grades) {// grades는 객체이고 key는 객체의 키를 말함, grades라는 변수가 가리키는 그릇에 담겨있는 값들을 반복문이 실행될 때마다 하나씩 하나씩 가져와서 'key'(key값만)에 담는다.

    document.write("key : "+key+" value : "+grades[key]+"<br />");

}

결과는 아래와 같다.

key :   test1 value : 10

key :   test2 value : 6

key :   test3 value : 80


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

반복문이 실행될 때 변수 key의 값으로 test1, test2, test3가 순차적으로 할당되기 때문에 grades[key]를 통해서 객체의 값을 알아낼 수 있다.

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

var grades = {

    'list': {'test1': 10, 'test2': 6, 'test3': 80},// list의 key에 객체를 담는다.

    'show' : function(){// show라는 key에 함수를 담는다.

        for(var name in this.list){

            document.write(name+':'+this.list[name]+"<br />");

        }

    }

};

grades.show();


list라는 key가 있고 그 key안에 담겨있는 값은 또다른 객체이다. alert(grades['list']);로 접근하면 된다.

alert(grades); ==alert(this); ---> alert(this.list);

--> grade라는 객체는 list라는 데이터와 show라는 함수를 하나로 그룹핑한 그릇이다. --> 객체지향 프로그래밍이라 한다.(서로  연관되어 있는 데이터와 연관되어 있는 처리를 하나의 그릇안에 모아서 그룹핑하는 프로그래밍 스타일)

이것은 자바스크립트를 이용한 객체 지향 프로그래밍 기법의 핵심이 되는 성질로 취지에 따라서 로직을 객체에 그룹핑해서 객체라는 부품을 조립해서 소프트웨어라는 완제품을 만들 수 있게 해준다. 





'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] 콜백  (0) 2014.12.07
[JavaScript] 값으로서의 함수  (0) 2014.12.07
[JavaScript] 배열  (0) 2014.12.06
[JavaScript] 함수 정의하는 방법  (0) 2014.12.06
[JavaScript] 비교 ('=='와 '==='의 차이)  (0) 2014.11.29

[JavaScript] 배열

배열


1. 배열

배열(array)이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다. 

아래의 예제를 보자. 변수 name에는 문자 sibal이 할당되었다. 이제부터 name을 호출하면 문자 sibal을 사용할 수 있다.


var name = 'sibal'

alert(name);


2. 배열의 생성

그렇다면 여러 개의 데이터를 하나의 변수에 담아서 관리할 수 있는 방법은 없을까? 있다. 

배열을 쓰면 된다. 변수 member에 회원정보를 담아보자. 대괄호([])는 배열을 만드는 기호다. 대괄호 안에 데이터를 콤마(,)로 구분해서 나열하면 배열이 된다.

var member = ['sibal', 'sibjangsang', 'siberia']

하나의 변수에 3개의 데이터를 담았다. 각각의 데이터를 원소(Element)이라고 부른다. 자 그럼 이 데이터를 꺼내오려면 어떻게 해야 할까? 아래의 예제를 보자.


var member = ['sibal', 'sibjangsang', 'siberia']

alert(member[0]);

alert(member[1]);

alert(member[2]);

결과는 아래의 문자열을 차례로 경고창으로 출력 할 것이다.

sibal

sibjanfsang

siberia


즉 배열에 담겨있는 값을 가져올 때는 대괄호 안에 숫자를 넣는다. 이 숫자를 색인(index)라고 부르고 0부터 시작한다. 

즉 첫번째 원소(sibal)를 가져오려면 대괄호 안에 0을 넣어주어야 한다는 것이다. 두번째는 1, 세번째는 2를 입력한다. 이 값을 이용해서 배열에 저정된 값을 가져올 수 있다.


3. 배열이 없다면

그렇다면 배열이 없다면 어떻게 될까? 예를 들어 맴버의 이름을 제공하는 함수를 제공해야 한다고 해보자. 그런데 함수는 하나의 값만을 반환(return) 할 수 있다. 아래의 예를 보자.

function get_member1(){

    return 'sibal';

}

document.write(get_member1());

 

function get_member2(){

    return 'sibjanfsang';

}

document.write(get_member2());

 

 

function get_member3(){

    return 'siberia'

}

document.write(get_member3());

하나의 함수는 하나의 값만을 반환할 수 있기 때문에 위와 같이 각각의 회원정보를 반환하는 함수를 만들었다.


이번엔 배열를 이용한 아래의 코드를 보자. 맴버를 담고 있는 배열를 반환하고 있다. 간단하지 않은가?

function get_members(){

    return ['sibal', 'sibjanfsang', 'siberia'];

}

var members = get_members();

document.write(members[0]);

document.write(members[1]);

document.write(members[2]);


4. 배열의 사용

배열의 진가는 반복문과 결합했을 때 나타난다. 반복문으로 리스트에 담긴 정보를 하나씩 꺼내서 처리 할 수 있기 때문이다. 다음 예제를 보자

function get_members(){

    return ['sibal', 'sibjanfsang', 'siberia'];

}

members = get_members();

// members.length는 배열에 담긴 값의 숫자를 알려준다. 

for(i = 0; i < members.length; i++){

    // members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해준다.

    document.write(members[i].toUpperCase());   

    document.write('<br />');

}

결과는 아래와 같다.

sibal

sibjangsang

siberia


위의 예제에서 주목해야 할 것은 반복문과 배열을 결합한 부분이다. 반복문을 이용해서 배열 members의 내용을 하나씩 꺼낸 후에 이름의 첫글자를 대문자로 변경한 후에 출력하고 있다. 정리하면, 배열이란 연관된 정보를 하나의 그룹으로 관리하기 위해서 사용한다. 그리고 그 정보를 처리 할 때는 반복문을 이용한다.


5. 배열의 제어

배열은 복수의 데이터를 효율적으로 관리, 전달하기 위한 목적으로 고안된 데이터 타입이다. 따라서 데이터의 추가/수정/삭제와 같은 일을 편리하게 할 수 있도록 돕는 다양한 기능을 가지고 있다. 몇가지 중요한 기능들만 살펴보자.


6. 배열의 크기

아래와 같은 방법으로 배열의 크기를 알아낼 수 있다. 결과는 5이다.

var arr = [1, 2, 3, 4, 5];

alert(arr.length);


7. 배열의 조작

(1) 추가

다음은 배열의 끝에 원소를 추가하는 방법이다. push는 인자로 전달된 값을 배열(li)에 추가하는 명령이다. 배열 li의 값은 a, b, c, d, e, f가 됐다.

var li = ['a', 'b', 'c', 'd', 'e'];

li.push('f');

alert(li);


다음은 복수의 원소를 배열에 추가하는 방법이다. concat은 인자로 전달된 값을 추가하는 명령이다.

var li = ['a', 'b', 'c', 'd', 'e'];

li = li.concat(['f', 'g']);

alert(li);


다음은 배열의 시작점에 원소를 추가하는 방법이다. 배열 li는 z, a, b, c, d, e가 됐다. unshift는 인자로 전달한 값을 배열의 첫번째 원소로 추가하고 배열의 기존 값들의 색인을 1씩 증가시킨다.

var li = ['a', 'b', 'c', 'd', 'e'];

li.unshift('z');

alert(li);


만약 두번째 인덱스 뒤에 대문자 B를 넣고 싶다면 아래와 같이한다. splice는 첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴한다. 그리고 세번째 인자부터 전달된 인자들을 첫번째 인자의 원소 뒤에 추가한다.

var li = ['a', 'b', 'c', 'd', 'e'];

li.splice(2, 0, 'B');

alert(li);


(2) 제거

다음은 배열의 첫번째 원소를 제거하는 방법이다. shift를 사용하면 된다. 아래 결과는 b, c, d, e 다.

var li = ['a', 'b', 'c', 'd', 'e'];

li.shift();

alert(li);


다음은 배열 끝점의 원소를 배열 li에서 제거한다. 이때는 pop를 사용한다. 결과는 a, b, c, d 다.

var li = ['a', 'b', 'c', 'd', 'e'];

li.pop();

alert(li);


(3) 정렬

다음은 정렬하는 방법이다. 결과는 a, b, c, d, e 다.

var li = ['c', 'e', 'a', 'b', 'd'];

li.sort();

alert(li);


역순으로 정렬하고 싶을 때는 아래와 같이 한다.

var li = ['c', 'e', 'a', 'b', 'd'];

li.reverse();

alert(li);




'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] 콜백  (0) 2014.12.07
[JavaScript] 값으로서의 함수  (0) 2014.12.07
[JavaScript] 객체  (0) 2014.12.06
[JavaScript] 함수 정의하는 방법  (0) 2014.12.06
[JavaScript] 비교 ('=='와 '==='의 차이)  (0) 2014.11.29

[JavaScript] 함수 정의하는 방법


함수 정의하는 방법


1. 일반적인 방법

함수는 function 뒤에 함수의 이름이 오고, 소괄호가 따라온다. 소괄호에 인자라는 값이 차례로 들어오는데 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수다. 

인자는 생략 할 수 있다. 함수를 호출 했을 때 실행하게 될 부분이 중괄호 안쪽에 온다.

다음 예제를 보자. 이 함수의 이름은 numbering이고, 내용은 0부터 9까지를 화면에 출력한다.

function numbering(){

    i = 0;

    while(i < 10){

        document.write(i);

        i += 1;

    }   

}

numbering();//함수 호출문장


2. 함수를 변수에 대입하는 방법

자바스크립트는 함수를 정의하는 또 다른 방법을 제공한다. 다음 예제를 보자. 아래 방법은 함수를 정의 하는 또 다른 방법이다.

var numbering = function (){

    i = 0;

    while(i < 10){

        document.write(i);

        i += 1;

    }   

}

numbering();

우항의 함수 정의 문이 좌항의 변수에 대입된 모습/ numbering이란 변수가 함수를 갖게 된다.

numbering();// 변수명으로 호출하는 모습


3. 익명함수

(function(){

 i = 0;

    while(i < 10){

        document.write(i);

        i += 1;

    }   

})();

정의된 함수를 '( )'로 묶고 호출할 때 사용하는 기호인 ( )붙이면 이 함수를 정의하는 것과 정의하는 함수를 바로 호출하는 것을 하나의 문장으로 표현할 수 있다.

--> 익명함수(이름이 필요없고 바로 호출되었기 때문이다.함수를 정의한 후에 바로 호출할 때 괄호 사용(익명함수 사용이유)) 즉, 일회성으로 호출할 때 사용하는 테크닉!!


cp.) 익명함수는 이름이 없기 때문에 주로 변수에 할당되거나 함수 인자의 값 또는 반환값으로 사용된다.

var v = function(x,y){return x+y;};

익명함수를 변수에 할당하는 코드로서, 위 문장을 확장하면 객체의 메서드를 정의하는 방식으로 사용할 수 있다.


o.func(function(x,y){return x+y;});

다른 함수의 인자값으로 익명 함수를 정의해서 전달하는 코드이다. 위 문장을 확장하면 콜백 함수 및 이벤트 핸들링 구조를 구현할 수 있다.


var added = (function(x){return x+y;})(1,2);

익명함수를 정의한 다음 바로 호출하는 구조이다. 익명함수를 이런식으로 호출하는 것은 단 한번 밖에 할 수 없다. 이런 예를 확장해서 프로그램이 시작할 때 스스로 호출되는 자체 호출 함수구조를 표현할 수도 있다.


'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] 콜백  (0) 2014.12.07
[JavaScript] 값으로서의 함수  (0) 2014.12.07
[JavaScript] 객체  (0) 2014.12.06
[JavaScript] 배열  (0) 2014.12.06
[JavaScript] 비교 ('=='와 '==='의 차이)  (0) 2014.11.29

[JavaScript] 비교 ('=='와 '==='의 차이)


비교 ('=='와 '==='의 차이)


1. ==

동등 연산자로 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false가 된다. '='가 두개인 것을 주의하자. '='가 하나인 것은 대입 연산자로 좌항의 값을 우항의 변수에 대입할 때 사용하는 것으로 의미가 완전히 다르다.

alert(1==2)  //false
alert(1==1)  //true
alert("one"=="two") //false
alert("one"=="one") //true

2. ===

일치 연산자로 === 좌항과 우항이 '정확'하게 같을 때 true 다르면 false가 된다. 여기서 정확하다는 말의 의미에 집중하자. 아래 예를보자.

alert(1=='1'); //true
alert(1==='1'); //false

위의 결과는 이상하다. '==='는 숫자 1과 문자 1을 다르게 인식한다. 반면에 '=='는 양쪽의 값을 같다고 판단한다. 바로 이것이 '정확'의 의미다. 즉 ===는 서로 같은 수를 표현하고 있더라도 데이터 형이 같은 경우에만 같다고 판단하기 때문이다. 결론부터 말하면 == 연산자 대신 === 연산자를 쓰는 것을 강력하게 권한다. 몇가지 사례를 더 살펴보자.

alert(null == undefined); //true
alert(null === undefined); //false
alert(true == 1); //true
alert(true === 1); //false
alert(true == '1');  //true
alert(true === '1'); //false
alert(0 === -0); //true
alert(NaN === NaN); //false

null과 undefined는 값이 없다는 의미의 데이터 형이다. null은 값이 없음을 명시적으로 표시한 것이고, 

undefined는 그냥 값이 없는 상태라고 생각하자.

NaN은 0/0과 같은 연산의 결과로 만들어지는 특수한 데이터 형인데 숫자가 아니라는 뜻이다.

'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] 콜백  (0) 2014.12.07
[JavaScript] 값으로서의 함수  (0) 2014.12.07
[JavaScript] 객체  (0) 2014.12.06
[JavaScript] 배열  (0) 2014.12.06
[JavaScript] 함수 정의하는 방법  (0) 2014.12.06