7장 함수

채팅

설문조사

 

코딩창

함수란? 

자바스크립트에서 함수란 코드의 집합을 나타내는 자료형입니다.

자료형이기 때문에 함수를 변수에 할당할 수 있습니다.

또 하나의 특징은 리턴 값으로 값이나 함수를 반환할 수 있습니다.

함수를 만들면 함수안에 있는 코드의 집합을 언제든지 재사용할 수 있습니다.

let num = 1;
function add() {
  return num + 1;
}

console.log(add());
///////////////////

function add(num) {
  return num + 1;
}

console.log(add(1));

///////////////////
function add(num) {
 console.log(num + 1);
}

add(1);

 

형태

1. 함수 선언식

선언식의 문법입니다. 

매개변수란 외부에서 함수로 전달하는 변수입니다. 함수를 실행할 때 필요한 값을 넣어서 실행하게 됩니다.

return 부분은 마지막에 반환할 값인데 상황에 따라서 반환할 값이 없는 경우 return문이 없어도 상관없습니다.

 

함수 선언:

function 이름 (매개변수, 매개변수, .... ) {
    문장
    문장
    ...
    return 함수 or 값
}

// 예시
function add(num) {
  console.log(num + 1);
}

함수 호출:

함수 호출은 선언된 함수를 사용하는 일입니다.  사용법은 선언한 함수 이름 뒤에 괄호를 붙여 사용하면 됩니다.

호출할 때 매개변수가 있다면 함수 실행시 괄호 안에 함수를 선언할 때의 매개변수의 순서대로 값을 넣어주면 됩니다.

 - 매개변수가 있을 때
// 함수 선언 예시
function add(num) {
  console.log(num + 1);
}

// 호출 예시
add(1);

 - 매개변수가  없을때
// 함수 선언 예시
function printConsole() {
  console.log(1);
}

// 호출 예시
printConsole();

function add(num1, num2) {
  console.log(num + num2);
}

add(1,2);

let num1 = 10;
let num2 = 20;
add(num1, num2);

function minus(num1, num2) {
	return  num1 - num2;
}

console.log(minus(10,1));

2. 함수 표현식

함수 표현식은 함수를 변수에 할당 할수 있다고 했었습니다. 아래의 예시를 봅시다

그리고 함수표현식을 선언할 때 변수명과 함수명은 중복되어도 상관없습니다

const 변수명 = function 함수명(매개변수 ...) {
	....
	return
	
}

const add = function plus() {
	console.log('plus');
}

add();

 

함수표현식인 항상 호출부 보다 선언부가 위에 있어야 합니다

함수 선언식은 순서 상관없이 오류가 나지 않습니다.

WHY? -----> 호이스팅 때문입니다. 호이스팅은 자바스크립트가 실행되기전 변수나 함수의 선언문들을 scope 최상위로 끌어 올리는 작업입니다. 그러나 함수 표현식은 호이스팅이 일어나지 않아 오류가 나게 되는것입니다

(scope는 범위 입니다. 즉 변수와 함수를 사용할 수 있는 범위)

add함수의 scope는 { } 안의 부분입니다.  let scope의 scope는 전체입니다

let scope = null;

add();
const add = function plus() {
	console.log('plus');
}

 

 

아래는 함수 표현식을 사용해 minus라는 함수를 만들고 doIt이라는 함수에 매개변수로 전달했습니다. 

함수 선언식을 사용했다면 매개변수로 함수를 전달하는 기

const minus = function minusFunc(n) {
  console.log(n);
};

function doIt(min) {
  min(10);
}

doIt(minus);

 

그리고 함수 표현식은 변수에 할당할 수 있지만 변수에 할당하는 과정 없이 바로 전달할 수 있습니다

위의 예시와의 차이를 봅시다.

doIt(minus)의 매개변수 자리에 minus대신 함수표현식을 전달할 수도 있습니다. 

function doIt(min) {
  min(10);
}

doIt(function minusFunc(n) {
  console.log(n);
});

Tip

일반적으로 코드를 작성할 때 함수 표현식에서는 ;(세미콜론)을 붙이고 함수 선언문으로 작성할 시에는 ;(세미콜론)을 붙이지 않는다.  

종류

1. 함수

이름이 있는 위에서 배운 일반적인 함수들입니다. 

function funcDeclarations() {
  return 'A function declaration';
}
funcDeclarations()


