JS : 함수function의 역할과 사용법(매개변수, 리턴, 함수명)

Javascript

자바스크립트 함수

* 특정 기능을 하는 구문을 묶어 재사용하는 문법을 함수라고 부릅니다.

* 반복되는 문법을 function 함수 내에 작성합니다.

* 작성한 반복 함수를 필요한 위치에서 호출하면 몇번이든 재사용문법으로 활용할 수 있습니다.

* 함수명은 의미있게 작성합니다.(변수명 지정 주의사항과 동일)

* 매개변수는 작성함수에 따라 생략가능합니다.

* 함수 중괄호안에는 재사용하는 문법의 명령어를 작성합니다.

function 함수명(매개변수) {
	실행명령어;
}

* 작성한 함수명을 호출하고 싶은 위치에서 작성합니다.

* 작성하는 위치에 따라 함수명 뒤 괄호 표시가 달라질 수 있습니다.

함수명( );

alert( ); document.write( ); console.log( )와 같은 메서드들도 특정 실행 값을 담은 함수 호출이라고 부를 수 있습니다.

단, for( ), if( ) 등과 같은 키워드는 함수 호출에서 제외됩니다.

* 다양한 함수 예시를 이용하여 확실히 이해해봅시다!

* 함수를 이용하여 무조건 콜라가 나오는 자판기를 만들어보세요.

function 자판기(){
	document.write('콜라가 나왔습니다')
}
자판기()

외부 데이터를 함수 내부로 전달하는 매개체 역할을 하는 것을 매개변수라고 합니다.

* 다양한 함수 예시를 이용하여 확실히 이해해봅시다!

1. 함수를 이용하여 자판기에서 음료수를 꺼내보세요.

function 자판기(음료수){
	document.write(음료수 + "가 나왔다.<br>"); 
}
자판기(사이다);
자판기(콜라);

function japangi(a){
	document.write(a + "가 나왔다.<br>"); 
}
japangi('사이다');
japangi('콜라');

2. 함수를 이용하여 자판기에서 음료수를 일정 수량 꺼내보세요.

function 자판기(음료수, 수량){
	document.write( 음료수 + ' ' + 수량 + "개 나왔습니다"); 
}
자판기(사이다, 1);

function japangi(a, b){
	document.write( a + ' ' + b + "개 나왔습니다"); 
}
japangi('사이다', 1);

* 함수 내부 데이터를 함수 외부로 보내는 역할을 하는 것을 리턴이라고 합니다.

* 필수는 아니지만 스크립트 작성 시 사용빈도가 높은 편입니다.

* 최종 출력 구조를 다양한 실행환경과 더불어 비교해보세요.

function sum1(left, right){	
	document.write(left+right+'<br>');
}	
sum1(2, 3);

function sum2(left, right){	
	console.log(left + right)
}	
sum2(2, 3);

* 최종 출력 구조를 위와 비교하여 확인해보세요.

function sum3(left, right){	
	return left+right;
}	
console.log(sum3(5,5));

function num(a, b){
	return a+b;
}
var data=num(10, 20);
document.write(data);

* 다양한 함수 예시를 이용하여 확실히 이해해봅시다!

* 함수를 이용하여 자판기에서 음료수를 꺼내보세요.

function 자판기(종류){
	return 종류
}
var data = 자판기(콜라) +'가 나왔습니다';
document.write(data) //콜라가 나왔습니다

function japangi(a){
	return a
}
var data = japangi('콜라') +'가 나왔습니다';
console.log(data) //콜라가 나왔습니다

Comments, Trackbacks