(Javascript) 자바스크립트 기초실습 (3) 함수 사용

안녕하세요 영감을 주는 개발자 방민방민입니다. 

오늘은 앞서 실습한 자바스크립트의 아주 기본적인 문법에 이어 조금더 나아가

Functions 에 대하여 알아보고 이를 활용하는 방법에 대해서 실습해 보고자 합니다.

본 포스팅은 코드카데미 자바스크립트 과정에서 Functions 파트를 기반으로 만들어 졌습니다.

참조 : https://www.codecademy.com/en/tracks/javascript

그러면 바로 시작하도록 하겠습니다.

1. JavaScript Functions ?!

프로그래밍은 마치 요리를 하는 것과 같습니다. 어떠한 조리법에 따라 어떠한 재료를 얼만큼 넣는지에 따라

다른 요리가 완성되기 때문입니다.

기본적인 함수를 호출하는 내용은 아래와 같이 생겼습니다.

var divideByThree = function (number) {
    var val = number / 3;
    console.log(val);
};

divideByThree 라는 변수명에 함수를 선언함과 동시에 그 함수 내부가 어떻게 동작 하는지를 명세합니다.

이러한 함수 선언은 아래와 같은 방식으로 함수를 선언했을 때도 같은 방식으로 동작합니다.

function divideByThree (number) {
    var val = number / 3;
    console.log(val);
}

2. 오렌지의 가격을 구하는 함수

 오렌지를 하루에 한번씩 N 개씩 구한다고 생각해 보겠습니다. 오렌지의 가격이 달라지지 않는다고 가정할 때, 프로그램 내부에서 매번 갯수 * 가격을 통해 오렌지의 가격을 구하는 것은 생각보다 까다로운 일일 것입니다. 

그렇기 때문에 구매 갯수만 입력하면 자동으로 가격을 구해주는 함수를 만들어 보겠습니다.

var orangeCost= function(count){
    var result = count * 5;
    console.log(result);
};

orangeCost(5);

위와 같이 구현 하면, 매번 변하는 오렌지의 수량에 따른 가격을 일일히 구하지 않고, orangeCost(갯수) 만 입력해주면 그때그때, 변화하는 오렌지 전체의 가격을 구할 수 있습니다.

2. 리턴

항상 구해지는 숫자를 console 창에만 띄울수는 없을 것입니다. 구해지는 결과값을 새로운 변수에 저장하기 위해서는 구해지는 결과값을 return 하여 주고 새로운 변수에 아래와 같이 넣어줍니다.

var orangeCost= function(count){
    var result = count * 5;
    return result;
};

var orangeTotalPrice = orangeCost(5);

위와같이 실행하면 orangeTotalPrice 에는 orangeCost 에서 구해진 result 값이 저장됩니다.

2. local variable, global variable ( 지역변수 전역변수 )

함수 내부에서 선언되는 변수는 기본적으로 함수 내부에서만 사용할 수 있는 지역변수입니다.

그러나 자바스크립트의 경우 앞에 var 을 이용하여 선언하지 않는 경우 전역변수로 선언됩니다.

var my_number = 7; //this has global scope

var timesTwo = function(number) {
    var my_number = number * 2;
    console.log("Inside the function my_number is: ");
    console.log(my_number);
}; 

timesTwo(7);

console.log("Outside the function my_number is: ")
console.log(my_number);

위의 경우 timesTwo 라는 함수 내부에서도 my_number 변수가 사용되어 그 값을 출력함에도 불구하고 

콘솔창은 14를 출력한다. 반대로 함수 외부에서 출력되는 my_number 는 7을 출력합니다. 그 이유는 함수 내부에서 선언된 my_number 는 함수 외부에서 선언된 my_number과는 다른 변수이기 때문입니다.

그러나 함수 외부에서 만약 var 을 사용하지 않고 my_number 에 값을 넣어 사용하면, 그 값은 함수 외부에 있는 전역변수 my_number 을 참조한다.

이런 식으로 간단하게 JavaScript 에서의 함수에 대하여 알아 보았습니다.

c언어나 java 를 한번이라도 해보셨다면 이러한 함수 사용은 크게 어려운 부분이 아니지만.

전역변수 지역변수와 같이 함수 내부 외부에서 동작하는 변수를 사용하는 것이 프로그램 전체 결과에 

큰 영향을 미칠 수 있기 때문에 그 개념을 정확하게 확립하는 것이 중요합니다.

그럼 지금까지 영감을 주는 개발자 방민방민 이었습니다:) 감사합니다.