정보실

웹학교

정보실

javascript JavaScript에서 함수를 정의하는 방법 - JavaScript guide

본문

목차​

  1. JavaScript 개발자 콘솔을 사용하는 방법
  2. HTML에 JavaScript를 추가하는 방법
  3. JavaScript에서 구문 및 코드 구조 이해
  4. JavaScript로 주석을 작성하는 방법
  5. JavaScript에서 데이터 유형 이해
  6. JavaScript에서 문자열로 작업하는 방법
  7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
  8. JavaScript에서 데이터 유형을 변환하는 방법
  9. JavaScript에서 변수, 범위 및 게양 이해
  10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
  11. JavaScript에서 배열 이해
  12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
  13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
  14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
  15. JavaScript에서 객체 이해
  16. JavaScript에서 날짜 및 시간 이해
  17. JavaScript에서 이벤트 이해
  18. JavaScript에서 JSON으로 작업하는 방법
  19. JavaScript로 조건문을 작성하는 방법
  20. JavaScript에서 Switch 문을 사용하는 방법
  21. JavaScript에서 While 및 Do ... While 루프 사용
  22. JavaScript에서 For 루프를 생성하는 방법
  23. JavaScript에서 함수를 정의하는 방법
  24. JavaScript의 프로토 타입 및 상속 이해
  25. JavaScript에서 클래스 이해
  26. JavaScript에서 객체 메소드를 사용하는 방법
  27. JavaScript에서 This, Bind, Call 및 Apply 이해

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


소개 


함수는 동작을 수행하거나 값을 반환하는 코드 블록입니다. 함수는 재사용 할 수 있는 프로그래머가 정의한 사용자 정의 코드이므로 프로그램을 보다 모듈적이고 효율적으로 만들 수 있습니다.


이 학습서에서는 JavaScript에서 함수를 정의하고 함수를 호출하며 함수 매개 변수를 사용하는 몇 가지 방법을 학습합니다.


함수 정의 


함수는 함수 키워드로 정의되거나 선언됩니다. 아래는 JavaScript 함수의 구문입니다.

function nameOfFunction() {
    // Code to be executed
}

선언은 함수 키워드로 시작하고 그 뒤에 함수 이름이 옵니다. 함수 이름은 변수와 같은 규칙을 따릅니다. 문자, 숫자, 밑줄 및 달러 기호를 포함 할 수 있으며 낙타 문자로 자주 작성됩니다. 이름 뒤에는 선택적 매개 변수에 사용할 수 있는 괄호 세트가 옵니다. 함수의 코드는 for 문이나 if 문과 같이 중괄호 안에 들어 있습니다.


첫 번째 예에서는 인사말을 콘솔에 인쇄하는 함수 선언을 작성합니다.

// Initialize greeting function
function greet() {
    console.log("Hello, World!");
}

여기 Hello, World!를 인쇄하는 코드가 있습니다. greet() 함수 안에 포함 된 콘솔에. 그러나 아무 일도 일어나지 않고 함수를 호출하거나 호출 할 때까지 코드가 실행되지 않습니다. 함수 이름 뒤에 괄호를 써서 함수를 호출 할 수 있습니다.


// Invoke the function
greet();

이제 우리는 그것들을 모아서 함수를 정의하고 호출 할 것입니다.


// Initialize greeting function
function greet() {
    console.log("Hello, World!");
}

// Invoke the function
greet();

greet();을 호출하면 함수가 실행되고 Hello, World! 프로그램의 출력으로.

Output
Hello, World!

이제 함수에 greet() 코드가 포함되어 있으며 원하는 만큼 여러 번 재사용 할 수 있습니다.


매개 변수를 사용하면 코드를 보다 동적으로 만들 수 있습니다.


함수 매개 변수 


greet.js 파일에서 Hello, World를 콘솔에 출력하는 기본 기능을 만들었습니다. 매개 변수를 사용하여 코드를 보다 유연하게 만드는 기능을 추가 할 수 있습니다. 매개 변수는 이름으로 함수에 전달되고 로컬 변수로 동작하는 입력입니다.


사용자가 응용 프로그램에 로그인하면“Hello, World!”라고 말하는 대신 프로그램이 이름으로 인사를 보내길 원할 수 있습니다.


인사 할 사람의 이름을 나타 내기 위해 name이라는 매개 변수를 함수에 추가합니다.


// Initialize custom greeting function
function greet(name) {
    console.log(`Hello, ${name}!`);
}

함수 이름은 맞습니다. 이제 괄호 안에 단일 매개 변수가 있습니다. 매개 변수 이름은 변수 이름 지정과 동일한 규칙을 따릅니다. 함수 안에 Hello, World로 구성된 정적 문자열 대신 매개 변수를 포함하는 템플릿 리터럴 문자열이 있는데, 이제는 로컬 변수로 작동합니다.


이름 매개 변수를 어디에도 정의하지 않은 것을 알 수 있습니다. 함수를 호출 할 때 값을 할당합니다. 사용자 이름이 Sammy라고 가정하면 함수를 호출하고 사용자 이름을 인수로 지정합니다. 인수는 함수에 전달되는 실제 값이며 이 경우 문자열 "Sammy"입니다.


// Invoke greet function with "Sammy" as the argument
greet("Sammy");

"Sammy"값은 name 매개 변수를 통해 함수로 전달됩니다. 이제 함수 전체에서 이름을 사용할 때마다 "Sammy"값을 나타냅니다. 전체 코드는 다음과 같습니다.


// Initialize custom greeting function
function greet(name) {
    console.log(`Hello, ${name}!`);
}

// Invoke greet function with "Sammy" as the argument
greet("Sammy");

