JS/Javascript

[Javascript] 함수

ui-o 2023. 2. 4. 14:58
반응형

함수

  • 특정 작업을 수행하는 코드의 집합
  • 반복될 수 있는 작업을 정의하여 사용

기본 구조

  • INPUT(parameter) >  function() > OUTPUT

기본 문법

1. 함수의 선언
function 함수명(매개변수, 매개변수 ...){
	문장
	return 리턴값
}

2. 함수 실행
함수명();

Source

function add(a, b) { // 입력(a,b)
  let sum = a + b; // 할일
  return sum; // 출력
}


let result = add(1, 5);
document.write(result); // 6

함수의 종류

  • 사용자 정의 함수 : 사용자가 필요한 기능을 직접 만든 함수
  • 자바스크립트 코어 함수 : 자바스크립트 기본적으로 제공하는 함수  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

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

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

화살표 함수

 

[Javascript] 화살표 함수(Arrow Function)

Arrow Function함수를 간략히 정의할 수 있음익명함수임function 키워드 대신 화살표를 사용    this를 묶는것이 가능new 연산자로 인스턴스 생성 불가new 생성자와 함께 호출 할 수 없다실행문법화살

u-pub.tistory.com

 


즉시실행함수 (IIFE)

  • 함수 선언과 동시에 호출 
  • 변수에 할당할 수 있고, 함수에서 반환하는 값을 변수에 할당할 수도 있음
  • 한 번만 실행할 초기화 코드 사용에 유용

  * 기본 문법

// + type01
(function(){

}());

// + type02
(function(){

})();
let result = (function (a, b) {
  return a + b;
})(10, 20); // 전달인자를 넣어 즉시 실행

console.log(result); // 30

 

전개 연산자

  • 배열을 전개해서 함수의 매개변수로 전달 
  • 배열 앞에 마침표 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');
반응형