자바스크립트 함수

안녕하세요 찐망고 입니다. 

오늘은 자바스크립트 함수에 대해서 가볍게 포스팅해볼게요

 

함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합입니다.

 

코드를 재사용하고 구조화하여 프로그램을 개발하는데 도움을 주는 사용자정의함수와

자바스크립트에서 내부적으로 제공하는 내장함수가 있어요

function funcName(parameter1, parameter2) {
    // 함수실행코드
    // 결과반환(선택가능)
}

function addNumbers(a, b) {
	return a + b;
}
let result = addNumbers(3, 5);
console.log(result); // 8

 

함수는 함수 선언식과, 함수 표현식이 존재하는데 

함수를 선언하고 사용자가 직접 실행할 함수의 이름을 짓거나 (함수선언식)

변수에 이름이 없는 함수 데이터 값을 저장해서 사용할 수도 있죠. 

 

그런 함수를 익명함수라고도 해요.

// 함수선언식
func1();
function func1() {
	console.log('선언적 함수');
}
func1();

// 함수표현식 - 익명함수
// console.log(func2) - XXXX
const func2 = function() {
	console.log('표현식 함수')
}
console.log(func2) // console.log(func2)

 

이전 포스팅에도 적어놓았듯이 선언적 함수는 코드의 선두로 끌어올려진 것처럼 동작하는데, 

자바스크립트 고유의 특징이라고 볼 수 있습니다. 

함수 선언문 이전에 함수를 참조하거나 호출 할 수 있죠..

 

함수표현식인경우엔 변수 호이스팅이 발생합니다.

2023.06.22 - [WEB/JS이론] - 스코프와 호이스팅?

스코프와 호이스팅?

 

익명함수는 이름이 없기 때문에 한번만 사용되는 간단한 함수를 간편하게 정의할 때 사용합니다.

위에 예시처럼 함수 표현식으로 변수에 데이터를 저장해서 사용할 수도 있지만

콜백함수나, 즉시실행함수로도 사용할 수 있습니다

// 콜백함수
setTimeOut(function(){
    console.log("3초가 지났다.")
}, 3000)

// 즉시실행함수
(function() {
    // 코드실행
})();

 

콜백함수는 다른 함수에 인자로 전달되어 나중에 호출 되는 함수를 말하는데, 

이는 함수를 fisrt-class 객체로 취급하고 함수를 변수로 다룰 수 있는 기능을 활용한 개념입니다.

 

즉시실행함수는 익명함수를 즉시 호출하여 한번만 바로 실행되는 코드블록에서 많이 사용합니다.

 

자바스크립트 ES6에서 소개한 화살표 함수는 함수를 더 간결하게 작성할 수 있고,

함수의 작성 방식과 함수 내부에 this바인딩이 달라진다는 점 입니다.

항상 익명함수로 사용되고, function키워드 대신 화살표를 사용합니다.

// 일반 함수 선언문
function add(a, b) {
    return a + b;
}

// 화살표 함수 
const add = (a, b) => a + b;

 

 

 

함수관련 다양한 예제를 볼까요

 

1. 두 숫자를 더하는 함수

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

const result = addNumbers(5, 3); // 5 + 3 = 8
console.log(result); // 출력: 8

 

2. 기본 매개변수를 사용하는 함수

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

greet(); // 출력: Hello, Guest!
greet('Mango'); // 출력: Hello, Mango!

 

3. 반환값이 없는 함수

function showMessage() {
  console.log("This is a simple message.");
}

showMessage(); // 출력: This is a simple message.

 

4. 배열을 반복 처리하는 함수

function printFruits(fruits) {
  fruits.forEach(function(fruit) {
    console.log(fruit);
  });
}

const fruits = ['Apple', 'Banana', 'Orange'];
printFruits(fruits);
// 출력:
// Apple
// Banana
// Orange

 

5.  함수를 반환하는 함수 (고차 함수)

 - 자바스크립트에서 함수는 값처럼 다룰 수 있어서, 다른 함수로 반환이 가능합니다.

function createMultiplier(multiplier) {
  return function(num) {
    return num * multiplier;
  };
}

const double = createMultiplier(2); // 2배로 만드는 함수
console.log(double(5)); // 출력: 10

const triple = createMultiplier(3); // 3배로 만드는 함수
console.log(triple(5)); // 출력: 15

 

6. 재귀 함수 (Recursion)

 - 재귀함수는 함수가 자기 자신을 다시 호출하는 함수입니다. 

function factorial(n) {
  if (n === 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 출력: 120 (5 * 4 * 3 * 2 * 1)

 

7. 화살표 함수와 배열 맵핑

const numbers = [1, 2, 3, 4];
const doubled = numbers.map((num) => num * 2);

console.log(doubled); // 출력: [2, 4, 6, 8]

 

8. 콜백 함수를 사용하는 비동기 예제

function loadData(callback) {
  console.log('Loading data...');
  setTimeout(() => {
    console.log('Data loaded.');
    callback();
  }, 2000); // 2초 후에 실행
}

function processData() {
  console.log('Processing data...');
}

loadData(processData);
// 출력:
// Loading data...
// (2초 후)
// Data loaded.
// Processing data...

 

 

this바인딩에 대해서는 잘 설명해준 블로그가 있어 링크를 걸어봅니다

훌륭한 저의 제자랍니다 😀

https://isfpp.tistory.com/125

[JavaScript] this

 

 

* first-class객체

 - 함수를 다른값과 동일한 방식으로 다룰 수 있는 특징

 - 변수에 할당할 수 있고

 - 다른 함수의 인자로 전달

 - 함수의 반환값 사용

 - 동적으로 생성

 - 데이터 구조에 저장 가능

// 함수를 변수에 할당
const greeting = function() {
  console.log('안녕하세요!');
};

// 함수를 다른 함수의 인자로 전달
function sayHello(func) {
  func();
}

sayHello(greeting); // "안녕하세요!" 출력

// 함수를 다른 함수의 반환 값으로 사용
function createMultiplier(x) {
  return function(y) {
    return x * y;
  };
}

const multiplyByTwo = createMultiplier(2);
console.log(multiplyByTwo(5)); // 10 출력

// 함수를 동적으로 생성
function createFunction() {
  return function() {
    console.log('동적으로 생성된 함수');
  };
}

const dynamicFunction = createFunction();
dynamicFunction(); // "동적으로 생성된 함수" 출력

// 함수를 데이터 구조에 저장
const functionArray = [greeting, dynamicFunction];
functionArray[0](); // "안녕하세요!" 출력
functionArray[1](); // "동적으로 생성된 함수" 출력