JavaScript 함수 사용 방법:단계별 가이드

자바스크립트 함수는 재사용할 수 있는 사용자 정의 코드 블록입니다. 함수를 사용하면 코드를 보다 모듈화할 수 있으며 객체 지향 프로그래밍에 필수적입니다. 함수는 선언이나 표현식을 통해 정의할 수 있습니다.

JavaScript를 배우려고 하고 기본 사항을 알고 싶다면 JS 함수는 확실히 알아야 할 것입니다. 프로그래밍 언어로 작업한 적이 있다면 함수가 복잡한 프로그램의 구성 요소라는 것을 알지만 어떻게 작동하는지 모를 수 있습니다. 함수를 사용하면 여러 번 반복하는 대신 공통 프로세스에 대해 한 번 코드를 작성할 수 있습니다.

함수는 작업을 수행하고 값을 반환할 수 있는 코드 블록입니다. 기능은 필요에 따라 사용자 정의할 수 있으며 코드를 보다 효율적이고 모듈화하는 데 사용할 수 있습니다.

이 튜토리얼에서 우리는 함수의 기본을 탐구할 것입니다:함수를 정의하는 방법, 함수를 호출하는 방법, 그리고 그것들이 언제 유용할 수 있습니다.

• 자바스크립트 정의 기능 사용 방법
• 자바스크립트 함수 선언
• 자바스크립트 함수 표현
• 함수 매개변수
  • 예는 다음과 같습니다.
• 반환 값
• 화살표 기능
• 결론
  • 다음은 이 문서의 몇 가지 주요 내용입니다.

자바스크립트 정의 기능 사용 방법

JavaScript에서 함수를 정의하는 방법에는 선언과 표현식을 통한 두 가지가 있습니다. 함수를 정의하는 선언 방법부터 시작하겠습니다.

자바스크립트 함수 선언

함수 선언은 명명된 함수를 정의합니다. 이러한 유형의 함수를 정의하려면 function으로 코드를 시작해야 합니다. 키워드 다음에 함수 이름이 옵니다. 다음은 예입니다.

function nameOfYourFunction() {
	// Function code
}

함수 이름은 변수와 동일한 규칙을 따릅니다. 즉, leers, 밑줄, 숫자를 사용할 수 있으며 종종 낙타 대소문자를 사용하여 작성됩니다. 그런 다음 변수 이름 뒤에 선택적 매개변수를 저장할 수 있는 일련의 괄호를 포함합니다. 기사 뒷부분에서 이에 대해 알아보겠습니다.

그런 다음 for 또는 if 문과 같이 함수 코드는 중괄호 안에 있습니다. 다음은 Google을 인쇄하는 함수의 예입니다. 콘솔에:

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

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

function printGoogle() {
	console.log(“Google”);
}

printGoogle() 내 JS 함수는 console.log()입니다. 함수가 호출될 때 실행될 문. 그러나 함수를 호출할 때까지 아무 일도 일어나지 않습니다. 함수를 호출하려면 다음 코드를 사용할 수 있습니다.

printGoogle();

이제 코드를 하나의 함수로 병합한 다음 호출해 보겠습니다.

// Declare the printGoogle() function
function printGoogle() {
	console.log(“Google”);
}

// Invoke the printGoogle() function
printGoogle();

이 함수의 출력은 Google입니다. . printGoogle() 이 경우 함수는 호출될 때 마지막 줄에 결과를 반환합니다.

이제 인쇄 코드가 함수에 있으므로 printGoogle()을 호출하여 원하는 만큼 실행할 수 있습니다. 함수.

자바스크립트 함수 표현

함수를 선언하는 또 다른 방법은 함수 표현식을 만드는 것입니다. 변수에 함수를 할당함으로써 그렇게 할 수 있습니다.

위와 같은 예를 사용해보자. 함수를 자체적으로 선언하는 대신 변수에 할당할 수 있습니다. 다음은 예입니다.

const google = function printGoogle() {
	console.log(“Google”);
}

이 표현식을 호출하기 위해 google() 표현식을 실행하려는 모든 위치에 코드 줄을 추가합니다.

함수 매개변수

이제 우리는 함수를 선언할 수 있는 두 가지 방법을 알고 이 프로그래밍 기능을 사용자 정의하는 방법을 탐색할 수 있습니다. 위의 코드에서 Google을 출력하는 함수를 만들었습니다. 콘솔에.

Facebook과 같은 다른 이름을 인쇄하려면 코드를 변경해야 합니다. 우리 웹 사이트를 방문하는 사용자가 좋아하는 회사의 이름을 입력하고 콘솔에 인쇄하기를 원하면 우리 기능이 작동하지 않습니다.

