JavaScript - 함수와 객체

1. 함수(function)란?

 - 작업을 수행하거나 값을 계산하는 명령문의 집합입니다. 일반적으로 함수는 입력(input)과 출력(output)을 가지며, 입력은 함수에 전달되는 값을 나타내며, 출력은 함수가 반환하는 값을 나타냅니다.

function mul(a, b){      return a * b; }

위 함수는 mul이라는 이름을 가진 함수이며, a와 b라는 두 개의 입력(매개변수)을 받습니다. 이 함수는 입력된 두 값을 곱한 결과를 반환합니다. 따라서 이 함수의 출력(반환값은) a*b와 같습니다.

 

함수를 사용하기 위해서는 함수를 호출해야되는데 다음과 같이 호출하여 사용할 수 있습니다.

let result = mul(4 , 5); // result에 20이 저장됩니다.

함수를 사용하기 위해서는 다음과 같이 함수의 이름과 필요한 입력값을 명시하여 실행하여야합니다.

 

 

 

2. 함수의 선언식과 표현식

 - JavaScript에서는 함수 선언문(function declaration)과 함수 표현식(function expression) 두 가지 방법으로 함수를 정의할 수 있습니다.

 

1) 함수 선언문

 - 함수 선언문은 다음과 같은 형태로 작성 됩니다.

 

function functionName (parmeter1, parameter2, ...) {      // function body  }

• function 키워드를 통해 함수를 선언합니다.
• function 옆에 함수 이름을 작성합니다. 주로 함수가 동작하는 기능을 표현하여 작성합니다.
• 함수 이름 옆에 괄호()를 적고 그 안에 매개변수(parameter)를 적어줍니다. 매개변수는 입력값을 나타내는 변수 입니다.
• 그리고 마지막으로 중괄호{}는 함수의 본문(function)을 적는 곳이며, 함수가 실행할 내용을 이곳에 적습니다.

예)

function sayBye(name) {      console.log("Bye, " + name);  }

위 예제는 함수 선언문을 나타내기 위한 예 이며 위 함수는 name이라는 매개변수 하나를 받아서 "Bye, " 와 결합하여 콘솔에 출력합니다.

 

2) 함수 표현식

 

함수 표현식은 다음과 같은 형태로 작성합니다.

let functionName = function(parameter1, parameter2, ...) {       // function body  };

• let 또는 const 키워드로 변수를 선언하고 그 변수에 익명(anonymous)함수를 할당합니다.
• 익명함수란 이름이 없는 함수 입니다.
• 익명함수도 function키워드로 시작하고 괄호 안에 매개변수들을 씁니다. 그 다음에 중괄호 안에 함수 본문을 씁니다.

예는 다음과 같습니다.

let sayHello = function(name) {     console.log("Hello, " + name);  };

위 예제또한 함수 선언문을 나타내기 위한 예 이며 위 함수는 name이라는 매개변수 하나를 받아서 "Bye, " 와 결합하여 콘솔에 출력합니다.

하지만 함수 표현식은 변수에 할당되기 때문에 값(value)로 취급됩니다. 따라서 함수 표현식은 다른 값처럼 인자로 전달하거나 반환할 수 있습니다.

 

function sayHi(func) {      func("world");  }  sayHi(sayHello); // Hello, World 출력

 

3) 함수 선언문과 표현식의 차이점

 - 함수 선언문과 표현식의 가장 큰 차이점은 호이스팅(hoisting)입니다. 호이스팅이란 자바스크립트 엔진이 코드를 해석할 때 선언된 변수나 함수를 코드 상단으로 끌어올리는 현상입니다.

함수 선언문은 전체가 호이스팅되기 때문에 정의하기 전에 호출할 수 있습니다.

 

예를 들어, 다음과 같은 코드가 정상적으로 작동합니다.

greet("World"); // Hello, World  function greet(name) {      console.log("Hello, " + name);  }

하지만 함수 표현식은 변수만 호이스팅되고 값(익명함수)은 호이스팅되지 않기 때문에 정의하기 전에 호출하면 에러가 발생합니다.

