JavaScript 함수, 리턴 트랩, 함수 정의, 매개변수 전달, 기본 매개변수, 지역 변수, 전역 변수, 반환 값, 트릭

기능

프로그래밍하는 동안 우리는 종종 여러 곳에서 동일한 코드를 사용해야 합니다. 예를 들어, 사용자 등록, 로그인, 로그아웃 및 로그아웃 코드 조각은 종종 다른 웹 페이지에 존재합니다.

함수를 사용할 수 있도록 이러한 함수 를 사용할 때마다 코드를 다시 작성하는 것은 다루기 힘들 것 입니다.

함수는 코드 조각을 코드 블록으로 캡슐화하고 이 코드 조각에 이름(함수 이름)을 부여할 수 있습니다. 이 코드 조각을 사용해야 할 때마다 함수 이름만 제공하면 됩니다.

함수는 한 번 작성되면 코드를 반복하지 않고 무한히 호출할 수 있습니다.

alert()사실, 우리는 이전의 모든 수업에서 다음 과 같은 함수 prompt()를 사용해 왔습니다 . 이러한 함수는 내장된 함수를 사용하기 위한 편의를 위한 것이며 자체 함수를 생성할 수도 있습니다.confirm()
JavaScript

많은 경우에 우리는 함수를 "메소드"라고 부르며, 함수와 메소드는 종종 같은 의미로 사용되며 본질적으로 둘 사이에는 차이가 없습니다.

함수 정의

함수 정의는 새 키워드를 사용해야 합니다 function. 함수 정의에 대한 구문 규칙은 다음과 같습니다.

function funcName(para1,para2,para3,...){
    
    
	//函数体
}

function키워드는 JavaScript엔진에 이 코드의 의미가 함수를 생성하는 것이고, 함수의 이름은 이고 funcName, 괄호는 매개변수 목록 {}이고, 내용은 함수 본문 임을 알려줍니다 .

예를 들어:

//函数定义的时候不执行
function pow(a,b){
    
    
	let temp = a;
	while(--b){
    
    
		a *= temp;
	}
	console.log(a);
}

위의 코드는 다음을 계산하는 aba^bpow 라는 함수 를 만듭니다.${ㅏ}^{ㄴ}$ . 라인 카운트는 정의될 때 실행되지 않고 호출될 때만 실행됩니다.

예를 들어, $2^{3.}$ 함수를 정의한 후아래와 같이 구현을pow사용할 수pow(2,3)

여기서 거듭제곱 함수 계산 방법은 pow완벽하지 않습니다. 예를 들어 b=-1일 때 무한 루프가 됩니다.

더 많은 지수 계산이 필요한 경우 pow함수를 반복적으로 호출할 수 있습니다. 예를 들면 다음과 같습니다.

//函数定义
function pow(a,b){
    
    
	let temp = a;
	while(--b){
    
    
		a *= temp;
	}
	console.log(a);
}
//函数调用
pow(2,3)//2的3次方
pow(3,4)//3的4次方
pow(4,5)//4的5次方

실행 결과는 다음과 같습니다.

이 예제는 코드 중복을 피하기 위한 함수의 주요 용도 중 하나를 명확하게 보여줍니다.

지역 변수

지역 변수 는 함수 내부에 정의된 변수로 {}, 이러한 변수는 함수 내부에서만 사용할 수 있습니다.

예를 들어, 이전 단원 for의 명령문 내부 변수i

예를 들어:

function doSomething(a,b){
    
    
	let val = prompt('请输入点什么',0);
	console.log(val);
}
doSomething();
alert(val);//ERROR，这里不能使用val

실행 결과는 다음과 같습니다.

변수 val는 함수 내부에 정의되어 있으므로 함수 내부에서만 사용할 수 있으며, 함수 내부에 정의된 변수는 외부에서 사용할 수 없습니다.

외부 변수

함수 외부는 함수 본문 내부에 정의된 변수에 접근할 수 없지만, 함수 본문 내부는 함수 본문 외부에 정의된 외부 변수 에 접근할 수 있습니다 .

밤을 가져 가라:

let val = prompt("请输入点什么",9);
function doSomething(){
    
    
	console.log(val);//使用函数体外的变量没有问题
}
doSomething();

코드 실행 결과는 다음과 같습니다.

사용자가 입력할 때 9를 입력했습니다.

내부 및 외부 변수 이름

내부 변수와 외부 변수의 이름이 같으면 내부 변수가 우선합니다.

밤을 가져 가라:

let num = 1;
function doSomething(){
    
    
	let num = 2;
	console.log(num);//这里使用的是内部变量
}
doSomething();

코드 실행 결과:

변수가 모든 함수 외부에서 선언되면 이 변수는 전역 변수
가 됩니다. 프로그램에 선언된 전역 변수가 너무 많으면 프로그램의 최적 실행에 도움이 되지 않습니다.

매개변수

함수 본문은 완전히 자율적이지 않습니다. 많은 경우에 함수 본문 코드 실행을 시작하려면 특정 입력이 필요합니다. 이 입력이 매개변수 입니다.

예를 들어:

function bless(name,senc){
    
    
	console.log(`祝${
      
      name}${
      
      senc}`)
}

코드 실행 결과:

위의 예에서 우리 bless는 줄 수에 대해 두 개의 매개변수, 즉 이름 name과 축복의 단어를 전달 senc하여 아무 단어나 축복할 수 있습니다.

함수 본문 내부의 변수를 수정하면 외부 변수도 그에 따라 변경됩니까?

예를 들어:

