Javascript #10 - 함수 Part. 1

함수는 Input과 Output, 함수명을 잘 정의하는 것이 굉장히 중요하다.

★ Javascript에서의 함수를 정의하는 방법

// ex

// 함수정의
function printYourName() {
	console.log('KTU!');
}

// 함수호출
printYourName();

함수는 하나의 함수에 한가지의 task만 하도록 만들어야한다. 함수명은 명사보다는 동사, 명령형태로 이름을 지정하는 것이 좋다. 함수명을 정하는것이 너무 어렵다면 '함수를 너무 많은 기능으로, 복잡하게 만드는것이 아닌가?' 의심해 봐야한다.

 

※ Javascript에서의 함수는 Object이다. (Object에 대한 개념은 다음에 포스팅하겠음.) 따라서, 함수를 변수에 할당할 수도 있고, 함수 인자로 전달이 되고, 함수를 리턴할 수도 있다.

 

Javascript에서는 알다시피 타입이 없다. 따라서 함수를 인자로 받을때 이 타입이 string인지 number인지 알 수 없는 상황이 발생하는데,

function printSentence(sentence) {
	console.log(sentence);
}

printSentence('Hello World!');

// 여기서 변수 sentence가 string 인지 nember 인지 정의가 안되어있음 (단, 함수는 이상없이 실행됨)
// 다만, 프로젝트나 코딩 시 타입이 명확하지 않아 혼동을 줄 수 있음.

이때, 사용하면 좋은것이 바로 Typescript이다. Typescript는 기존 Javascript에 타입개념이 추가된 언어이다. 나중에 Javascript를 다 배우게 되면 Typescript를 꼭 배우는 것을 추천한다.

// 타입스크립트의 함수

function log(sentence: string): number {
	console.log(sentence);
    reuturn 0;
}

// string은 sentence 변수의 타입을 지정해준 것이고, number은 리턴 타입을 지정해준 것이다.

 

★ 함수인수 (Parameter)

→ 기본 인수의 경우 값 (value)이 넘어가고, Object 인수의 경우 주소값 (parameter)이 넘어간다.

// objectr parameter 예

function changeSentence(obj_param) {
	obj_param.sentence = 'Bye!';
}

const hello = { sentence: 'Hello!' };
changeSentence(hello);
console.log(hello);

결과는 'Hello!' 가 아닌 'Bye!' 가 출력된다. hello는 오브젝트 이므로 sentence를 가리키고 있는 주소값을 가지고 있다. 이 주소값이 함수의 Parameter로 넘아갔기 때문에 hello 오브젝트가 가리키는 sentence의 값을 Bye!로 바꿔주었기 때문에, 결과는 Bye!로 출력된다.

 

→ 기본인수(ES6 부터 추가됨)

function display(message, from) {
	console.log(`${message} from ${from}`);
}

display('Hello');

이렇게 함수가 받는 인수의 개수는 2개인데, 함수를 호출할때 정의한 인수는 1개 밖에 없다. 이를 출력하면 결과는 'Hello from undefined' 가 출력된다. 즉, 정의되지 않은 인수는 undefined로 출력되는 것이다.

예전에는 인수가 전달되지 않았을때,

function display(message, from) {
	if(from === undefined) {
    	from = 'unkonwn';
    }
	console.log(`${message} from ${from}`);
}

display('Hello');

이렇게 if문을 사용해서 'unknown'이라는 문자열로 지정해주었는데, 하지만 이제는 코드를 길게 하지않고

function display(message, from = 'unknown') {
	console.log(`${message} from ${from}`);
}

display('Hello');

이렇게 사용한다.

 

→ Rest 인수 : 배열형태로 값이 전달된다고 보면된다.

function displayFruits(...fruits_arr) {
	for(i = 0; i < fruits_arr.length; i++){
    	console.log(args[i]);
    }
}

displayFruits('banana', 'apple', 'grape');

 

 

★ 전역변수, 지역변수 (global, local scope) : '밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다.'

이 문장을 다시 파헤쳐보면, 함수내에 선언된 지역변수는 함수안에서만 접근할 수 있고, 함수밖에선 접근할 수 없다. 기본적으로 함수 밖에 선언되어 있는 전역변수는 함수 내외에서 언제든 접근 가능하다. (함수안의 함수도 마찬가지)

let global_scope = 'global';

function printSentence1() {
	let local_scope1 = 'hello';
    console.log(local_scope1);   // 정상
    console.log(global_scope);   // 정상
    
    function printSentence2() {
    	let local_scope2 = 'Bye!';
        console.log(local_scope1);  // 정상
    }
    console.log(local_scope2);  // 에러
}

printSentence1();
console.log(local_scope1);  // 에러

 

 

★ 리턴 : 반환값이라고도 한다. 함수에서 인수로 받은값을 계산 후 리턴한다.

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

sum(3, 4);  // 7 리턴

 

→ 현업에서 쓰이는 팁!! : early return 또는 early exit

만약 유저 포인트가 10 이상일때만 함수를 실행하는 코드가 있을 때,

// Bad
function userUpgrade(user) {
	if(user.point > 10) {
    	// logic...
    }
}


// Good
function userUpgrade(user) {
	if(user.point <= 10) {
    	return;  // 조건이 맞지 않을 시 함수 조기종료
    }
    
    // logic...
    
}