자바스크립트 입문[Javascript] - 함수 (Function) / 함수 선언과 함수 호출

2021-07-20

자바스크립트 학습일지입니다.

해당 내용은 노마드코더님의 <바닐라JS로 크롬 앱 만들기> 강의를 들으며 추가적인 학습을 정리한 내용입니다.

---

[Function] 

함수를 사용하는 이유는 '코드블럭'을 '반복적'으로 실행할 수 있기때문이다. 따라서 효율적이다.

 

함수를 사용하기위해선 함수를 호출하고자 하는 범위 내에서 함수를 정의해야한다.

 

함수는 두가지를 이해해야한다.

1. 함수 선언
2. 함수 호출

 

1. 함수 선언

 

선언을 할 때는 어떤 값을 불러올 것인지 인자(argument)들을 정하고 코드블럭을 작성하게된다.

단, 선언만 하면 수행되지 않는다. 정의한 선언한 함수를 수행하기 위해선 함수를 호출해야한다.

( ) 의 의미는 함수를 실행한다는 의미로 생각하면 된다.

( ) 가 없이는 함수가 실행하지 않는다.

function player.name( )과 console.log( )은 다르지않은 형태다.

 

function introduce(nameOfPerson, age) {
	console.log('hello my name is'+ nameOfPerson + 'and I am' + age);
}

introduce (dal,10);
//hello my name is dal and I am 10
introduce (sue,20);
//hello my name is sue and I am 20

 

↑값을 리턴하지 않는 함수

 

function add(a,b) {
	const sum = a+b;
   	return sum;
}

 

↑값을 리턴하는 함수 

 

 

리턴

 

 

리턴을 하는 함수는 다른 함수의 인수를 대체할 수 있다. 즉, return이 없으면 자기자신의 함수 밖에서 소통할 수 없다.

funtion 안에서 return과 추가작업을 입력하면 retrun만 수행하고 추가 수행은 이뤄지지않는다.

만약 return앞에 기타작업이 있다면 이 작업은 수행된다.

즉, return'까지만' 수행된다.

 

//Example

const age= 96;

function calculateKrAge(ageOfForeigner) {
	ageOfForiegner + 2;
}

const krAge = calculateKrAge(age);

console.log(KrAge);

 

↑ 나쁜 예시

 

console.log(KrAge)의 결과값은 undefinded다. function calculateKrAge가 return값을 갖고있지않기때문에 함수 calculateKrAge(96)의 값이 calculateKrAge(age)값으로 대체되지않는다. 따라서 krAge는 정의되지않는다.  

만약 함수 calculateKrAge의 return값이 "hello"였다면 console.log(krAge)의 결과값은 어떤 숫자가 오든, 어떤 문자가 오든, hello일 것이다.

 

//Example

const age= 96;

function calculateKrAge(ageOfForeigner) {
	return ageOfForiegner + 2;
}

const krAge = calculateKrAge(age);

console.log(KrAge);

//결과값 : 98

 

↑ 좋은 예시

 

const krAge = calculateKrAge(age); 에서의 age가 96으로 대체되고 함수 calculateKrAge(ageForeigner)에서 ageForeigner이 96으로 대체된다. 따라서 return값을 98을 갖고 이에 따라 krAge는 98로 정의된다. 따라서 결과값이 98이다.

 

2.  함수 호출

 

함수를 호출하기 위해선 ()을 이용해 함수에서 원하는 인자값을 전달하며 호출하게된다.

 

doSomething();

 

const result = add(1,2);
console.log(result);

• 함수를 인자로 전달

//good example

function doSomething(add) {
	console.log(add);
}

function add(a,b) {
	const sum = a+b;
    return sum;
}

doSomething(add)

//bad example

function doSomething(add) {
	console.log(add);
}

function add(a,b) {
	const sum = a+b;
    return sum;
}

doSomething(add()) //결과값 NaN >a,b에 값을 입력하지 않고 그 결과값이 doSomething에 인자로 전달
doSomething(add(1,2)) // 함수를 인자로 전달하지 않고, add 함수가 호출된 뒤에 add(1,2)에 대한 리턴이 인자로 전달

 

 

예시 - 계산기만들기

 

const calculator = {
	add: function (a,b) {
		console.log(a+b);
	},
	minus: function (a,b) {
		console.log(a-b);
	},
	times: function (a,b) {
		console.log(a*b);
	},
	devide: function(a,b) {
		console.log(a/b);
	},
	power: function(a,b) {
		console.log(a**b);	
	}
}

 

 

 

 

---

출처

 

JavaScript - 함수(Function)에 대해 알아보자

 

함수 - JavaScript | MDN

 

노마드 코더 Nomad Coders