JavaScript 기본 매개변수:초보자 가이드

기본 매개변수를 사용하면 함수 작업이 훨씬 쉬워집니다. 기본 매개변수를 사용하면 지정하지 않은 경우에 어떤 매개변수를 사용해야 하는지 함수에 알릴 수 있습니다. 이렇게 하면 오류를 방지하고 코드를 더 읽기 쉽게 만들 수 있습니다.

JavaScript는 ES2015에서 기본 매개변수를 도입했습니다. 이를 통해 미리 정의된 값으로 함수를 초기화할 수 있습니다.

이 가이드에서는 기본 매개변수가 무엇인지, 어떻게 사용하는지, 기본 매개변수로 지정할 수 있는 표현식 유형에 대해 설명합니다. 시작하는 데 필요한 모든 코드를 얻을 수 있도록 몇 가지 예를 살펴보겠습니다.

매개변수 대 인수:전투

시작하기 전에 초보자의 오래된 질문에 답해 보겠습니다. 매개변수와 인수의 차이점은 무엇입니까? JavaScript에서 기본 매개변수로 작업을 시작하기 전에 차이점을 알아야 합니다.

매개변수는 JavaScript 함수에 전달하는 명명된 변수입니다. 매개변수에는 직접 값이 할당되지 않습니다. 함수에 전달할 값의 자리 표시자입니다. 다음은 매개변수의 예입니다.

function sayHello(name) {
	console.log("Hello, " + name);
}

이 예에서 "이름"은 매개변수입니다. 할당된 값이 없습니다.

반면에 인수는 함수에 전달되는 값입니다.

sayHello("Brett");

코드는 "Hello, Brett"를 반환합니다. "Brett"은 함수를 통해 전달한 값인 인수의 예입니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

모든 매개변수를 지정하지 않고 함수를 호출하면 오류가 발생할 수 있습니다.

sayHello()

코드는 다음을 반환합니다. Hello, undefined . 함수에 값을 전달하지 않았기 때문입니다.

자바스크립트 기본 매개변수

기본 매개변수를 지정하여 이 문제를 극복할 수 있습니다. 기본 매개변수를 사용하면 아무 것도 지정하지 않은 경우 매개변수에 할당할 값을 지정할 수 있습니다.

기본값 할당은 할당 연산자를 사용합니다.

function sayHello(name="World") {
	console.log("Hello, " + name);
}

sayHello();

코드는 다음을 반환합니다. Hello, World . 이 예에서 인수를 지정하지 않았음을 알 수 있습니다. 대신 기본 함수 매개변수를 설정했습니다. 이 경우 인수가 지정되지 않을 때마다 함수의 "name" 매개변수 값은 "World"가 됩니다.

값이 지정되었는지 여부를 수동으로 확인하는 것보다 훨씬 쉽습니다.

기본 매개변수는 값으로 할당된 모든 기본 값 또는 개체를 가질 수 있습니다. 다음은 유효한 기본 매개변수의 몇 가지 예입니다.

• 문자열:"라떼"
• 번호:2.40
• 부울:참
• 배열:[“스티븐”, 거짓]
• 객체:{이름:"스티븐", 충성도고객:거짓 }

여러 기본 매개변수 지정

함수에서 지정할 수 있는 기본 매개변수의 수에는 제한이 없습니다. 다음 코드를 고려하십시오.

function createOrder(coffee="Espresso", price=1.75) {
	console.log("Order: " + coffee);
	console.log("Price: $" + price);
}

createOrder();

코드 반환:

Order: Espresso
Price: $1.75

이 예에서는 두 개의 기본 매개변수인 커피와 가격을 지정했습니다. 기본 매개변수와 일반 매개변수 간에 지정한 매개변수를 혼합할 수도 있습니다. 이 작업을 수행할 때 기본 매개변수 앞에 일반 매개변수를 배치해야 합니다. 다음 예를 고려하십시오.

function createOrder(coffee, price=1.75) {
	console.log("Order: " + coffee);
	console.log("Price: $" + price);
}

createOrder("Cappuccino");

코드 반환:

Order: Cappuccino
Price: $1.75

우리는 하나의 인수인 카푸치노를 지정했습니다. 이것은 우리가 주문한 커피의 이름입니다. 이 매개변수에 대한 기본값을 지정하지 않았기 때문에 인수 값을 지정해야 합니다. 그렇지 않으면 "정의되지 않음"이 반환됩니다.

"price"의 기본값은 "1.75"여야 한다고 선언했습니다. 이 기본 매개변수를 설정하기 때문에 가격을 지정하지 않을 때마다 자동으로 "1.75"로 설정됩니다.

기본 매개변수보다 먼저 일반 매개변수를 지정하는 것이 중요합니다. 이는 일반 매개변수의 값이 함수 호출에 나타나는 순서대로 할당되기 때문입니다.

기본 매개변수로서의 기능

함수는 기본 매개변수로 설정할 수 있습니다. 이것은 함수에 전달하려는 값이 다른 함수를 사용하여 계산되는 경우에 유용합니다.

다음 코드 스니펫에서는 비디오 게임에서 새 플레이어의 의사 난수 사용자 이름을 생성하는 함수를 만들 것입니다.

function getRandomUsername() {
	var number = Math.floor(Math.random() * 100);
	var username_list = ['Crash', 'Steve', 'Lucinda', 'Ellie'];
	var username = username_list[Math.floor(Math.random() * username_list.length)];
	var final_username = username + number;

	return final_username;
}

function createUser(username = getRandomUsername(), email) {
	console.log('Your username is: ' + username);
	console.log('Your email is: ' + email);
}

createUser('[email protected]');

코드 반환:

Your username is: Crash87
Your email is: [email protected]

코드를 분해해 보겠습니다.

getRandomUsername()이라는 함수를 선언했습니다. 의사 무작위 사용자 이름을 생성합니다. 이것은 난수를 생성하고 4개의 사용자 이름 목록에서 무작위로 하나의 사용자 이름을 선택하여 작동합니다. 그런 다음 사용자 이름 끝에 임의의 숫자가 추가됩니다. 이 함수는 새로 생성된 사용자 이름을 반환합니다.

createUser에서 함수에서 "username" 매개변수의 기본값을 getRandomUsername()과 동일하게 설정했습니다. 함수. 즉, 새 사용자의 사용자 이름을 지정하지 않을 때마다 임의의 사용자 이름이 생성됩니다.

그런 다음 코드는 사용자의 사용자 이름과 이메일 주소를 콘솔에 출력합니다.

결론

기본 매개변수를 사용하면 함수 호출에서 매개변수가 인수로 지정되지 않은 경우 매개변수에 할당될 값을 설정할 수 있습니다. 기본 매개변수는 함수를 읽기 쉽게 만들고 값이 함수에 전달되지 않을 때 발생할 수 있는 문제를 줄이는 데 도움이 됩니다.

이제 전문가처럼 JavaScript 기본 매개변수로 작업할 준비가 되었습니다!