let a = 1;
let b = 2;
function exchange(a,b){
    
    
	let temp = a;
	a = b;
	b = temp;
}
console.log(`a=${
      
      a},b=${
      
      b}`);

코드 실행 결과:

외부변수 asum 의 값 b은 변하지 않았음을 알 수 있다.

그 이유 는 함수에 전달된 매개변수가 변수 자체가 아니라 변수의 복사본이기 때문입니다.

매개변수 기본값

함수를 정의할 때 들어오는 매개변수에 대한 기본값을 설정할 수 있으며, 함수 호출 시 매개변수가 제공되면 기본값이 대신 사용됩니다.

예를 들어:

function bless(name,senc='身体健康'){
    
    
	console.log(`祝${
      
      name},${
      
      senc}.`);
}

bless('特朗普')；

코드 실행 결과:

위의 함수는 두 개의 매개변수가 필요하지만 호출 시 매개변수를 전달해도 사용에 영향을 미치지 않습니다 senc. 함수 정의 시 기본값이 설정되어 있기 때문입니다.

매개변수에 대한 기본값을 설정하지 않았지만 해당 매개변수를 전달하지 않으면 어떻게 됩니까?

예를 들어:

function bless(name,senc){
    
    
	console.log(`祝${
      
      name},${
      
      senc}.`);
}

bless('特朗普')；

코드 실행 결과는 다음과 같습니다.

매개변수를 전달하지 않으면 매개변수가 undefined.

이전 코드의 기본 매개변수

이전 버전에서 매개변수 기본값을 사용하는 방법은 JavaScript무엇입니까?

두 가지 방법이 있습니다.

1. 판단 사용 if:

function doSomething(val){
    
    
	if(val === undefined){
    
    
		val = 'default val';
	}
	... ...
}

2. ||연산자 를 사용

function doSomething(val){
    
    
	val = val || 'default val';
	... ...
}

Null 병합 연산자 적용

현대에도 JavaScript함수 내부에 매개변수를 전달할지 여부를 결정해야 하며, 이전 코드에서 일반적으로 사용되는 위의 두 가지 방법 외에도 null 값 병합 연산자를 사용할 수도 있습니다 ??.

예를 들어:

function doSomething(val){
    
    
	val = val ?? 'unknown';
	... ...
}

반환 값

매개변수는 함수에 대한 입력이고 반환 값 은 함수의 출력입니다.

반환 값은 return키워드를 사용하여 함수의 계산 결과를 함수 본문에 반환해야 합니다.

반환 값의 가장 일반적인 예는 두 숫자의 합을 계산하는 것입니다.

let a = 1;
let b = 2;
function add(a,b){
    
    
	return a + b;
}

let res = add(a,b);

코드 실행 결과:

위의 코드는 두 개의 변수를 더하고 결과를 반환하는 함수를 생성합니다.

함수가 호출 add되면 반환 값을 변수에 할당하여 반환 결과를 얻습니다 res.

null 값을 반환할 수도 있습니다(아무것도 반환하지 않음).

function doSomething(){
    
    
	console.log('return nothing');
	return ;//什么都不返回，程序立即结束
	console.log('after return');
}

doSomething();

코드 실행 결과는 다음과 같습니다.

return그러면 프로그램이 즉시 종료되고 다음 코드가 더 이상 실행되지 않습니다.

함수는 여러 반환 값을 가질 수도 있습니다.

function mulReturn(score){
    
    
	if(score >= 60){
    
    
		return '及格';
	}else{
    
    
		return '不及格';
	}
}
console.log(mulReturn(30));

코드 실행 결과:

여러 개가 있지만 한 번 return에 하나만 선택됩니다.

함수가 아무 것도 반환하지 return ;않거나 return문을 반환하지 않으면 반환 값은 다음과 같습니다.undefined

리턴 트랩

반환 표현식이 길면 다음과 같이 별도의 줄에 넣을 가능성이 큽니다.

return
 (a + b + c + or + c * f(d) + f(e));

JavaScript세미콜론 자동 완성 메커니즘이 추가 return되어 ;함수가 항상 undefined.

긴 반환 값 표현식을 처리해야 하는 경우 어떻게 합니까?

가장 좋은 방법은 괄호를 사용하는 것입니다.

return (
	a + b + c
	+ d + 
	e + f
);

그러면 프로그램에 알 수 없는 오류가 발생하지 않습니다~~

팁

1. 함수는 일반적으로 동작이므로 이름을 지정할 때 "동사 + 명사" 방법을 사용할 수 있으며 낙타 케이스 이름과 결합하여 간결하고 명확한 함수 이름을 얻을 수 있습니다. 예를 들면 다음과 같습니다.

getAge();
showMsg();
createForm();
checkInput();

2. 함수 기능을 단순화합니다. 함수는 한 가지만 수행합니다. 예를 들면 다음과 같습니다.

   • add(a,b)이 함수는 두 개의 숫자를 더하는 기능을 구현하며 다음 alert()과 같은 기능이 있어서는 안 됩니다.
   • checkInput()valid invalid함수는 입력의 유효성을 확인해야 하며 그러한 정보 를 인쇄하지 않아야 합니다.

3. 너무 짧은 함수 이름은 혼동될 수 있습니다. 예를 들면 다음과 같습니다.

function a(){
    
    ...}
function b(){
    
    ...}

그러나 이 범주에 속하지 않습니다 JQuery.$

우리는 주석에서 함수/코드를 작성하고 코드 자체를 단순하고 읽기 쉽게 유지해야 합니다.