본문 바로가기
JS/JS 기초

JS- 함수(지역 변수, 전역 변수, 매개 변수)

by 쫑뚱이 2022. 8. 19.
728x90
반응형

JS- 함수(지역 변수, 전역 변수, 매개 변수)


오늘은 프로그램을 개발할 때

구성되는 주요 구성 요소인 함수를 선언하는 방법인

함수 선언문 방식과

함수에서 사용되는 몇 가지 변수 들에 대해 알아보겠습니다.

 

기본적으로 함수는 function 키워드를 사용해서 선언합니다.

 

함수는

function 함수 이름(매개변수){

함수 본문(body);

}

이런 식으로 작성할 수 있습니다.

 

함수 선언문의 장점은

유사한 동작을 하는 코드들을

사용할 때 정말 유용하게 사용할 수 있습니다.

 

만약 로그인을 했을 때

'환영합니다'나 '로그인에 실패하셨습니다'라는

메시지를 전달하고 싶을 경우

 

함수를 사용하여 작성할 수 있습니다.

 

함수 선운문은 함수 본문에 변수를 작성할 수 있습니다.

이것을 지역 변수라고 하는데

 

지역 변수는 함수 본문에서만 사용되는 변수로

만약 함수 본문이 아닌 외부에서 변수를 사용하려 하면

오류가 발생할 것입니다.

 

그때 사용되는 것이 함수 외부에 변수를 선언하는

전역 변수라고 하는데

이 경우 모든 상황에서 변수를 사용할 수 있습니다.

 

가독성이 높은 코드를 작성하려면

지역 변수와 매개 변수를 사용하시는 것이 좋습니다.

 

전역 변수를 사용하실 때 주의하실 점은

만약 전역 변수에서 사용된 변수를

지역 변수에 사용할 경우

 

결과 값이 바뀔 수 있기 때문에

지역 변수와 전역 변수는

같이 사용하지 않는 것이 좋습니다.

 

다음은 매개 변수인데

매개 변수에는 임의의 데이터를 작성해서

함수 안에서 사용할 수 있습니다.

 

예를 들어

function ex(ex1, ex2){

alert(ex1 + ex2);

}

ex('1', '2');

ex('4', '3');

이런 함수가 있을 때

 

매개 변수인 ex1과 ex2를

사용해서 유용하게 사용할 수 있습니다.

 

'  '를 사용했기 때문에 문자열로 사용되기 때문에

위에 예시의 결과는

문자열 '1'과 '2', '4', '3'이 합쳐진

'12'와 '43'이 차례대로

alert 모달 창에 출력될 것입니다.

 

function ex(ex1, ex2){
	alert(ex1 + ex2);
}

ex('1', '2');
ex('4','3');

예시 코드

결과 값1
결과 값2

 

매개 변수를 사용하실 때 주의하실 점은

매개 변수를 작성하고

그 변수에 값을 지정하지 않으면

기본 값으로 undefined가 출력됩니다.

 

매개 변수는 여러 개를 선언할 때는 콤마 ', '를

만약 매개 변수를 선언하지 않아도 된다면

공백으로 비워두셔도 됩니다.

 

함수는 매개 변수, 지역 변수, 전역 변수를

사용해서 한번 작성해두면

 

필요할 경우 재사용한다는 장점이 있습니다.

 

마지막으로 함수를 사용할 경우

알아두시면 좋은 팁을 드리면

 

함수를 사용할 경우 해당 함수는

한 가지 동작만 담당하는 것이 좋고

담당하는 동작에 대해 나타내는

동사로 된 이름을 짓는 것이 좋습니다.

 

왜냐하면 해당 코드를 수정하거나

공유하는 경우 함수 이름만 보고도

알아볼 수 있기 때문입니다.

 


 

오늘은 JS에서 정말 유용하게 사용되는

함수 중에서 함수 선언문 방식에 대해 알아보았습니다.

 

함수는 재사용하기 좋고 어떤 값이나

변수에 대해서 개선할 때 사용하면 좋습니다.

 

함수 선언문은 지역 변수, 전역 변수, 매개 변수를

적절하게 사용해서

추후에 필요한 경우 사용할 수도 있습니다.

 

가독성이 높은 코드를 작성할 경우에는

지역 변수와 매개 변수를 사용하시는 것이 좋습니다.

 

그리고 함수를 사용할 때는 한 가지 동작만 담당하는 것이 좋고

해당 동작을 나타낼 수 있는 이름을 짓는 것이 중요합니다.

이때 동사를 사용하면 좋습니다.

ex) showPrimes, showName, myFunction...

 

감사합니다!!

728x90
반응형

'JS > JS 기초' 카테고리의 다른 글

JS- 인터프리터 언어  (0) 2022.08.25
JS- 함수 표현식과 함수 선언문의 차이, 화살표 함수  (0) 2022.08.20
JS - switch문  (1) 2022.08.12
JS-반복문 while, do while, for  (0) 2022.08.10
JS - nullish 병합연산자 ??  (0) 2022.08.08

댓글