Language/Javascript

함수

JangKroed 2022. 9. 30. 15:34
728x90
반응형

// 일반 함수
function foo() {
  console.log("bar");
}

// 익명 함수
let foo = function () {
  console.log("bar");
};

 

  • 일반적을 반복되는 코드를 하나로 묶거나, 의미를 부여하고 역할을 나누기 위해 사용
  • 변수선언, 조건문과 더불어 가장 많이 사용되는 문법이다.

 

- 인터페이스

function 함수이름(인자1, 인자2, 인자3) {
  // 명령문
}

함수이름(인수1, 인수2, 인수3); // 명령문에 있는 내용을 실행한다.
  • 인자(Parameter 또는 매개변수)란 함수를 호출할때 전달 받기 위해 지정한 변수.
  • 인수(Argument)란 인자에 전달하는 값 그 자체
  • return 키워드로 값을 반환 할 수있다.

 

구현해보기

더보기

- 요구사항

  • persons 변수로 입력받은 값의 사람들에게 맥주 주문을 받습니다. 성인(19세 이상)인 경우에만 맥주 주문을 받아 맥주를 제공할 수 있도록 해주세요.
  • 성인에게 주문을 받은 경우 "맥주 나왔습니다! [주문한 사람 이름]님" 처럼 출력합니다.
  • 미성년자에게 주문을 받은 경우 "나이 더 먹고 오세요! [주문한 사람 이름]님" 처럼 출력합니다.
function isAdult(person) {
  // 왜 이런 코드가 가능한지 모르겠다면 비교 연산자를 복습하세요! 기초 튼튼!
  return person.age >= 19;
}

function orderBeer(person) {
  if (isAdult(person)) {
    console.log('맥주 나왔습니다! ' + person.name + '님');
  } else {
    console.log('나이 더 먹고 오세요! ' + person.name + '님');
  }
}

const persons = [
  { name: "강승현", age: 19 },
  { name: "홍길동", age: 18 },
];

// for...of문이 어떻게 동작하는지 모르겠다면 반복문을 복습하세요!
for (const person of persons) {
  orderBeer(person);
}

// Print: 맥주 나왔습니다! 강승현님
// 나이 더 먹고 오세요! 홍길동님

익명함수

  • 익명 함수는 일반 함수와 다르게 함수의 이름이 존재하지 않고 변수에 함수를 담아 사용
  • 변수에 함수를 저장해서 사용
// 일반 함수
function foo() {
  console.log("bar");
}

// 익명 함수
let foo = function () {
  console.log("bar");
};

- 주로 재사용 되지않고 한번만 사용되는 함수에 자주 사용

- 불필요한 메모리를 차지하는것을 방지 (메모리 낭비를 줄일 수 있다)

- 하지만 Hoisting이 적용되지 않는다

// 일반 함수로 선언부보다 위에서 함수를 호출했을 때
hello(); // hello!

function hello() {
  console.log("hello!");
}

// 익명 함수의 경우
hello(); // Uncaught ReferenceError: Cannot access 'hello' before initialization

const hello = function() {
  console.log("hello!");
}

화살표 함수

  • ES6에서 새롭게 추가된 문법.
  • 일반 익명 함수 표현식
const sum = function(a, b) {
  return a + b;
};
  • 화살표 함수 표현식 (1): 기본 형태
const sum = (a, b) => {
	return a + b;
};
  • 화살표 함수 표현식 (2): return 생략 형태
const sum = (a, b) => a + b;
  • 화살표 함수 표현식 (3): 인자 괄호 생략 형태
const hello = a => {
	return a;
};
hello('hi'); // hi
  • 화살표 함수를 실제로 구현해보기
더보기

주어진 배열로 사용자의 연령 평균을 구해주는 함수를 만들어 보라.

const personArray = [
  { name: "John Doe", age: 20 },
  { name: "Jane Doe", age: 19 },
  { name: "Fred Doe", age: 32 },
  { name: "Chris Doe", age: 45 },
  { name: "Layla Doe", age: 37 },
];

// personArray의 나이 평균을 구해주는 Arrow Function을 작성해봅시다.
const getAgeAverage = () => {
	let sum = 0;
	for (let person of personArray) {
		sum = sum + person["age"];
	}
	const average = sum / personArray.length;

	return average;
}

console.log(getAgeAverage(personArray));

※ 기존 함수 !== 화살표 함수 (Arrow Function) 

대표적으로 this가 가리키는곳이 다르다. 자세한 내용(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this)

 

  • 함수호출 - 함수를 사용하는것, 즉 함수를 호출하다 라고 표현 함.
  • 매개변수  - 함수를 호출할 때는 괄호 내부에 들어가는 여러가지 자료
  • 리턴값 - 함수를 호출해서 최종적으로 나오는 결과

 

익명함수

  • 함수는 코드의 집합을 나타내는 자료형
// 기본 형태
function () { }
  • 함수를 코드의 집합이라고 말하는 이유는 중괄호 {...} 내부에 코드가 들어가기 때문

 

