함수
• 함수는 하나의 관련된 업무를 실행하기 위한 코드들을 묶기 위해서 선언되는 프로그램의 구성요소이다
각 업무가 각각의 함수로 구분되어 작성됨으로 코드를 작성하기도 편하고 나중에 필요한 부분의 코드를 식별해서 분석하거나 실행시키기에도 편하다.
• 함수를 메서드라 부르기도 하고 혼용되어 사용되기는 하지만 두 용어에는 엄밀히 이야기하면 차이가 있다.
함수는 영어 단어로 function 즉 기능이라는 뜻의 단어이며 함수내에 작성된 기능에 초점을 맞춘 단어이다.
그런데 클래스내에 함수가 선언될 수도 있는데 이 클래스에 선언된 함수를 메서드라고 부르기도 한다.
메서드는 영어 단어로 method, 즉 수단이라는 뜻이며 함수이지만 클래스내에 선언되어 있어
그 클래스를 이용하는 수단으로 본다는 측면의 용어이다.
정리하자면 모두 동일한 규칙으로 작성된 함수인데 클래스 내에 선언된 함수를 메서드라 부르기도 한다.
▷ 선언과 이용
• 함수를 선언하기 위해서는 function 이라는 예약어를 이용.
• 이름 뒤에 ( ) 가 추가되어야 하며 함수의 Body 부분을 { } 로 묶음
• 선언된 함수는 어디선가 그 함수를 호출해야 실행된다. 함수 호출은 '함수이름( )' 형태임.
//test1 함수 선언 및 이용
console.log('step1');
//아래는 함수의 선언구문이지 실행구문이 아니다.
//선언 자체로 함수의 body가 실행되지는 않는다
//어디선가 이 함수의 호출해야 실행된다.
function myFun1() {
console.log('execute function body');
}
console.log('step2');
//test1 함수 선언 및 이용
console.log('step1');
//아래는 함수의 선언구문이지 실행구문이 아니다.
//선언 자체로 함수의 body가 실행되지는 않는다
//어디선가 이 함수의 호출해야 실행된다.
function myFun1() {
console.log('execute function body');
}
console.log('step2');
//함수가 호출이 되면 함수부분이 모두 실행이 끝나야 밑줄이 실행된다
myFun1() //함수호출
console.log('step3');
console.log('step1');
function myFun1() {
console.log('execute function body');
}
console.log('step2');
myFun1()
console.log('step3');
//함수는 일종의 코드 재사용이다.
//함수를 하나 선언하고 그 함수의 업무가 필요한 곳에서 반복 호출(재사용)
myFun1()
▷ 매개변수와 반환 값
• 함수는 인수와 반환 값을 가질 수 있다
• 인수(argument)는 함수를 호출하는 곳에서 그 함수에 전달되는 값이며 반환 값은 함수내용이 실행되고
함수를 호출한 곳에 전달되는 값이다.
• 함수 입장에서 인수는 Input 이며 반환 값은 output 이다.
• 함수에서 Parameter 와 Argument 가 혼용되어서 사용되기는 하지만 정확한 용어 정리를 해보면
Parameter는 함수를 선언하는 입장에서 그 함수를 호출하는 곳에서 전달하는 값을 받기 위해 선언되는 변수를 의미하며 한국어로 흔히 매개변수라고 한다.
Argument 는 함수를 이용하는 곳에서 그 함수를 호출하면서 전달하는 값을 의미하고
함수를 선언하면서 Parameter 를 선언하고 외부에서 함수를 호출하면서 Parameter 에 Argument 를 전달해서 실행시킨다.
• 인수를 받기 위해서는 함수에 매개변수가 먼저 선언되어 있어야 한다.
매개변수 선언은 함수 선언위치의 ( ) 에 선언한다 어떤 함수를 선언하면서 ( ) 를 생략할 수는 없으며
( ) 부분을 비워둘 수는 있는데 이렇게 되면 이 함수는 외부로부터 인수를 전달 받지 않는 함수가 된다.
만약 함수를 호출하는 외부로부터 인수를 전달받고자 한다면 ( ) 부분에 그 인수를 받기 위한 변수를 선언해주어야 한다.
이를 매개변수라고 하며 콤마( , ) 를 이용해 여러개의 매개변수도 선언이 가능하다.
function myFun2(arg1, arg2) {
console.log(`arg1 : ${arg1}, arg2 : ${arg2}`);
if(arg1 < arg2){
return arg1
}else{
return arg2
}
}
myfun2()
▼ 함수가 실행되고 그 함수를 호출한 곳에 데이터를 반환하고 싶다면 return 예약어를 이용한다
• 함수에 매개변수가 선언되어 있다고 하더라도 함수를 호출하면서 매개변수에 인수를 전달하지 않아도 된다.
• 매개변수에 인수가 전달되지 않으면 그 매개변수는 값을 가지지 못하기 때문에 undefined 가 된다.
//argument, return value
function myFun2(arg1, arg2) {
console.log(`arg1 : ${arg1}, arg2 : ${arg2}`);
if(arg1 < arg2){
return arg1
}else{
return arg2
}
}
let result = myFun2(10,20)
console.log(result);
myFun2()//arg1:undefined arg2:undefined
//myFun2(10) //arg1: 10 arg2:undefined
▷ default parameter
• default parameter 란 함수를 선언하면서 매개변수에 기본 값을 대입할 수 있다는 의미이다.
함수에 매개변수를 선언하고 함수를 호출하면서 그 매개변수에 인수를 전달하지 않으면 undefined 가 되는데
만약 default parameter 가 선언이 되었다면 인수가 전달되지 않는 경우
그 매개변수는 선언하면서 지정한 값을 가지게 된다.
//default parameter
function myFun3(arg1, arg2 = 0) {
console.log(`arg1 : ${arg1}, arg2 : ${arg2}`);
}console.log('``````````');
myFun3() // unde 0
myFun3(10) // 10 0
myFun3(10,20) // 10 20
▷ reset parameter
• Rest Parameter 란 나머지 매개변수라는 의미이며… 으로 선언되는 매개변수이다.
… 이 추가된 매개변수이며 하나의 함수내에서 하나의 매개변수만 Rest Parameter 로 선언할 수 있다.
그리고 Rest Parameter 로 선언한 매개변수는 그 함수의 매개변수들 중 가장 마지막에 위치해야 한다.
Rest Parameter 는 하나의 매개변수이지만
여러 개의 값을 가질 수 있는 매개변수가 됨으로 내부적으로 배열로 만들어 진다.
함수 내부에서는 Rest Parameter 의 매개변수를 배열로 이용한다.
//reset parameter
function myFun4(arg1, ...arg2) {
console.log(arg1);
//rest parameter는 배열
if(arg2.length>0){
for(let i=0; i<arg2.length; i++){
console.log(`arg2[${i}]= ${arg2[i]}`);
}
}
}
myFun4(10,20) //arg2[0] = 20
myFun4(10,20,30,40,50)
함수 표현식
• 함수 표현식이란 함수가 변수처럼 선언되는 것을 의미한다.
• 소프트웨어 개발에서 흔히 표현식(Expression) 이란 값이 도출되는 구문을 의미한다.
그러므로 표현식 구문은 변수에 대입되어 사용이 가능하다.
또한 함수 표현식이란 함수를 선언하는데 이 선언된 함수를 변수에 대입할 수 있다는 의미이다.
//선언문 스타일의 함수 선언
function myFun1() {
console.log('myFun1 call');
}
//표현식 스타일의 함수 선언
const myFun2 = function() {
console.log('myFun2 call');
}
myFun1()
myFun2()
화살표 함수
• 화살표 함수(Arrow Function) 은 다른 소프트웨어 언어에서는 람다함수(Lambda Function) 이라고 불리우는함수이며
자바스크립트에서는 함수 선언에 화살표( => ) 가 들어간다고 해서 화살표 함수라고 칭하고 있다.
▼ 화살표 함수는 함수명을 주지 않음으로 이렇게 선언된 함수를 외부에서 호출할 방법이 없다.
즉 일반적으로 화살표 함수는 변수에 대입되어 함수 표현식으로 선언된다.
▼ 만약 화살표 함수의 내용이 한줄이라면 함수 내용을 묶는 { } 을 생략할 수 있다.
▼ => 왼쪽의 매개변수가 하나라면 ( ) 를 생략할 수도 있다.
//arrow function
const myFun3 = () => {
console.log('myFun3 call');
}
myFun3()
console.log('---------------------------------');
//화살표 함수, 결과리턴
const myFun4 = (arg1) => {
console.log(`myFun3, arg1 : ${arg1}`);
return 20
}
let result4 = myFun4(10)
console.log(result4);
console.log('---------------------------------');
//함수의 body가 한줄이라면 {} 생략 가능하고
//{} 을 생략 했다면 그 한줄의 실행 값이 자동 리턴. (return 안써도됨)
const myFun5 = (arg1) => arg1 *10
let result5 = myFun5(10)
console.log(result5);
console.log('---------------------------------');
//매개변수가 하나면 ()도 생략가능
const myFun6 = arg1 => arg1 *10
let result6 =myFun6(10)
console.log(result6);//100
람다함수
• 자바스크립트에서는 람다(Lamda) 함수를 화살표 함수라고 부른다
람다함수는 함수인데 이름이 없는 함수이며 작성규칙이
화살표를 기준으로 왼쪽이 매개변수, 오른쪽이 함수의 내용이다.
소프트웨어 언어에 따라 약간의 문법 차이는 있는데
화살표를 어떤 언어는 -> 을 사용하거나 아니면 => 을사용하기도 한다
약간의 문법차이는 있지만 화살표를 중심으로 이름없는 함수를 선언하겠다는 의미는 동일하며
이를 통칭해서 람다함수라고 부른다.
지역변수와 전역변수
• 변수 선언 위치에 따라 그 변수의 이용 범위가 다르다.
변수 선언이 함수 외부에 작성되어 있다면 이 변수는 전역변수(Global Variable) 이라고 부르며
어떤 함수내부에 선언되어 있다면 이 변수는 지역변수(Local Variable) 이라고 부른다.
• 전역 변수는 프로그램 코드 전체 위치에서 이용이 가능하다.
하지만 지역변수는 그 변수가 선언된 함수 내부에서만 사용할 수 있다.
//test1 - local variable va global variable
let data1 = 10 //global variable
function myFun(arg1){
let data2 =20
//함수 내부에서 global , local varable 이용가능
console.log(`${data1}, ${data2}, ${arg1}`);
}
myFun(30) //10,20,30
console.log(data1) //10;
//매개변수는 그 함수 내에서 선언된 local variable
// console.log(arg1); //arg1 is not defined
// console.log(data2); //data2 is not defined
스코프
• 소프트웨어 개발 혹은 IT 전반에 사용되는 용어이며 직역하자면 ‘범위’이다.
무언가 영향을 미치는 범위를 스코프라고 하는데
우리가 살펴본 지역변수는 그 지역변수를 선언한 함수내에서만 사용할 수 있고
지역변수가 이용되는 범위가 함수내인 것. 그래서 흔히 ‘지역변수는 함수 스코프에서 이용된다’ 라는 표현을 쓴다.
익명함수
• 익명함수란 특별한 규칙이 있는 것이 아니라 함수를 선언하면서 함수명을 지정하지 않는 함수이다.
• 익명함수로 함수를 선언하면 그 함수를 변수에 대입해서 그 변수명으로 이용하고
함수를 변수에 대입해서 선언하는 방식을 흔히 ‘함수 표현식’이라고 한다.
익명함수를 선언하는 대표적인 사례 중 하나가 함수를 어떤 다른 함수의 매개변수 혹은 반환값으로 이용하는 경우이다.
High Order Function
• 함수가 매개변수 혹은 리턴 값으로 함수를 이용할 수 있는 것을 용어로
High Order Function 이라고 부르며 한국어로는 '고차함수' 라고 한다.
• 소프트웨어 언어 전반에서 사용되는 용어이며 함수를 매개변수 혹은 반환값으로 이용하여
함수와 함수를 유기적으로 연결해서 업무가 진행되게 하고자하는 기법이다.
//hof
function test1() {
console.log('test1');
}
function test2() {
console.log('test2');
}
function myFun2(arg) {
arg()
return test2
}
let result = myFun2(test1)
result()
//함수를 어떤 함수의 매개변수에, 그 함수의 결과로 리턴
//그곳에서만 사용되는 함수다. 굳이 정식으로 선언할 필요가 있을까?
function myFun3(arg) {
arg()
return () => console.log('test2');
}
let result3 = myFun3(()=> console.log('test1'));
result3()
'BootCamp Review' 카테고리의 다른 글
| 2024.09.12 (Day 8) - JavaScript Event Programming (0) | 2024.09.12 |
|---|---|
| 2024.09.11 (Day 7) - JavaScript Scope 와 Hoisting (0) | 2024.09.12 |
| 2024.09.10 (Day 6) -JavaScript Operator (0) | 2024.09.10 |
| 2024.09.09 (Day 5) -JavaScript Operator (0) | 2024.09.09 |
| 2024.09.05 (Day 4) -JavaScript 변수와 데이터 타입 (0) | 2024.09.05 |