함수 functione

함수를 사용하는걸 함수호출 이라 함수를 호출 할때 괄호 안에 여러가지 자료를 넣는데 이를 매개변수라 한다.  또한 함수를 호출해서 나오는 결과를 리턴값이라 한다.

매개변수는 인수라고 부리기도 함. 매개변수는 없을 수도 있고 1개 이상일 수도 있음 (매개변수가 여러개 일땐 쉼표로 구별), 중괄호 내부는 함수의 실행코드를 적으면됨. 함수를 실행할땐 중괄호 밖에 함수명을 불러오면 됨

ex) console, alert, confirm

 

함수의 장점

• 반복되는 코드를 한번만 정의해놓고 필요할 때마다 호출하므로 반복작업을 피할 수 있음
• 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아짐
• 기능별(함수별) 로 수정이 가능하므로 유지보수가 쉬움

 

 

• 함수는 한번에 한 작업만 하는걸 권장, 함수가 여러 작업을 진행하면 함수를 더 잘게 나눠서 작성
• 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍 ex) showError //에러를 보여줌, getName //이름을 얻어옴

//매개변수가 없는 함수

function showError(){
  alert('에러가 발생했습니다. 다시 시도해주세요.')
}

showError(); // 함수 호출


//매개변수가 있는 함수

function sayHello(name){
  const msg = `Hello,${name}`;
  console.log(msg)
};

sayHello('태희'); // name의 위치에 '태희' 가 들어가면서 Hello, 태희 출력

<위 코드를 활용한 응용예제>

//매개변수가 있는 함수
//함수를 호출 할때 매개변수를 입력하지 않는다면 'hello'라는 문장만 출력

function sayHello(name){
  let msg = 'hello';
  if(name){
// 매개변수를 없이 출력하면 undefined 가 뜨는데 undefined는 false 로 조건문 안의 문장을 실행할 수 없어 밖으로 빠져나감
    msg = `hello,${name}` //  이 이 코드는 msg += `,${name}` 으로 변경할 수도 있음
    console.log(msg)
  } else {
    console.log(msg);
  }
};  // 여기서 주의할 점은 msg 는 함수 안에서 선언했으므로 한수 안에서만 사용할 수 있음

sayHello('태희'); // name의 위치에 '태희' 가 들어가면서 Hello, 태희 출력
sayHello(); // hello 만 반환

 

전역변수:  함수 밖에서 선연하여 함수 밖에서도 접근할 수 있는 변수

지역변수 : 함수 안에서 선언하여 함수 내부에서만 접근할 수 있는 변수
* 함수 내부에서 전역변수와 동일한 변수명으로 선언할 수 있고 전역변수와 지역변수는 서로 간섭하지 않음

let msg = 'welcome'; // 전역변수
console.log(msg); // "welcome" 출력

function sayHello(name){
  let msg = 'hello';  // 지역변수: 함수
  console.log(msg  + ' '+ name);
};

sayHello('mike'); // "hello mike" 반환
console.log(msg); // "welcome" 출력



let name = 'Mike';

function sayHello(name){
  console.log(name)
}

sayHello(); // undefined 가 뜸 지역변수는 전역변수에게 간섭받지 않기 때문에

<논리연산자를 활용한 함수 에제>

// or 논리 연산자를 활용

function sayHello(name) {
  let newName = name || 'friend';
  // name 에 값이 들어가 true 가 되면 name이 찍힌 후 뒷 문장은 무시하게 되고 입력하지 않아 undefined가 되면
  // false 가 되어 뒷 문장까지 인식 후 'friend' 출력
  let msg = `hello, ${newName}`;
  console.log(msg)
}

sayHello();
sayHello('Mike');

매개변수에는 기본값을 설정할 수 있음

함수 함수명(매개변수 = default 값){} 이런 형태로 만들어짐, default값은 매개변수가 안적혀 있을경우 할당됨

// default

function sayHello(name = 'freind'){
  console.log(`hello, ${name}`);
};

sayHello('Mike');
sayHello();

result

return 문이 있으면 즉시 리턴의 오른쪽 문장을 반환한뒤 종료함 그래서 함수를 종료하는 목적으로 사용하기도 함

// return 으로 값 반환

function add (num1, num2){
  return num1 + num2; // 더한 뒤에 반환한다는 뜻
}

const result = add(2,3); // 반환된 값은 변수 result에 들어감
console.log(result); // 5출력




function showError(){
  alert('에러가 발생했습니다.');
  return;  // 종료의 목적으로 쓰이기 때문에 아레 알럿은 뜨지 않음
  alert('이 코드는 절대 실행되지 않습니다.')
}

const result = showError();
console.log(result); // 알럿이 뜨고 확인을 누르면 undefined 반환

 

나머지 매개변수

호출할 때 매개변수의 개수가 고정적 이지 않은 함수를 가변 매개함수 라고 합니다. 자바스크립트에서 이러한 함수를 구현할 때는 나머지 매개변수 라는 특이한 현태의 문법을 사용합니다.

함수의 매개변수 앞에 마침효 3개를(...) 입력하면 배열로 들어옵니다.

// 나머지 매개변수

function sample(...items){
  console.log(items);
}

sample(1,2,3,4,5); // [1,2,3,4,5] 배열의 형태로 출력

 

 

<함수 예제>

// a 부터 b 까지 더하는 함수
function add(a,b){
  let output = 0;
  for(i = a; i <= b; i++){
    output = output + i;  //
  }
  return output
}

console.log(add(1,3)); // 1,2,3 을 더한 6출력

//최소값 구하기
// 매개변수, 반복문, 조건문 을 활용

function min(...items){
  let output = items[0];
  for(const item of items){
    if(output > item){
// 1번째 반복될떄 10 > 10(item[0])은 거짓으므로 output은 그대로 10
// 2번째 반복될때 10 > 3(item[1])은 진실이므로 output이 item인 3으로 변경
// 3번째 반볼될때 3 > 9(item[2])은 거짓이므로 output은 여전히 3 으로 반복 끝
      output = item;
    }
  }
  return output;
}

console.log(min(10,3,9)); // 3 출력

 

콜백함수

1. 다른 함수의 인자로써 이용되는 함수.

2. 어떤 이벤트에 의해 호출되어지는 함수.

//콜백함수
function add(x, y) {
  return x + y;
}


function mul(x, y){
  return x * y;
}

function cal(a ,b){ 
  return a(10, 10) + b(10, 10);
}


//현재 각각 a = add , b = mul 을 할당함
console.log(cal(add, mul)) // 120 출력

화살표 함수를 콜백함수로 사용할 수 있음