학습 목표
- 함수가 무엇인지 이해할 수 있다.
- 함수 선언과 호출의 기초적인 작동 원리를 이해할 수 있다.
- 함수를 작성할 수 있다.
- 함수를 사용하여 값을 반환할 수 있다.
- 함수 그 자체 (function)와 함수의 호출 (function ())을 구분하여 사용할 수 있다.함수 (function)
함수 (function)란?
= 입력에 따라 그에 맞는 작업을 하도록 하는 명령들의 집합 혹은 단위.
논리적으로 수행할 일련의 명령을 재사용 가능하게 담아 놓는 것으로
하나의 특별한 목적의 작업을 수행하기 위해 독립적으로 설계된 프로그램 코드의 집합이다.// 함수를 사용하는 가장 큰 이유는 반복적인 프로그래밍을 피하기 위해서다.
따라서 함수화를 해 놓으면, 굳이 그 명령에 대한 반복적인 부연설명이 필요없다.
// 입력된 값에 따라 정의된 기능이기 때문에 원하는 논리(logic)를 하나의 함수 안에 넣어 실행만 한다면,
원하는 동작을 원하는 만큼 계속 실행하여 반복할 수 있다.
// 함수를 생성하는 것을 '함수를 선언한다'고 하고, 함수를 실행하는 것을 '함수를 호출한다'고 한다.
이때, 함수를 선언했다고 해서 값이 나오는 것이 아니라 함수를 호출해야 함수를 사용할 수 있다.
-
함수 선언하기
function example() {
let stuff = 1;
return stuff;
} -
함수 호출하기
example();
--> 1이 반환된다.- 함수 이름 뒤에 소괄호()를 하면, 함수는 호출되고 값을 반환한다.
- 함수를 호출할 때는 매개변수에 넣고 싶은 데이터를 넣는다.
이렇게 함수를 호출할 때 제공하는 값을 '인자'라고 한다. - 'example'이라는 함수 이름을 썼다고 해서 함수가 호출되지는 않는다.
꼭 함수 뒤에 괄호를 붙여서 함수를 호출해야 한다.
함수 만드는 방법
| 입력값이 없는 경우 | 입력값이 있는 경우 |
|---|---|
| > function 함수이름( ) {실행할 내용} | > function 함수이름 (매개변수) { 실행할 내용} |
Ex) 입력값(매개변수)이 없는 함수 --> 선언할 때, 이름 뒤의 괄호에 아무것도 넣지 않는다.
function noParameter() {
let vegetable = '당근';
return vegetable;
}
noParameter(); // '당근' 반환Ex) 입력값(매개변수)이 있는 함수 --> 선언할 때, 이름 뒤의 괄호에 매개변수를 넣는다.
function yesParameter(carrot) {
return carrot;
}
yesParameter('당근'); // '당근'매개변수
매개변수란?
// 함수에 입력된 값을 임시로 저장해 두기 위한 변수로 전달된 인자를 받아들이는 변수다.
// 괄호 안에 매개변수의 이름은 자유롭게 짓되, 어떤 게 들어오는지 명확하게 알려주는 단어가 좋다.
// 괄호 안에 여러 개의 매개변수를 적을 수 있고, 함수를 호출할 때에도
여러 개의 데이터를 입력해 주어 여러 개의 매개변수를 가지는 함수를 만들 수 있다.
이때, 함수를 호출할 때 입력해 주는 입력값의 개수는 반드시 매개변수의 개수와 일치해야 한다.
// 괄호 안에 숫자, 문자 등을 전부 넣을 수 있다.
다만, 함수 안에서의 매개변수의 쓰임을 생각하며, 매개변수를 설정하고 인자를 넣어야 한다.
리턴
return(리턴)이란?
// 함수를 만들 때에는 함수 안에 'return' 키워드를 꼭 써야 원하는 값을 변환할 수 있다.
'return' 키워드를 사용하지 않는다면, 함수는 값을 반환하지 않는다.
// 리턴은 가장 마지막에 하는 행동이기 때문에 함수를 실행하는 중 리턴을 쓰면 함수가 종료된다.
// 따라서 값을 전혀 출력할 필요가 없음에도 함수를 강제로 종료시키기 위하여 리턴을 사용하기도 한다.
// 함수를 표현할 때, 크게 '선언식'과 '표현식'으로 나눈다.
선언식 함수
선언식 함수란?
=function keyword를 선두로 함수를 표현한다.// 'function' keyword 바로 옆에 함수명을 표시하여 함수를 작성한다.
[function name(parameter) {}]
(1) (2) (3) (4)
- (1) keyword : 함수를 만들 때, 이 부분에 'function' 키워드를 사용한다.
- (2) name (함수명) : 함수를 호출(실행)할 때, 사용할 이름을 작성한다.
- (3) parameter (매개변수) : 함수에 필요한 변수가 있으면, 이곳에 작성한다.
넣을 변수가 없다면, 빈괄호 ()로 작성한다.
- (4) body : 함수가 호출(실행)되면, 실행할 코드를 이곳에 작성한다.
- (5) return : 함수의 값을 반환할 때, 'return' 키워드를 사용한다.Ex)
function example() { // example이라는 함수를 선언한다. (1) , (2) , (4)
let stuff = 1; // stuff라는 변수를 설정하여 1을 할당한다. (3)
return stuff; // 값을 반환한다. (5)
} // (4)표현식 함수
표현식 함수란?
= 변수에 할당하는 것처럼, 함수 이름을 변수에 할당하여 함수를 표현한다.// 선언식처럼 함수명을 직접적으로 사용하지 않는다.
[let name = function(parameter) {실행할 내용}]
- 해라 (let = 변수를 선언할 때 사용) / 함수명을 (선언 = 함수 이름을 정함) /
function (함수를 만들 때 사용) / ~의 기능을 하는 (parameter = 매개변수, 함수에 필요한 변수를 넣음) Ex)
let example = function() {
return("stuff");
}// 차이점 :
선언식과 표현식 함수의 차이는 hoisting(끌어올림)의 유무 차이다.
선언식은 hoisting이 일어나며 표현식은 hoising이 일어나지 않는다.
(hoisting : 함수 안에 있는 선언들을 모두 위쪽으로 끌어 올려 해당 함수의 유효 범위의 최상단에 선언되도록 하는 것.)
<실습 1>
어떠한 값을 넣어도 1씩 더해질 수 있는 함수를 만들어라.
--> number가 10이라면, result = 10 +1이고, 입력된 10보다 1을 더한 결과로 11을 리턴한다.
function addOne(number) {
let result = number +1;
return result;
}
addOne(1); // '2'가 반환
addOne(10); // '11'이 반환
addOne(20); // '21'이 반환<실습 2>
// 함수를 선언하고 리턴하는 방법을 실습해봅시다.
// 1. function 키워드를 사용해서 'test'라는
// 함수명을 가진 함수를 만들어보세요.
// 2. let 키워드를 사용해서 'carrot'이라는 변수를 선언하세요.
// 3. 당근 이모지(🥕)를 문자열로 할당해주세요.
// 4. 당근을 리턴해주세요.
// 👇 그럼, 여기서부터 코드를 작성해보세요 :)
function test() {
let carrot = '🥕';
return carrot;
}
// 또는
function test() {
let carrot;
carrot = '🥕';
return carrot;
}
export default test;<결과물>