let funcExpression = function funcExpression() {
    return 'A function expression';
}
funcExpression();

 

2. 익명 함수

이름이 없는 함수입니다. "함수 표현식"이며 직접 재사용하는 경우가 아닐 때 또는 한 번만 실행할 때 굳이 이름을 붙이지 않고 사용하게 됩니다.

함수 표현식에서는 변수에 함수를 할당하기 때문에 function 뒤에 오는 함수명은 무의미해지게 되기 때문에 이름 주로 사용하지 않습니다. 

function () {

}

const 함수명 = function() {

}

(function(){
  return 10;
})()

////
const doIt = function(min) {
  min(10);
}

doIt(function(n) {
  console.log(n);
});

4. 콜백 함수

콜백 함수는 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말합니다.

콜백함수는 실행 순서를 제어할 때 많이 쓰는 패턴이며 어떤 일을 시켜놓고 그 일이 끝났을때 결과를 받아서 후속 작업을 하고 싶을때 콜백함수를 사용합니다

 

콜백 함수 예시

let first = 10;
let second = 20;
let result = 0;

function add(x, y) {
  return x + y;
}

function getResult(callback) {
  setTimeout(function() {
    result = add(first, second);
    console.log(result);
    callback();
  }, 500);
}

getResult(function() {
  first = 20;
  result = add(first, second);
  console.log(result);
});

 

 

콜백함수는 비동기 처리에 많이 사용된다

비동기란 동작이 완료되는것을 기다리지 않고 넘어가버리는 자바스크립트의 특성입니다

서버에 요청하여 결과를 받아 오는 예시입니다.

여기서 $.get(...)을 실행하고 데이터가 서버에서 오기까지 기다리지 않고 바로 resulData를 반환해버립니다. 

위에서 resultData는 초기화를 하지 않았기 때문에 undefined일 것이고 console로 찍어보면 undefined 를 보여주게 됩니다. 

 

function axios() {
	let resultData;
	$.get('https://flash/value, function(response) {
		resultData = response;
	});
	return resultData;
}

console.log(axios()); // undefined

콜백함수를 통한 비동기 처리

$.get(...)을 실행하고 익명함수로 response가 넘어와야지 callbackFunc()이 실행될 수 있는 구조입니다. callbackFunc는 response 인자가 넘어오지 않으면 실행되지 않을 것입니다

function axios(callbackFunc) {
	$.get('https://flash/1', function(response) {
		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
	});
}

axios(function(resultData) {
	console.log(resultData); // $.get()의 response 값이 resultData 전달됨
});

콜백지옥

https://kyj7337.github.io/posts/promise_

콜백지옥을 해결하기 위한 패턴

1. promise .then .catch (es6)

2. async await (es7)

5. 화살표 함수 (es6)

화살표함수는  ECMAscript 2016년 문법이다. 함수의 선언문과 표현식에 약간 변화를 주었는데 가독성이 좋아졌고 코드가 간결해 졌다. 

그리고 화살표함수는 익명함수로만 사용이 가능하기 때문에 함수표현식으로 작성한다

 

기존의 es5의 함수 선언식과 표현식 - function 키워드가 무조건 들어간다

function add() {
  return 1 + 3;
}

const minus = function() {
  return 10 - 1;
};

console.log(add());
console.log(minus());

es6의 화살표함수 - function 키워드가 없어지고 =>가 생겼습니다

const add = () => {
  return 1 + 3;
};

const minus = (n1, n2) => {
  return n1 - n2;
};

console.log(add());
console.log(minus(10, 20));

 

 

문제

Q1, buy함수를 이용해 사과를 사려한다. buy의 첫번째 인자는 현재금액이며 아래의 예시에는 4000원이다. 그 다음의 콜백함수는 사과를 구매 후 남은 잔액을 구하는 함수이다. 그렇다면 buy함수안에서 현재금액이 사과의 가격보다 같거나 많으면 사과를 사고  아니면 "잔액이 부족합니다" 를 출력하시오

const buy = (money, ) => {
  const apple = 1000;

};

buy(4000, (va1, val2)=> {
    console.log(va1 - val2)
})

Q2. 함수 선언식과 표현식의 차이를 설명하고 예시를 각각 들어보세요

 

Q3. 화살표함수를 사용하여 작동하는 코드를 작성해 보세요