함수 사용의 장점

  • 반복되는 코드를 한 번 정의해놓으면 필요시 마다 반복적 사용가능
  • 긴 프로그램을 기능별로 나눠 함수를 정의하면 묘듈화로 전체코드 가독성 상승
  • 기능별 (함수별)로 수정이 가능하므로 유지보수가 간편

 

 익명함수 선언하기

const 함수 = function () {
  // 변수를 생성
  console.log("함수 내부의 코드입니다..1");
  console.log("함수 내부의 코드입니다..2");
  console.log("함수 내부의 코드입니다..3");
};

// 함수호출
함수(); // 함수 안에 있는 console.log 내용들이 나온다.

console.log(typeof 함수); // function
console.log(함수);
//      ƒ () {
//         console.log("함수 내부의 코드입니다..1")
//         console.log("함수 내부의 코드입니다..2")
//         console.log("함수 내부의 코드입니다..3")
//     }
  • 함수는 코드의 집합이므로 실행시 여러 코드를 한 번에 묶어서 실행할 수 있고
  • 필요시 마다 호출하여 반복적 사용이 가능하다.

 

익명함수

  • 함수의 자료형은 function 이며 함수를 출력 ƒ () { } 라고 출력된다.
  • 이때 f는 함수를 나타내고 함수를 출력했을 때 별다른 이름이 붙어있지 않은 것

 

 

선언적 함수

  • 익명 함수와 달리 이름을 정의하여 선언하는 함수
// 1
function 함수() { };

// 2
let 함수 = function() { };

선언적 함수 선언하기

// 함수를 생성
function 함수() {
    console.log('함수 내부의 코드입니다 ... 1')
    console.log('함수 내부의 코드입니다 ... 2')
    console.log('함수 내부의 코드입니다 ... 3')
    console.log('')
}

// 함수를 호출
함수() // 함수 안에 있는 console.log 내용들이 나온다.

// 함수를 출력
console.log(typeof 함수) // function
console.log(함수)
// 이전과 다르게 함수이름이 함께 출력된다.
// ƒ 함수() { 
//     console.log('함수 내부의 코드입니다 ... 1')
//     console.log('함수 내부의 코드입니다 ... 2')
//     console.log('함수 내부의 코드입니다 ... 3')
//     console.log('')
// }

 

매개변수와 리턴 값

  • 매개변수 - 함수를 호출할 때 괄호 안에 넣는 값
  • 리턴 값 - 함수에 매개변수가 입력되고 최종적으로 출력되는 값
// 매개 변수와 리턴 값 예제
function 함수(매개변수, 매개변수, 매개변수) {
	문장
    문장
    return 리턴값
}

=> 매개변수는 input, 리턴값은 output으로 이해하면 쉽고,

리턴값은 함수 내에 return키워드를 입력하고 뒤에 값을 넣어 생성

 

최소값을 구하는 함수 예제

function min(array) {
  let output = array[0];
  for (const item of array) {
    // 현재 output보다 더 작은 item이 있으면
    if (output > item) {
      // output 값을 item으로 변경
      output = item;
    }
  }
  return output;
}

const testArray = [52, 273, 32, 103, 275, 24, 57];
console.log(`${testArray} 중에서`);
console.log(`최솟값 = ${min(testArray)}`);
// 52,273,32,103,275,24,57 중에서
// 최솟값 = 24

 

나머지 매개변수

  • 가변매개변수 함수 - 호출할 때 매개변수의 개수가 고정적이지 않은 함수
  • 나머지 매개변수 - 가변매개변수함수를 구현할 때는 나머지 매개변수 라는 문법을 사용
// 나머지 매개변수 예제
function 함수 이름(...나머지 매개변수) { }

나머지 매개변수를 사용한 min 함수

function min(...items) {
  // 변수 선언
  let output = items[0];
  for (const item of items) {
    // 매개
    if (output > item) {
      output = item;
    }
  }
  return output;
}

console.log(`min(52, 273, 32, 103, 275, 24, 57)`);
console.log(`= ${min(52, 273, 32, 103, 275, 24, 57)}`);
// min(52, 273, 32, 103, 275, 24, 57)
// = 24

 

나머지 매개변수와 일반 매개변수 조합하기

나머지 매개변수는 이름 그대로 나머지, 예제와 같이 일반적인 매개변수 조합이 가능하다.

// 예제
function 함수 이름(매개변수, 매개변수, ...나머지 매개변수) { }

 

나머지 매개변수와 일반 매개변수를 갖는 함수

function sample(a, b, ...c) {
  console.log(a, b, c);
}

sample(1, 2);       // 1 2 []
sample(1, 2, 3);    // 1 2 [ 3 ]
sample(1, 2, 3, 4); // 1 2 [ 3, 4 ]

=> 매개변수 a, b가 먼저 들어가고 남은 것은은 c에 배열 형태로 들어간다.

 

typeof 연산자

배열에 사용하면 object(객체)라고 나오는데, 정확한 확인을 위해서는 Array.isArray() 메소드를 사용해야 한다.

 

 

728x90
반응형