JavaScript에서 함수를 정의하는 방법 소개

이 글에서는 JavaScript함수 정의 관련 내용을 주로 소개합니다. 필요하신 분들은 참고하시면 됩니다

자바스크립트에서 함수를 정의하는 방법은 다음과 같습니다.

function abs(x) {
 if (x >= 0) {
  return x;
 } else {
  return -x;
 }
}

위의 abs 정의 () 함수는 다음과 같습니다.

• longfunction은 이것이 함수 정의임을 나타냅니다.

• longabs는 함수의 이름입니다. 괄호

  안에 있으며 여러 매개변수는

• litz{ ... } 사이의 코드로, 여러 문을 포함하거나 심지어 문이 없을 수도 있는 함수 본문입니다.

• 함수 본문 안의 명령문이 실행될 때 return이 실행되면 함수가 실행되고 결과가 반환된다는 점에 유의하세요. 따라서

  조건 판단

  과 루프를 통해 함수 내부에서 매우 복잡한 논리를 구현할 수 있습니다.

return 문이 없으면 함수 실행 후 결과가 반환되지만 결과는 정의되지 않습니다.

자바스크립트 함수도 객체이기 때문에 위에서 정의한 abs() 함수는 실제로는 함수 객체이고, 함수명인 abs는 함수를 가리키는 변수라고 볼 수 있습니다.

그래서 함수를 정의하는 두 번째 방법은 다음과 같습니다.

var abs = function (x) {
  if (x >= 0) {
    return x;
  } else {
    return -x;
  }
};

이런 식으로 함수 (x) { ... }는 함수 이름이 없는

익명 함수

입니다. 하지만 이 익명함수는 변수 abs에 할당되어 있으므로, 변수 abs를 통해 함수를 호출할 수 있습니다.

위의 두 정의는 완전히 동일합니다. 두 번째 방법에서는 전체 구문에 따라 함수 본문 끝에 ;를 추가하여 할당 문의 끝을 표시해야 합니다.

함수 호출

함수를 호출할 때 매개변수를 순서대로 전달하세요.

abs(10); // 返回10
abs(-9); // 返回9

JavaScript에서는 호출에 영향을 주지 않고 원하는 만큼의 매개변수를 전달할 수 있으므로 매개변수는 전달됩니다. 정의된 매개변수보다 큽니다. 더 많은 매개변수가 있어도 문제가 없습니다. 단, 함수 내에서는 이러한 매개변수가 필요하지 않습니다.

abs(10, 'blablabla'); // 返回10
abs(-9, 'haha', 'hehe', null); // 返回9

정의된 매개변수보다 전달된 매개변수 수가 적더라도 문제가 없습니다.

abs(); // 返回NaN

이때, abs(x) 함수의 매개변수 x는 Undefine이 되어 NaN으로 평가되었습니다.

정의되지 않은 수신을 방지하려면 매개변수를 확인하세요.

function abs(x) {
  if (typeof x !== 'number') {
    throw 'Not a number';
  }
  if (x >= 0) {
    return x;
  } else {
    return -x;
  }
}

arguments

JavaScript에는 함수 내에서만 작동하고 항상 전달된 현재 모든 매개변수를 가리키는 무료 키워드 인수도 있습니다. 함수 호출자에 의해. 인수는 배열과 유사하지만 배열이 아닙니다.

function foo(x) {
  alert(x); // 10
  for (var i=0; i<arguments.length; i++) {
    alert(arguments[i]); // 10, 20, 30
  }
}
foo(10, 20, 30);

인수를 사용하면 호출자가 전달한 모든 매개변수를 얻을 수 있습니다. 즉, 함수가 매개변수를 정의하지 않더라도 매개변수의 값을 얻을 수 있습니다.

function abs() {
  if (arguments.length === 0) {
    return 0;
  }
  var x = arguments[0];
  return x >= 0 ? x : -x;
}
abs(); // 0
abs(10); // 10
abs(-9); // 9

사실 인수는 전달된 매개변수의 수를 결정하는 데 가장 일반적으로 사용됩니다. 다음과 같이 쓰는 것을 볼 수 있습니다:

