JavaScript(JS) - 함수(Function)

조성주·2023년 2월 24일
1

JavaScript

목록 보기
7/21

✅ 함수

  • 함수(function)는 다수의 명령문을 코드 블록으로 감싸고, 하나의 실행 단위로 만든 코드의 집합이다.
  • 유사한 동작을 하는 코드를 하나로 묶어 범용성을 학대시킨 블록 코드이다.
  • 함수는 정의 부분과 호출부분으로 구성한다.
  • 함수는 가급적 한가지 일만 하며, 매개변수는 최대 3개 이내로 작성을 권장한다.
  • 함수는 배열의 요소(element)나 객체의 속성(property)에 저장도 가능하다.

인자(Argument) : 함수 실행 시 넘기는 값.
매개변수(parameter) : 인자로 받아온 값. 쉽게 더 말하면 함수 호출했을 때 넘어온 값

function test(x) {
	if(x > 10) {
    	console.log(`${x}는 10보다 큽니다.`);
    }
}

test(11)

여기서 function test(x) x가 매개변수, test(11)에 11이 인자.

1. 함수 선언

1) 함수 선언식 (Function Declarations)

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

2) 함수 표현식 (Function Expressions)

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

3) 화살표 함수 (Arrow Function)

const add = (x, y) => x + y;

2. 함수의 매개변수 초기화 값 지정

  • 자바스크립트 함수는 매개변수와 인자의 개수가 일치하는지 확인하지 않는다.
  • ES6에서 도입된 기본값을 통해 undefined 변수가 들어올 경우 초기화 값(기본 값)을 지정할 수 있다.
    매개변수를 안넣으면 undefined가 들어간다.

아래의 코드로 확인해보자.

const fnc = (x, y) => {
	return x + y;
}

console.log(fnc(10));

결과 : NaN

매개변수와 인자 개수를 맞추지 않아 y가 undefined로 들어가 결과가 NaN으로 나오는 것을 확인할 수 있다.
따라서, 이런 경우에는 ES6에서 도입된 방법으로 초기화 값(기본 값)을 지정할 수 있다.

const fnc = (x, y = 10) => {
	return x + y;
}

console.log(fnc(10));

결과 : 20

3. 재귀 함수

  • 재귀 함수는 함수 스스로 자신을 참조해 호출하면서 동일한 코드가 계속적으로 수행되는 함수 호출 방법이다.
  • 재귀 함수는 특정 조건이 됐을 때 자신을 그만 호출되도록 제한하는 exit code가 필요하다. 그 이유는 Stack Overflow가 되기 때문이다.
const fnc = (x) => {
	x++;
	console.log(x)
    fnc(x)
}

fnc(1)

위에 코드와 같이 재귀함수를 사용하면 stack overflow가 된 것을 확인할 수 있다. 따라서, 자신을 그만 호출되도록 제한하는 exit code를 넣어줘야한다.

const fnc = (x) => {
	x++;
	console.log(x)
    if(x > 12) return; // exit code
    fnc(x)
}

fnc(1)

이렇게 if문으로 x가 12보다 클 때 return을 해준다는 exit code를 작성해주면 자기 자신을 그만 호출하기 때문에 함수 실행이 종료되어 stack overflow도 되지 않는다.

4. 콜백함수

  • 콜백함수(Callback Function)란 다른 함수의 매개변수로 전달되어 수행되어지는 함수이다.

이렇게 forEach문에 익명함수를 넣어 콜백함수로 사용할 수 있고,

let num = [1, 2, 3, 4, 5]
num.forEach(function (i){
	console.log(i)![](https://velog.velcdn.com/images/tjdwn9753/post/b5fd0775-0db1-4e4c-9c9c-8b3f7e69fad5/image.png)

})

num.forEach((i) => {
  console.log(i);
});

이렇게 함수명만 매개변수로 넣어 콜백함수를 실행할 수 있습니다.

const callBackFunc = () => {
  console.log("콜백함수가 실행됩니다.");
};

const fnc = (param, callback) => {
  console.log(`파라미터는 ${param}이고 고차함수가 먼저 실행됩니다. 그리고`);
  callback();
};

fnc(10, callBackFunc);

여기서 고차함수라는 것이 있는데, 위에 코드에서 fnc가 고차함수이다.

고차함수(Higher-order Function)란 매개변수로 함수명을 받아와 콜백함수가 실행되기 전에 실행되는 함수이다.

5. 함수 호출됐을 때 값 복사

1) call by value

  • 값에 의한 복사로 함수 내에서 매개 변수 값을 변경시켜도 영향이 미치지 않는다.
  • 원시 타입(primitive type)을 매개 변수로 넘겼을 때 발생한다.
let a = 1;
let add = function (b) { 
	b = b + 1 
};

add(a);
console.log(a); // output: 1

2) call by reference

  • 주소에 대한 복사로 함수 내에서 매개변수내 값을 변경시키면 원본 데이터에도 영향을받는다.
  • 객체 타입(object type)을매개 변수로 넘겼을 때 발생한다.
var a = { v : 1};
var add = function (b) { 
	b.v = b.v + 1, 
};

add(a)
console.log(a.v); // output: 2
profile
프론트엔드 개발자가 되기 위한 기록

0개의 댓글