예를 들어, 다음과 같은 코드는 에러가 발생합니다.

greet("World");    let greet = function(name) {      console.log("Hello, " + name);  };

 

 

 

함수와 객체

 - JavaScript에서 함수는 일급 객체입니다. 일급 객체란 다음과 같은 조건을 만족하는 객체를 말합니다.

• 무명의 리터럴로 생성할 수 있다.
• 변수나 자료구조에 저장할 수 있다.
• 함수의 인자로 전달할 수 있다.
• 함수의 반환값으로 사용할 수 있다.

// 무명의 리터럴로 생성한 함수를 변수에 저장  const add = function(a, b) {      return a + b;  }; // 배열의 요소로 사용 const arr = [add, function(c) {return c * c}]; // 함수의 인자로 전달  function apply(func, x) {      return func(x); }  console.log(apply(arr[0], 3, 4)); //7  console.log(apply(arr[1], 5); //25 // 함수의 반환값으로 사용  function makeFunc(n) {      return function(x) {      return x + n;     };  }  const plusOne = makeFunc(1);  const plusTwo = makeFunc(2);  console.log(plusOne(10)); //11  console.log(plusTwo(10)); //12

 

 

 

스코프

 - 스코프란 변수에 접근할 수 있는 범위를 말합니다.

 

1) 함수 스코프

 -  함수 스코프란 함수 내에서 정의된 변수는 해당 함수 내에서만 사용할 수 있고 유효하다는 것을 의미합니다. 함수 밖에서 정의된 변수는 전역 변수로서 어디서든 접근할 수 있습니다.

 

var x = 'global'; // 전역변수    function foo() {      var x = 'local'; // 지역변수      console.log(x); // local } foo(); // local console.log(x); // global

 

2) 블록 스코프

 -  블록 스코프란 중괄호( {} )로 둘러싸인 영역 내에서 정의된 변수는 해당 영역 내에서만 사용할 수 있고 유효하다는 것을 의미합니다. ES6 이전 에는 블록 스코프가 존재하지 않았으나, ES6부터 let 과 const 키워드를 사용하여 블록 스코프를 만들 수 있습니다.

 

let x = 'global'; // 전역변수  if (true) {      let x = 'local'; // 지역변수      console.log(x) // local } console.log(x); //global

 

 

 

클로저

 -  클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성됩니 다.

 

function makeCounter() {      let count = 0; // 지역변수      return function() { // 클로저 (count를 기억함)           return ++count;      }; } const counter1 = makeCounter(); // 카운터 생성 const counter2 = makeCounter(); // 다른 카운터 생성 console.log(counter1()); // 1 (counter1의 count 값) console.log(counter1()); // 2 (counter1의 count 값 증가) console.log(counter2()); // 1 (counter2의 count 값) console.log(counter2()); // 2 (counter2의 count 값 증가)

 

 

 

고차함수

 - 고차함수는 함수를 인자로 받거나 반환하는 함수입니다. 고차함수는 일급 객체인 함수를 활용하여 추상화하거나 재사용할 수 있습니다. 

// 배열을 받아 각 요소에 적용할 콜백함수와 초기값을 인자로 받아 배열을 축약하는 고차함수 reduce 정의 function reduce(array, callback, initialValue) { let accumulator = initialValue; // 누적값 초기화 for (let i = 0; i < array.length; i++) {          accumulator = callback(accumulator, array[i]); // 콜백함수 실행하여 누적값 갱신      }   return accumulator; // 최종 누적값 반환 } // reduce 고차함수 사용 예시 // 배열 요소들을 모두 더하는 콜백함수 정의 function sum(a, b) {       return a + b; } // 배열 요소들을 모두 곱하는 콜백함수 정의 function product(a,b) {      return a * b; } const numbers = [1,2,3,4]; console.log(reduce(numbers,sum ,0)); // 10 (1 + 2 + 3 + 4) console.log(reduce(numbers, product, 1)); // 24 (1 * 2 * 3 * 4)

 

 

#출처 엘리스 AI 트랙 JavaScript 101 - (4) 함수와 객체 (박규하 코치)