목차

기본 구문편
오브젝트편
함수편

함수와 그 정의

함수란 무엇인가의 해설에 관해서는 여러분하고 있는 것으로 해, JavaScript에 있어서의 함수의 정의 방법에 대해서 여기서는 써 가고 싶습니다.

function 명령어로 정의

function fncName (para,...) {
    return para;
}

같은 형태로 function 명령으로 정의할 수 있다.

function 생성자로 정의

Function 객체를 new 하면 이용할 수 있다.

var fncName = new Function(para, ... ,'return para;');
//省略
var fncname = Function(para, ... ,'return para;');

이 경우 가장 마지막 인수는 함수 본문입니다.

함수 리터럴에서의 정의

정상적인 경우

var fncName = function (para1,para2) {
    return para1 + para2;
}
console.log( fncName(1,2) );

화살표 함수로 정의

let fncName = (para1,para2) => {
    return para1 * para2;
}
//または
let fncName = (para1,para2) => para1 * para2;

//引数が1つの場合
let fncName = para1 => para1　*2;

//引数のない場合
let fncName = () => console.log('hey');

함수 정의의 주의점

return 직후의 개행은 안됨

return의 뒤에서 개행을 하면 당연한 일이지만 괜찮은 것이 돌아오지 않고, undefined가 돌아온다.

함수는 데이터 타입의 일종

기초의 시간에 썼지만, 함수도 데이터형의 일종이 됩니다. 따라서 대입이 가능해집니다 (PHP라든지 Go에서 들어온 나에게는 조금 이해할 수 없었다)

function 명령은 정적 구조를 선언

function명령의 경우는 컴파일이나 코드 해석의 타이밍으로 함수를 정의하므로 코드내 구조의 일부로 취급하고 있다.

함수 리터럴과 Function 생성자는 런타임 평가

function명령에 비해 이 2개는 실행전에 선언하지 않으면 동작하지 않는다. 결국 이들은 런타임에 평가됩니다.

변수의 범위

//var宣言あり
var scope = 'グローバル';

function local () {
    var scope = 'ローカル';
    return scope;
}

console.log(local());
console.log(scope);
//var宣言なし
scope = 'グローバル';

function local () {
    scope = 'ローカル';
    return scope;
}

console.log(local());
console.log(scope);

변수에는 스코프가 있어, function 밖에서 선언되면 글로벌, 또 내부에서 선언되면 로컬의 취급을 받는다.
더 이상 var의 선언을 하지 않는 경우, 이들은 모두 글로벌 변수의 취급을 받기 때문에 변수의 오염과 연결된다. 따라서 var에서의 선언은 원칙적으로 필요하다.
또 함수내에서는 외부에서 정의된 글로벌 변수가 다른 언어와 같이 스코프로부터 벗어나기 때문에 함수내에서 사용하는 값은 인수, 또는 먼저 정의하는 것이 중요하다.

블록 레벨 범위

ES6 이전에는 존재하지 않았던 블록 레벨의 스코프가 이 ES6에서는 이용 가능하게 되었다.
그것이 ES6 보다 추가되었다 let 선언으로, 이 let 선언은 블록내(if나 while 등)로 이용하면 그 블록내만의 스코프가 되어 블록 레벨의 스코프가 가능하게 됩니다.

if (1) {
    let i = 5;
    console.log(i);
}
console.log(i);//ここでエラー

지금까지는 스코프의 오염 등을 막는 목적으로 이용되어 온 즉각적인 함수가 ES6 이후는 필요 없게 된다.

*switch에서 let을 사용할 때는 switch내에서의 재선언이 되므로 명령 위반이 될 가능성도 있다.

인수

ES6 이전

인수의 수는 체크하지 않는다

JavaScript에서는 사용자 정의 함수에서 인수의 수는 체크하지 않는다. 그 이유로서 가인수로 놓인 인수는 그대로 처리되지만, 많은 인수는 잘림이 행해진다. 잘림이 발생해도 결과는 변함없이 반환됩니다.

인수의 수를 도모한다

function fnc (val) {
    var argLen = arguments.length;//argumentsが引数を表す
    console.log(argLen);
}
fnc();

ES6

인수의 기본값

function fnc (val_A = 1, val_B = 1) {
    return val_A * val_B;
}

디폴트치를 설정하는 경우 null나 false등을 인수에 주고 싶은 (0이나 없음으로서의 의미)로 넣는 경우 undefined를 넣으면 좋다.

가변 길이 인수

function sum (...nums) {
    let result = 0;
    for (let num of nums) {
        if (typeof num !== 'number') {
            throw new Error('指定した値は数値ではありません'+num);
        }
        result += num;
    }
    return result;
}
sum(1, 2, 10);

반환값

여러 반환 값을 어떻게 든 반환하는 방법

funcion getMinMax(...nums) {
    return [Math.max(...nums), Math.min(...nums)];//配列で返す
}

고층 함수

이 함수 정의는 함수의 인수에 함수를 건네주는 함수. (함수 자체가 데이터 유형이므로 인수에 사용할 수 있음)

function arrayWalk (data, f){
    for(var key in data) {
        f(data[key],key)
    }
}
//コールバック関数
function showElement (val,key) {
     console.log(key+':'+val);
}
var ary = [1, 2, 3, 4, 5]
arrayWalk(ary, showElement);

이 특성을 이용하여 익명 함수를 이용하여 일회용 함수 등의 구현도 가능하다.

참고 자료

학습에 사용하는 책
개정 신판 JavaScript 본격 입문 ～모던 스타일에 의한 기초부터 현장에서의 응용까지
모질라