위 프로그램을 실행하면 다음과 같은 결과가 나타납니다.


Output
Hello, Sammy!

이제 함수를 재사용 하는 방법에 대한 예가 있습니다. 실제 예에서 함수는 이름을 인수 값으로 직접 제공하는 대신 데이터베이스에서 사용자 이름을 가져옵니다.


매개 변수 외에도 변수는 함수 내에서 선언 될 수 있습니다. 이러한 변수는 로컬 변수라고 하며 자체 기능 블록의 범위 내에서만 존재합니다. 변수 범위는 변수의 접근성을 결정합니다. 함수 내부에서 정의 된 변수는 함수 외부에서 액세스 할 수 없지만 함수가 프로그램 전체에서 사용되는 횟수만큼 사용할 수 있습니다.


반환 값 


함수에서 둘 이상의 매개 변수를 사용할 수 있습니다. 함수에 여러 값을 전달하고 값을 반환 할 수 있습니다. x와 y로 표시되는 두 값의 합을 찾는 함수를 만듭니다.


// Initialize add function
function add(x, y) {
    return x + y;
}

// Invoke function to find the sum
add(9, 7);

위의 프로그램에서 매개 변수 x와 y를 사용하여 함수를 정의한 다음 9와 7의 값을 함수에 전달했습니다. 프로그램을 실행하면 해당 숫자의 합계가 출력으로 나타납니다.


Output
16

이 경우 9와 7이 sum() 함수에 전달되면 프로그램은 16을 반환했습니다.


return 키워드를 사용하면 함수 실행이 중단되고 표현식 값이 반환 됩니다. 이 경우 브라우저는 콘솔에 값을 표시하지만 console.log()를 사용하여 콘솔에 인쇄하는 것과는 다릅니다. 함수를 호출하면 함수가 호출 된 위치를 정확하게 출력합니다. 이 값은 즉시 사용되거나 변수에 배치 될 수 있습니다.


함수 표현식 


마지막 섹션에서 함수 선언을 사용하여 두 숫자의 합을 구하고 해당 값을 반환했습니다. 함수를 변수에 할당하여 함수 표현식을 만들 수도 있습니다.


동일한 add 함수 예제를 사용하여 반환 된 값을 변수 (이 경우 sum)에 직접 적용 할 수 있습니다.


// Assign add function to sum constant
const sum = function add(x, y) {
    return x + y;
}

// Invoke function to find the sum
sum(20, 5);
Output
25

이제 합계 상수는 함수입니다. 익명의 함수 (이름 없는 함수)로 바꾸어 이 표현을 더 간결하게 만들 수 있습니다. 현재 함수에는 add라는 이름이 있지만 함수 표현식에서는 함수 이름을 지정할 필요가 없으며 일반적으로 이름은 생략됩니다.

// Assign function to sum constant
const sum = function(x, y) {
    return x + y;
}

// Invoke function to find the sum
sum(100, 3);
Output
103

이 예에서는 추가 된 함수의 이름을 제거하고 익명 함수로 바꿨습니다. 명명 된 함수 표현식은 디버깅을 돕기 위해 사용될 수 있지만 일반적으로 생략됩니다.


화살표 함수 


지금까지 function 키워드를 사용하여 함수를 정의하는 방법을 살펴 보았습니다. 그러나 ECMAScript 6에서와 같이 화살표 함수 표현식으로 알려진 함수를 정의하는 새롭고 간결한 방법이 있습니다. 일반적으로 알려진 화살표 함수는 등호로 표시되고 그 뒤에는 보다 큼 부호 (=>)가 표시됩니다.


화살표 함수는 항상 익명 함수이며 함수 표현식 유형입니다. 두 숫자의 곱을 찾는 기본 예제를 만들 수 있습니다.

// Define multiply function
const multiply = (x, y) => {
    return x * y;
}

// Invoke function to find product
multiply(30, 4);
Output
120

키워드 함수를 작성하는 대신 => 화살표를 사용하여 함수를 나타냅니다. 그렇지 않으면, 모질라 개발자 네트워크의 화살표 함수에서 읽을 수 있는 몇 가지 고급 차이점을 제외하고는 일반 함수 표현식과 유사하게 작동합니다.


매개 변수가 하나 인 경우 괄호를 제외 할 수 있습니다. 이 예에서 우리는 x를 제곱 합니다. x는 하나의 숫자 만 인수로 전달하면 됩니다. 괄호는 생략되었습니다.

// Define square function
const square = x => {
    return x * x;
}

// Invoke function to find product
square(8);
Output
64

참고 : 매개 변수가 없는 경우 화살표 기능에 빈 괄호 ()가 필요합니다. 


return 문으로 만 구성된 이러한 특정 예제를 사용하면 화살표 함수를 사용하여 구문을 훨씬 더 줄일 수 있습니다. 함수가 단일 행 리턴 인 경우, 아래 예와 같이 중괄호와 return 문을 생략 할 수 있습니다.


// Define square function
const square = x => x * x;

// Invoke function to find product
square(10);
Output
100

이러한 세 가지 유형의 구문은 모두 동일한 출력을 생성합니다. 일반적으로 자신의 기능을 구성하는 방법을 결정하는 것은 선호도 또는 회사 코딩 표준의 문제입니다.


결론 


이 자습서에서는 함수 선언 및 함수 표현식, 함수에서 값 반환, 함수 값을 변수에 할당 및 ES6 화살표 함수에 대해 설명했습니다.


함수는 값을 반환하거나 동작을 수행하여 프로그램을 확장 가능하고 모듈로 만드는 코드 블록입니다.



페이지 정보

조회 114회 ]  작성일19-10-28 14:40

웹학교