JavaScript

#12 자바스크립트(JavaScript) - 함수(function)

에이블디 2022. 4. 4. 16:22

안녕하세요 여러분! 에이블디 입니다!

 

이번 시간에는 함수(function)에 대해 알아볼 거예요!

 

함수는 자주 실행해야 하는 기능에 필요한 여러 가지 코드를 사용자가 직접 하나의 함수에 넣어서 만들어 사용하는 것인데요, 함수에 별도의 이름을 붙여 개발자가 필요할 때마다 해당 함수를 실행할 수 있습니다.

그리고 함수는 개발자가 직접 만들어 사용할 수도 있지만 자바스크립트에서 미리 만들어져 개발자들이 가져다 사용할 수 있는 내장 함수도 있습니다.

 

그럼 간단한 함수를 직접 만들어 사용해 볼까요?

숫자를 더해주는 기능을 가진 함수를 만들어 보도록 하겠습니다!

함수를 작성할 때는 function을 사용하고, 중괄호({}) 안에 함수에서 실행할 여러 코드를 작성해주면 됩니다!

 

숫자를 더해주는 기능을 하진 함수니까 sumNumber라는 이름으로 작성해 볼게요!

function sumNumber(){
    var sum = 1 + 1;
    console.log(sum);
}

 

함수를 작성하는 것을 '함수를 선언한다'라고 하는데요! 위와 같이 함수를 선언해 줬으면 실행도 시켜봐야겠죠??

 

다음과 같이 소스를 입력해 함수를 실행해 보도록 하겠습니다.

sumNumber();

함수를 실행해 보니 함수 안에 작성한 1 + 1 코드가 실행되어 콘솔 로그로 받아 2가 출력된 모습을 볼 수 있습니다!

위와 같이 함수를 실행하는 것을 '함수를 호출한다'라고 합니다.

 

웹 브라우저에서는 자바스크립트 소스를 해석할 때 함수 선언 부분을 가장 먼저 해석하게 되는데요, 그래서 개발자가 함수를 어느 곳이든 선언해 놓기만 하면 함수를 선언한 위치와 상관없이 함수를 실행할 수 있습니다.

 

위의 코드에서 함수를 선언한 위치보다 먼저 함수를 호출해 보겠습니다.

sumNumber();

function sumNumber(){
    var sum = 1 + 1;
    console.log(sum);
}

함수를 선언한 위치보다 먼저 함수를 호출했는데도 문제없이 동작되는 것을 확인할 수 있습니다.

이렇듯 함수 선언 위치는 프로그램 흐름에 영향을 주지 않는 것을 알 수 있네요!

 

이번 시간에는 함수에 대해 간단히 알아보았는데요!

다음 시간에는 함수에 대해 좀 더 알아보는 시간을 가져보도록 하겠습니다!