Javascript 기본기 정리하고 넘어가기 - 5

July 28th 2018

Javascript 기본기 정리하고 넘어가기 - 5

7. Parameters and Arguments

저는 공구 제조업에서 근무를 했던 경험이 있었는데, function을 공작기계에 비유한다면 이해가 좀 더 쉬울 것 같습니다. 공작기계는 가공하고자 하는 원자재(예로 알루미늄, 티타늄, 주철 등..;;)를 넣으면 사용자가 원하는 모양으로 가공해 결과물을 반환합니다. 마찬가지로, 우리는 function에 어떠한 원자재를 전달해서, function을 통해 그 원자재를 원하는 목적으로 사용할 수 있습니다.

원자재를 받기 원한다면 처음 function을 작성할 때 function 키워드 옆의 ( )에 향후 전달 받을 원자재(데이터)에 임의의 이름을 붙여 리스트를 작성할 수 있습니다. 그리고 이 이름을 가지고 function 안에서 코드를 작성할 때 variable로 간주하여 사용할 수 있습니다. 이러한 이름을 parameter list라고 합니다.

var fun = function(someNumber) {
  // => parameter 이름으로 someNumber라고 표기함.
  var anotherNumber = 2;
  var sum = anotherNumber * someNumber;
  return sum;
};

fun(7); // => 14
console.log(anotherNumber); // => undefined

위에서 작성한 function을 실행(invoke or run)할 때, function에 전달할 데이터를 함수를 호출하는 괄호안에 기입합니다. 이렇게 function에 전달하는 데이터를 우리는 argument라고 부릅니다.

위에서 fun(7)과 같이 함수를 호출하면 변수 fun에 담겨있는 함수는 함수가 실행되는 동안 argument로 전달 받은 number 7에 접근을 할 수 있고, 함수 안의 코드에서 이 number 7을 someNumber에 담고 변수와 같이 사용할 수 있습니다.

주의할 점은 함수 내부의 데이터는 함수 밖에서 접근이 불가합니다. 위의 예와 같이 anotherNumber를 함수 밖에서 불러오고자 했을 때, 접근이 불가하기 때문에 undefined가 반환됩니다.

8. Parameters and Arguments

var fun = function(input) {
  console.log(input.toUpperCase());
};

fun('hi'); // => 'HI'

만약 parameter를 정의하지 않았지만, argument를 전달 받은 경우에도 javascript는 함수 내에서 argument를 사용할 수 있도록 하는 기능이 있습니다.

var fun1 = function() {
  console.log(arguments[0].toUpperCase());
};

var fun2 = function() {
  console.log(arguments);
};

var fun3 = function() {
  return arguments;
};

fun1('hi'); // => 'HI'
fun2('hi'); // => ['hi']
fun3('hi')[0]; // => 'hi'

arguments객체는 array와 비슷한 방식으로 값에 접근이 가능하지만 array는 아닙니다. length 속성도 사용할 수 있지만 그외의 다른 배열의 method는(예를들어 pop, push 등) 사용할 수 없습니다.

9. Passing Functions to Functions Javascript 프로그래밍을 하게 되면, function의 argument로 또EKFMS function을 전달하는 경우가 많습니다. 대표적인 예로 javascript의 내장 함수인 setTimeout을 예로 들 수 있습니다. setTmeout함수는 argument로 전달 받은 callback 함수를 전달 받은 시간이 지나면 invoke하는 javascript native 함수입니다.

var fun = function(string) {
  console.log(string.toUpperCase());
};

setTimeout(fun('hi'), 3000);

위와 같은 방법으로 함수 setTimeout에 callback fun을 전달하면, 우리가 원하는 대로 3초 뒤에 fun 함수가 실행될까요? 그렇지 않습니다. 이 경우 javascript interpreter가 setTimeout 함수를 해석하는 순간 fun함수가 바로 invoke 됩니다. 위의 경우 함수 자체를 전달한 것이 아니라, 함수가 실행되고 완료된 결과를 전달한 것이 되기 때문입니다. 그러면 3초뒤에 fun 함수가 실해되게 하려면 어떻게 해야 할까요?

바로 아래와 같이 함수를 invoke하는 ( )없이 argument로 전달하면 됩니다.

var fun = function(string) {
  console.log(string.toUpperCase());
};

setTimeout(fun, 3000);

하지만, 이 경우에는 callback 함수에 argument를 전달할 수가 없습니다. 이 문제를 해결하기 위해서 callback 함수를 또다른 anonimous 함수로 감싼 후 argument로 전달할 수 있습니다.

var fun = function(string) {
  console.log(string.toUpperCase());
};

setTimeout(function() {
  fun('hi'); // => 'HI'
}, 3000);

위와 같이 실행하면 3초 뒤 callback 함수 fun이 작동하게 됩니다. 이와 같은 기능은 매우 유용하게 사용할 수 있으니 몸에 익숙해지게 하여 필요할 때 바로바로 사용할 수 있어야 할 것 같습니다.

Javascipt의 기본이지만 조금은 까다로운 개념들에 대해 정리해 보고자 했습니다. 시간이 좀 더 흘러 더 깊이있게 이해하게 되면, 더 개선된 글을 올릴 수 있도록 하겠습니다. :))

Handmade with .