따라서 매개변수를 사용해야 합니다. name을 추가하면 매개변수를 JS 함수에 추가하면 함수를 통해 콘솔에 모든 이름을 인쇄할 수 있습니다. 다음은 예입니다.

function printCompany(name) {
	console.log(`My favorite company is ${name}!`);
}

함수 이름은 printCompany()입니다. 매개변수는 name입니다. . 그런 다음 JavaScript 함수 내에서 매개변수를 호출할 수 있습니다. 위의 예에서 name 매개변수를 사용하여 console.log()에 인쇄될 내용을 변경합니다. 코드 줄.

그러나 우리는 아직 우리의 이름을 정의하지 않았습니다. 매개변수를 정의하려면 JavaScript 함수를 호출할 때 매개변수에 값을 할당해야 합니다. 가장 좋아하는 회사가 Snapchat이라고 가정해 보겠습니다. 함수를 호출하고 회사 이름을 인수로 지정합니다. 함수 호출 내에서.

예시:

// Call printCompany() function with “Snapchat” as “name”
printCompany(“Snapchat”);

이 코드를 실행하면 다음이 인쇄됩니다.

My favorite company is Snapchat!

이 예에서는 printCompany()를 사용하여 함수를 호출합니다. , 그런 다음 괄호 안에 이름을 할당합니다. 따라서 이제 다른 이름으로 함수를 여러 번 재사용할 수 있습니다.

원하는 만큼 매개변수를 사용할 수 있으며 순서대로 참조할 것입니다. 아래에서 이를 실제로 보여주는 예를 사용합니다.

반환 값

지금까지의 예제에서는 값을 반환하지 않았습니다. 대신 콘솔에 일부 텍스트를 인쇄했습니다. 그러나 함수를 사용하면 처리할 일부 매개변수를 제공한 다음 return에 있는 내용을 기반으로 값을 반환할 수 있습니다. 성명.

다음은 두 개의 숫자를 더하고 합계를 제공하는 함수의 예입니다.

function addNumbers(first, second) {
	return first + second;
}

addNumbers(1, 2);

이 프로그램에서 우리의 함수가 호출되고 두 개의 숫자가 함수를 통해 전달됩니다. 위 예제의 마지막 줄에서 이 함수가 실행되면 답은 3입니다. 답례로. 매개변수 목록은 쉼표로 구분됩니다.

프로그램은 매개변수 이름이 first인 1과 2를 추가했습니다. 및 second 그리고 그것들을 코드로 돌려보냈습니다. 이 값을 보려면 console.log()를 추가할 수 있습니다. addNumbers(1, 2)를 호출하는 라인 주변의 함수 .

화살표 기능

ECMAScript 6부터 화살표 함수로 알려진 함수를 정의하는 보다 간결한 방법이 있습니다. 다음 표현식을 사용하여 표시됩니다. => .

이러한 함수는 함수 표현식의 한 유형입니다. 작동 중인 화살표 기능을 보여주는 예를 사용하겠습니다.

const addNumbers = (first, second) => {
	return first + second;
}

addNumbers(10, 15);

function을 작성하는 대신 , 화살표 기호를 사용하여 함수를 선언하고 있음을 나타낼 수 있습니다. 화살표 함수와 일반 함수 사이에는 몇 가지 미묘한 차이점이 있지만 대부분의 사용 사례에서 이러한 차이점을 알 필요는 없습니다.

하나의 변수로만 작업할 때는 변수를 괄호로 묶을 필요가 없습니다. 그리고 변수로 작업하지 않는 경우 빈 괄호 세트를 포함해야 합니다. () 변수를 선언할 위치입니다.

결론

이것이 기능의 기본에 대해 알아야 할 전부입니다. 이 튜토리얼에서는 함수 선언, 함수 표현식, 함수에서 값 반환, 화살표 함수를 다루었습니다.

전반적으로 함수는 작업을 수행하고 변수를 반환할 수 있는 코드 블록입니다. 함수는 프로그램 전체에서 여러 번 실행해야 하는 여러 줄의 코드가 있는 경우에 유용합니다.

사용해야 할 때마다 이러한 여러 줄의 코드를 작성하는 대신 함수에 추가하고 코드를 실행해야 할 때 함수를 호출하고 사용해야 하는 값을 함수에 전달할 수 있습니다.

이 기사의 몇 가지 주요 내용은 다음과 같습니다.

• 함수는 특정 코드 줄을 실행하도록 설계된 하위 프로그램입니다.
• 함수는 호출될 때만 실행됩니다. 이것을 함수 호출이라고 합니다.
• 값을 함수에 전달한 다음 함수 내에서 사용할 수 있습니다.
• 함수는 값을 반환할 수 있습니다.