04. JavaScript - 함수

박지윤·2023년 9월 3일

목록 보기

4/13

함수

1. 함수란?

함수(function)란 하나의 작업을 필요할 때마다 호출해 반복 수행할 수 있도록 설계된 독립적인 블록을 말한다.

2. 함수의 정의

// syntax
function 함수이름(매개변수1, 매개변수2 ..){
  함수가 호출되었을 때 실행하고자 하는 실행문
}

function Min(arr){
  let min = 1000;
  
  for(let i=0; i < arr.length; i++){
  	if(min > arr[i]){
      min = arr[i];
    }
  }
  return min;
}

numArr = [10, 20, 30]; 

console.log(Min(numArr)); // 10

자바스크립트에서 함수는 함수 이름, 매개변수, 실행문으로 구성되어 있다.

함수 이름은 함수를 구분하는 식별자 역할을 한다.
함수 내에 선언된 변수는 함수의 지역변수가 된다.
매개변수는 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수 역할을 한다.
여기서 인수란 함수가 호출될 때 함수로 값을 전달해주는 값(위 예제의 numArr)을 말한다.

1) return

return문은 함수를 호출한 위치에 함수가 실행된 결괏값을 반환해주는 기능을 한다.
여기서 반환되는 결괏값은 return 뒤에 명시한 표현식의 값이다.
return 아래에 명령문이 더 있어도, 무시하고 함수 실행을 중단하는 기능도 수행한다.

3. 함수 정의 & 호출

함수를 정의하는 방법에는 선언문 방식, 표현식 방식, 생성자 방식이 있다.

/*
1. 함수 선언문
function 함수명(매개변수){실행문};

2. 함수 표현식
let 변수명 = function(){실행문};

3. 함수 생성자
let 변수명 = new Function(매개변수, 실행문);
*/

function addXY(x,y){
  console.log (x + y);
}

let diffXY = function(x,y){ //익명함수
 console.log (x - y);
}

let multiXY = new Function('x','y','console.log(x * y)');


/* 함수명(인수1,인수2...), 변수명(인수1, 인수2...)*/

addXY(3,4) // 7 
addXY(4,3) // 7 

diffXY(3,4) // -1
diffXY(4,3) // -1

multiXY(3,4) //12
multiXY(4,3) //12

선언문 방식, 표현식 방식, 생성자 방식 중 가장 많이 사용하는 방식은 선언문 방식이며, 생성자 방식은 잘 사용되지 않는다.

선언문으로 선언된 함수는 함수명을 통해 호출할 수 있고, 표현식과 생성자로 선언된 함수는 변수명을 통해 호출할 수 있다. 함수를 호출하기 전까지 함수 내부 코드들은 실행되지 않는다. 인수의 입력 순서 대로 매개변수에 대입되기 때문에, 순서에 유의해서 입력해야 한다.

4. 함수 실행 순서

function Min(arr){
  let min = 1000;
  
  for(let i=0; i < arr.length; i++){
  	if(min > arr[i]){
      min = arr[i];
    }
  }
  return min;
}

numArr = [10, 20, 30]; 

console.log(Min(numArr)); // 10

Min이라는 이름의 함수가 정의된다.
Min 함수에 인수 numArr가 매개변수로 전달된다.
함수가 호출되면 실행될 구문들이 실행된다. (위의 예제에서는 가장 작은 수(min)를 찾는 구문 실행)
Min 함수는 결괏값으로 min을 반환한다.
반환한 min을 출력한다.

5. 화살표 함수

ES6버전에서 새롭게 나온 함수선언 방법으로, 익명함수에서만 사용할 수 있다.

//syntax: (매개변수1, 매개변수2 ... 매개변수n) => {실행문} 


// 매개변수가 없을 때
const hi = function(){
  return "Hi!";
}

const hiArrow = () => "Hi!";

//매개 변수가 있을 때
//1개 
let message = function(user){
  console.log(user + "님, 안녕하세요");
}

let messageArrow = user => console.log(user + "님, 안녕하세요"); // 소괄호 생략 

// 2개 이상
let sum = function(a,b){
  return a + b;
}

let sumArrow = (a,b) => a + b;

// 화살표 함수 호출
console.log(hiArrow());
messageArrow("홍길동");
console.log(sumArrow());