// foo(a[, b], c)
// 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null：
function foo(a, b, c) {
  if (arguments.length === 2) {
    // 实际拿到的参数是a和b，c为undefined
    c = b; // 把b赋给c
    b = null; // b变为默认值
  }
  // ...
}

중간 매개변수 b를 "선택적" 매개변수로 변경하려면 인수를 통해서만 판단한 다음 매개변수를 다시 조정하고 값을 할당하면 됩니다.

나머지 매개변수

JavaScript 함수에서는 모든 매개변수 수신을 허용하므로 모든 매개변수를 가져오려면 인수를 사용해야 합니다.

function foo(a, b) {
  var i, rest = [];
  if (arguments.length > 2) {
    for (i = 2; i<arguments.length; i++) {
      rest.push(arguments[i]);
    }
  }
  console.log(&#39;a = &#39; + a);
  console.log(&#39;b = &#39; + b);
  console.log(rest);
}

정의된 매개변수 a와 b 이외의 매개변수를 가져오려면, 인수를 사용해야 하며 처음 두 매개변수를 제외하기 위해 루프는 인덱스 2에서 시작해야 합니다. 추가 나머지 매개변수를 얻으려면 매우 어색합니다.

ES6 표준에는 나머지 매개변수가 도입되었습니다. 위 함수는 다음과 같이 다시 작성할 수 있습니다.

function foo(a, b, ...rest) {
  console.log('a = ' + a);
  console.log('b = ' + b);
  console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

나머지 매개변수는 끝에만 쓸 수 있습니다.

앞에...가 표시되어 있습니다. 들어오는 매개변수가 먼저 바인딩되는 결과 a와 b를 정의하면 추가 매개변수가 배열 형식으로 나머지 변수에 제공되므로 인수 없이 모든 매개변수를 얻습니다.

전달된 매개변수가 일반적으로 정의된 매개변수로 채워지지 않더라도 상관없습니다. 나머지 매개변수는 빈 배열을 받게 됩니다(정의되지 않은 것이 아니라는 점에 유의하세요).

나머지 매개변수는 ES6의 새로운 표준이기 때문에 브라우저가 이를 지원하는지 테스트해야 합니다. 나머지 매개변수가 포함된 sum() 함수를 작성하고 원하는 수만큼 매개변수를 받고 해당 합계를 반환하세요. Top of the form

'use strict';
// 测试:
var i, args = [];
for (i=1; i<=100; i++) {
  args.push(i);
}
if (sum() !== 0) {
  alert(&#39;测试失败: sum() = &#39; + sum());
} else if (sum(1) !== 1) {
  alert(&#39;测试失败: sum(1) = &#39; + sum(1));
} else if (sum(2, 3) !== 5) {
  alert(&#39;测试失败: sum(2, 3) = &#39; + sum(2, 3));
} else if (sum.apply(null, args) !== 5050) {
  alert(&#39;测试失败: sum(1, 2, 3, ..., 100) = &#39; + sum.apply(null, args));
} else {
  alert(&#39;测试通过!&#39;);
}

반환문에 주의하세요

JavaScript에 대해 이야기했습니다. 엔진 이전 줄 끝에 세미콜론을 자동으로 추가하는 메커니즘, 이로 인해 return 문에 큰 함정에 빠질 수 있습니다:

function foo() {
  return { name: 'foo' };
}
foo(); // { name: 'foo' }

return 문을 두 줄로 나누면:

function foo() {
  return
    { name: 'foo' };
}
foo(); // undefined

조심하세요. JavaScript 엔진은 자동으로 줄 끝에 세미콜론을 추가하기 때문입니다. 위 코드는 실제로 다음과 같습니다.

function foo() {
  return; // 自动添加了分号，相当于return undefined;
    { name: 'foo' }; // 这行语句已经没法执行到了
}

따라서 여러 줄을 작성하는 올바른 방법은 다음과 같습니다.

function foo() {
  return { // 这里不会自动加分号，因为{表示语句尚未结束
    name: 'foo'
  };

练习

定义一个计算圆面积的函数area_of_circle()，它有两个参数：

r: 表示圆的半径；

pi: 表示π的值，如果不传，则默认3.14

위 내용은 JavaScript에서 함수를 정의하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!