[javascript] 함수-1 / 함수의 기초 이해, 선언 방식 ...

함수

• 특정 작업을 수행하는 코드의 집합
• 반복되는 코드를 하나로 묶어서 이름을 붙인 것

장점

• 반복되는 코드를  한 번만 정의하여 재사용 가능
• 기능별로 나누어 함수를 작성할 경우 모듈화로 코드의 가독성을 높일 수 있음
• 기능별로 수정이 가능하므로, 유지보수가 용이

 

---

함수의 기본 구조

function sayHello() {
  console.log("안녕!");
}

• function: 함수 선언 키워드
• sayHello: 함수 이름 (작명 가능)
• (): 매개변수(parameter)를 받을 자리
• {}: 함수 본문, 여기에 동작을 작성

---

함수 호출

• 선언만 하면 실행되지 않음
• 함수 이름 뒤에 ()를 붙이면 실행

---

매개변수(Parameter), 인자(Argument)

• 매개변수 (parameter) : 함수를 선언할 때 사용하는 변수로, 함수가 어떤 값을 받을 수 있는지 정의하는 부분
• 인자(Argument) : 함수를 호출할 때 실제로 전달되는 값으로, 파라미터가 정의된 변수에 전달되는 실제 값

 

기본 매개변수 (default parameter)

• 함수를 호출할 때 인자를 생략하면 undefined가 들어감
  이를 방지하려면 기본값을 설정할 수 있음

// [문법]
function 함수이름(매개변수 = 기본값) {
  // 함수 내용
}

function greet(name = "익명") {
  console.log("안녕하세요, " + name + "님!");
}

greet("ho"); // 출력: 안녕하세요, ho님!
greet();       // 출력: 안녕하세요, 익명님!

---

return문

• return은 함수 실행 결과를 함수 밖으로 전달하는 역할
• return 뒤에 오는 값은 그 자리에 치환

function add(a, b) {
  return a + b;
}

let result = add(2, 3);
console.log(result); // 출력: 5

---

함수의 네이밍

• 함수의 네이밍은 동사 + 명사 구조 형태로 주로 명명 
  예)  printMessge(), getUserInfo()

---

 

---

 

함수의 종류

• 사용자 정의 함수 : 사용자가 필요한 기능을 직접 만든 함수
• 자바스크립트 코어 함수 : 자바스크립트 기본적으로 제공하는 함수  ex) pasreInt(), Math.random()..

선언식 함수 (일반함수)

• 기본적인 함수 선언 방법
• 이름이 있는 함수
• 재귀호출 시에도 사용 
• 호이스팅 가능 (함수 선언전 호출해도 작동)

// [문법]
function 함수명() {}

let 함수명 = function(){} // 위와 동일한 기능

function 함수() {
	console.log('함수');
}

console.log(typeof 함수); // function

• Sources

  * 숫자 계산 기본 문법

function 함수(매개변수) {
	let output = 초깃값;
	처리
	return ouput
}

//  = a부터 b까지의 합 
function sumAll(a, b) {
  let output = 0;
  for (let i = a; i <= b; i++) {
    output += i;
  }
  return output;
}

console.log(sumAll(1,4)); // 10

//  = a부터 b까지의 곱 
function mul(a, b) {
  let output = 1;
  for (let i = a; i <= b; i++) {
    output *= i;
  }
  return output;
}
console.log(mul(1, 3));

// 최소값 구하기
function min(array) {
  let output = array[0];
  for (const i of array) {
    if (output > i) {
      output = item;
    }
  }
  return output;
}

newArr = [1, 2, 3, 4, 5];
console.log(min(newArr)); // 1

---

익명함수 (임의 함수)

• 이름이 없는 함수 
• 익명함수 사용을 위해서는 변수에 담아 호출이 필요함
• 함수 자체가 식(Expression)이기 떄뮨에 함수를 변수에 할당 하거나 다른 함수의 매개변수로 사용 가능
• 익명함수는 반드시 선언 이후에 실행이 되어야 호출이 가능 (호이스팅 불가)

  * 기본 문법

function (){}

// 변수에 함수를 할당
const print = function(){ 
    console.log('print');
};
print(); // print
const printAgain = print;
printAgain(); // print

일반함수와 익명함수의 차이

• 일반함수의 경우 함수 자체를 출력 시에 콘솔에 함수의 이름이 붙어있음

---

 

전개 연산자

• 배열을 전개해서 함수의 매개변수로 전달 
• 배열 앞에 마침표 3개를 붙여 표혐

  * 기본 문법

