[자바스크립트] 함수와 함수를 이용한 프로그램

함수란?

프로그램은 많은 명령을 순서대로 하나씩 처리합니다. 이때 프로그래머가 처리해야 할 문제에 따라 기능별로 여러 명령을 묶어 놓은 것을 '함수'라고 말합니다.

 

함수는 특정 작업 또는 일련의 작업을 수행하는 재사용 가능한 코드 블록을 말합니다. 자바스크립트에서 함수는 기본 구성 요소이며 논리를 캡슐화하고 코드 재사용성을 촉진하며 코드를 모듈 단위로 구성하는 데 사용됩니다.

 

간단히 말해서 자바스크립트의 함수는 일련의 명령을 포함하는 명명된 컨테이너와 같습니다. 이러한 명령은 함수가 호출될 때마다 실행될 수 있으므로 매번 코드를 다시 작성할 필요 없이 프로그램 전체에서 동일한 코드를 여러 번 사용할 수 있습니다.

함수 정의와 실행

내장 함수뿐만 아니라 프로그램을 작성하면서 필요한 기능 또는 자주 사용할 것 같은 기능은 그 기능에 필요한 명령을 사용자가 직접 묶어서 함수로 만들 수 있습니다.

 

함수가 어떤 명령을 처리해야 할지 미리 알려주는 것을 '함수 선언'이라 하고, 선언한 함수를 사용하는 것을 '함수 실행'이라고 말합니다.

 

소스를 살펴보겠습니다.

이 소스에서는 사람의 이름을 매개 변수로 사용하고 인사말 메시지를 반환하는 'greetPerson'이라는 함수를 정의합니다.

함수를 정의한 후에는 다른 인수(이름)를 사용하여 여러 번 호출하여 함수 내부의 코드를 실행할 수 있습니다.

 

버튼을 누르면 함수를 실행하는 프로그램

이제 방금 배운 함수를 덧셈을 해주는 프로그램에 적용시켜보겠습니다.

 

우선 HTML로 소스를 작성해보겠습니다.

위 HTML 소스를 실행하면 아래와 같은 모습으로 웹페이지가 나타나게 됩니다.

하지만 HTML로는 겉모습만 구현할 뿐 계산하는 기능은 없습니다.

그렇기 때문에 자바스크립트로 사용자에게 숫자를 입력 받고 더해주는 기능을 만들겠습니다.

저는 소스를 이렇게 작성하였습니다.

여기서 주의할 점은 자바스크립트 파일 이름은 반드시 script.js로 해야 합니다. 그 이유는 HTML 소스 17행을 보면 계산을 해주는 함수의 기능을 script.js 라는 이름을 가진 파일에서 가져오기 때문입니다.

 

이제 HTML 파일을 실행시켜보겠습니다.

위 이미지처럼 첫 번째로 322라는 숫자를 입력받고 두 번째로 1029라는 숫자를 성공적으로 입력 받고 옆에 있는 Calculate Sum이라는 버튼을 눌렀을 때 자바스크립트 파일에서 caculateSum() 함수가 실행되고 그 결괏값이 아래에 나타납니다. 함수를 선언해두면 이렇게 필요한 곳에서 함수를 실행할 수 있습니다.

 

감사합니다.

---

틀린 부분이 있거나 더 좋은 내용 훈수 환영합니다!

공감과 댓글 부탁드립니다.