JavaScript에서 변수에 함수 할당하는 방법

JavaScript에서 변수에 함수를 할당하려면 return 문을 사용하면 됩니다. 함수 표현식을 변수에 담아두고, 필요할 때 호출하여 그 반환값을 활용하는 방식입니다.

예제 코드

아래 예제는 jQuery의 each() 메서드를 사용해 .demo 클래스를 가진 요소들을 순회하면서 각 요소의 data-st 속성 값을 배열에 저장한 뒤, join()으로 쉼표로 구분된 문자열로 만들어 반환하는 함수를 변수에 할당한 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
   .demo {
      background: skyblue;
      height: 20px;
      width: 75%;
      margin: 10px;
      padding: 10px;
   }
</style>
</head>
<body>
<div class="demo" data-st="John">John Smith</div>
<div class="demo" data-st="David">David Miller</div>
<div class="demo" data-st="Adam">Adam Smith</div>
<script>
   var studentNames = function() {
      var names = [];
      $(".demo").each(function() {
         names.push($(this).data('st'));
      });
      return names.join();
   };
   console.log( studentNames() );
</script>
</body>
</html>

코드 설명

studentNames라는 변수에 익명 함수(함수 표현식)를 할당합니다.
빈 배열 names를 생성한 후, each()로 .demo 요소를 하나씩 순회하며 data('st')로 데이터 속성 값을 가져와 배열에 추가(push)합니다.
return names.join()을 통해 배열의 값들을 쉼표로 연결한 문자열을 반환합니다.
마지막으로 console.log(studentNames())를 호출하여 결과를 콘솔에 출력합니다.

실행 방법

위 프로그램을 실행하려면 파일 이름을 “anyName.html”(예: index.html)로 저장한 뒤, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 이후 VS Code 편집기에서 “Open with Live Server” 옵션을 선택하면 브라우저에서 바로 실행할 수 있습니다.

출력 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

JavaScript에서 변수에 함수 할당하는 방법 – return 문 활용 예제

콘솔에는 John,David,Adam처럼 각 요소의 data-st 속성 값이 쉼표로 구분되어 표시됩니다. 이처럼 return 문을 활용하면 함수의 처리 결과를 변수에 담아 재사용할 수 있습니다.