함수명(...배열)

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

const array = [1,2,3,4];
// 전개 연산자를 사용하지 않은 경우
callA(array) // [ [ 1, 2, 3, 4 ] ] - 배열 형태로 들어옴
// 전개 연산자를 사용한 경우
callA(...array) // [ 1, 2, 3, 4 ] - 숫자가 하나하나 들어옴

---

함수에서의 arguments 활용

• 함수에서 arguments를 활용하여 각 인덱스에 어떤 값을 가지고 있는지 파악이 가능
• 파라미터의 개수를 정확히 알지 못한 경우 스프레드 연산자에서 arguments 활용 가능

const arr = function (x, y, z) {
  console.log(arguments); // [Arguments] { '0': 2, '1': 3, '2': 4 }
  return x * y * z;
};

arr(2, 3, 4);

// Spread 연산자의 arguments 활용
const arr2 = function (...arguments) {
  return Object.values(arguments).reduce((prev, cur) => prev + cur);
};
console.log(arr2(2, 3)); // ⇒ 5

 

---

함수의 파라미터 초깃값 설정

• '파라미터=값'을 사용하여 초기값 설정 가능
• 초기값으로 설정된 파라미터는 값을 전달받지 않으면 초기값을 사용하는데 이를 '디폴트 파라미터'라고 함

기본 문법

function 함수명(파라미터, 파라미터=초기값, 파라미터=초기값) {

}​

 

---

임의의 파라미터를 가지는 함수 정의

• 정해지지 않은 파라미터의 개수를 가지는 함수의 경우 '나머지 파라미터(Rest Parameter) '...'을 이용하여 함수 정의
• 입력받은 파라미터는 인덱스를 이용하여 파라미터[0], 파라미터[1]의 방식으로 사용

기본 문법

// Function
function 함수명(...파라미터) {}

// Arrow Function
(...파라미터) => {}

// 인덱스를 지정하여 파라미터 사용
파라미터[0]

source

function calcSum(...prices) {
	let result = 0
	for(const value of prices) {
		result +=value
	}
	return result
}

calcSum(1,2,3) // ⇒ 6

---

함수의 변수와 리턴처리

• 함수의 리턴값을 지역변수로 선언하여 반환 받을 경우 반드시 return 처리 필요 하며, 함수내에서만 변수호출 가능
• 함수의  리턴값을 전역변수로 처리시에 return처리를 하지 않아도 되며, 함수 외부에서도 결과값 반환 가능

함수 내 지역변수 리턴값을 함수 밖에서 호출하는 방법

• 전역변수 선언 ( 전역변수로 선언 시 함수 내에서 리턴처리가 없이 결과 출력 가능)

 

// = 내부함수 활용
function add(a, b) {
  let sum = a + b;
  return sum; // 지역변수 일 때는 반드싀 리턴 필요
}

console.log(add(1, 4));

//console.log(sum); // ERROR  sum이 add 안에 선언된 지역변수라서 Error 발생

// + 해결방안 (sum을 전역변수로 선언)

let result // 전역변수

function add(a, b) {
  result = a + b;
  
}
add(3,2)
document.write(result); // 5

---

함수 활용

매개변수 값으로 함수 이용

// hi1, hi2 는 일반 함수
function hi1() {
  alert('hi');
}
function hi2() {
  alert('hi-2');
}
// 매개변수 값으로 함수를 이용
function exec(a) {  // a = hi1, a = hi2와 동일
  a(); // 매개변수로 받은 함수를 호출
}
exec(hi1);  
exec(hi2);

리턴값으로 함수 활용

$(function () {
  function hi() {
    document.write('hi');
  }
  $('#btnStart').click(hi);
});

리턴값으로 익명함수 활용

  sestInterval(function(){
        document.write('hi');
    }, 1000)

리턴값으로 중첩함수 활용

function hi() {
  // 중첩함수
  function hello(name) {
    document.write(`${name}님`);
  }
  return hello; // 리턴값으로 중첩함수를 넘기고 있음
}
//함수를 저장한 것이 아닌 hi()를 호출하고 그 리턴값으로 hello()를 받고 있음
// 중첩함수인 hello()를 받고 있는 것
const func = hi();
func('john'); // hello('john'); 동일

객체 방식으로의 함수 정의

let hi = new Function('name', 'document.write(name+"님")');
hi();

익명함수의 확장으로 함수 정의

• 재사용 목적이 아닌 다른 함수와의 충돌을 막기 위함

(function (name) {
  document.write(name);
})('john');