JavaScript 기초 : 추상화 2. 함수 정의와 호출

2. 함수(Function) 정의와 호출 

 

기본적으로 코드는 왼쪽에서 오른쪽, 위에서 아래로 읽고 쓴다. 

그래서 함수를 정의하고 호출 할 때도 위에서 아래로 왼쪽에서 오른쪽으로 순서대로 정의하고

순서대로 호출한다고 생각하면 된다. 

 

 

함수를 정의하는 것과 함수를 호출하는 것은 다르다. 

 

 

함수를 정의할 때는

 

function 함수이름(파라미터){  함수 내용  }

 

이렇게 정의하면 된다. 

 

그리고 함수를 호출할 때는 

 

함수 이름(파라미터)

 

이렇게 써주면 된다. 

 

 

함수를 정의한 뒤 함수를 호출하면

함수 내에 있는 모든 내용들을 호출한다. 

함수를 호출한 뒤에는 다음 줄로 이동한다. 

 

예시를 살펴보자.

fucntion square(x){
	return x * x;
}

console.log('함수 호출 전');
square(5)
console.log(square(5));
console.log('함수 호출 후');

 함수 square를 정의해주었다.

콘솔에 무엇이 출력될까?

 

일단 

함수 호출 전 이라는 글자가 출력될 것이다.

그리고 square 함수를 호출했지만 console.log, 파이썬으로 치면 print를 해주지 않았기 때문에,

즉! 콘솔에 출력하라는 명령을 하지 않았기 때문에 아무것도 출력되지 않는다. 

그리고 이제 square 함수를 출력하라는 명령 console.log가 나왔다. 그럼 5 * 5인 25가 출력된다.

마지막은 함수 호출 후 라는 글자가 출력된다. 

 

정리해보자면

 

함수 호출 전

25

함수 호출 후

 

이렇게 콘솔에 출력된다. 

 

좀 더 어려운 예시를 살펴 보자!

fucntion square(x){
	return x * x;
}

console.log('함수 호출 전');
console.log(square(2) + square(7));
console.log('함수 호출 후');

 이 경우는 어떨까?

일단

글자 함수 호출 전이 출력된다.

그리고 square(2) 가 실행된다. 즉 2 * 2 = 4가 되고, square(7)이 실행된다. 즉 7 * 7 = 49가 실행된다.

 

그럼 console.log( 4 + 49 )가 되는 것이고, 이 결과는 숫자 53이 출력된다는 것을 의미한다.

마지막으로 함수 호출 후가 출력된다.

 

정리해보면

 

함수 호출 전

53

함수 호출 후

 

이렇게 콘솔에 출력된다. 

 

마지막 예시를 살펴보자.

function participant(name){
	console.log(`${name} 참가자가 수업에 참여했습니다.`);
}

participant('윤주');

participant 라는 함수는 name을 파라미터로 받는다.

그리고 name + 참가자가 수업에 참여했습니다. 라는 글을 출력한다. 

이 때 문자열을 한 번에 써주려고 백팁( ` ) 을 사용했으며 템플릿 문자열 ${ } 을 사용했다. 

 

이제 participant라는 함수를 호출해보자!

파라미터에 '윤주'라는 이름이 들어갔다.

 

결과는 어떻게 출력될까?

 

윤주 참가자가 수업에 참여했습니다.

 

이렇게 출력될 것이다! 

 

함수를 정의하고 호출하는 것은 매우 기본적이고 중요한 내용이다.

 

여러 번 반복 연습 해보는 것이 필요하다! 

 

다음 글에서는 return문에 대해 이해해보도록 하자!