JS - 일급객체로서의 함수, Map과 Set

1. 일급 객체로서의 함수

자바스크립트에서 함수는 일급 객체(First-Class Object)라고 해요. 그래서 함수를 객체처럼 여러가지 방식으로 다룰 수 있어요. 일반 객체와 달리 함수는 특별한 능력을 가지고 있습니다.

함수가 일급 객체로 취급되기 때문에, 우리는 함수를 매우 유연하게 사용할 수 있어요. 그래서 자바스크립트에서 함수는 매우 중요한 개념(이렇게 따로 빼야 할 만큼)이에요.

아래에서 함수가 일급 객체로 취급되는 5가지 경우에 대해 알아볼게요.

 

(1) 변수에 함수를 할당

함수는 변수에 할당할 수 있습니다. 함수는 값으로 취급되기 때문에, 다른 변수와 마찬가지로 변수에 할당할 수 있습니다. 변수에 할당된 함수는 나중에 사용할 수 있습니다.

const sayHello = function() {
  console.log('Hello!');
};

sayHello(); // "Hello!" 출력

 

(2) 함수를 인자로 다른 함수에 전달

함수는 다른 함수에 인자로 전달될 수 있습니다. 함수가 값으로 취급되기 때문에, 다른 함수의 인자로 전달할 수 있습니다. 이것은 콜백(callback)이나 고차 함수(higher-order function)를 작성하는 데 사용됩니다.

function callFunction(func) {
  func();
}

const sayHello = function() {
  console.log('Hello!');
};

callFunction(sayHello); // "Hello!" 출력

 

(3) 함수를 반환

함수는 다른 함수에서 반환될 수 있습니다. 함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있습니다. 이것은 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용됩니다.

function createAdder(num) {
  return function(x) {
    return x + num;
  }
}

const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력

 

(4) 객체의 프로퍼티로 함수를 할당

함수는 객체의 프로퍼티로 할당될 수 있습니다. 객체의 메소드로 함수를 호출할 수 있습니다.

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // "Hello, my name is John" 출력

 

(5) 배열의 요소로 함수를 할당

함수는 배열의 요소로 할당될 수 있습니다. 이것은 함수를 배열에서 사용할 수 있게 합니다.

const myArray = [
  function(a, b) {
    return a + b;
  },
  function(a, b) {
    return a - b;
  }
];

console.log(myArray[0](5, 10)); // 15 출력
console.log(myArray[1](10, 5)); // 5 출력

 

함수가 일급 객체로 취급되기 때문에, 자바스크립트에서 함수는 매우 유연하게 사용될 수 있습니다. 이것은 등 다양한 프로그래밍 패턴에서 사용됩니다. 함수를 일급 객체로 다룰 수 있다는 것은, 코드를 더 간결하고 모듈화된 형태로 작성할 수 있게 해줍니다.

 

함수를 일급 객체로 다룰 수 있다는 것은, 함수를 다양하게 조합할 수 있다는 것을 의미합니다. 새로운 함수를 반환하는 함수를 작성하면, 함수를 조합하여 더 복잡한 기능을 구현할 수 있어요. 이것을 활용하면 코드를 더욱 간결하게 작성할 수 있으며, 유지 보수도 쉬워집니다.

function multiplyBy(num) {
  return function(x) {
    return x * num;
  }
}

function add(x, y) {
  return x + y;
}

const multiplyByTwo = multiplyBy(2);
const multiplyByThree = multiplyBy(3);

const result = add(multiplyByTwo(5), multiplyByThree(10)); // 40 출력

 

이처럼 함수가 일급 객체로 취급되는 것은 자바스크립트에서 함수를 다양한 방식으로 사용할 수 있게 해줍니다. 함수를 객체나 배열과 같은 일반적인 자료형과 동일한 방식으로 사용할 수 있기 때문에, 코드를 더 간결하고 모듈화된 형태로 작성할 수 있습니다.

 

2. Map과 Set

(1) Map

Map은 키-값 쌍을 저장하는 객체와 비슷합니다. Map은 각 쌍의 키와 값을 저장하며, 객체와 달리 키로 사용할 수 있는 모든 유형을 사용할 수 있습니다. Map은 키가 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없습니다.

 

<Map 생성 및 사용>

새로운 Map을 만들려면 Map() 생성자를 사용합니다.

const myMap = new Map();

 

이제 Map에 값을 추가하려면 set() 메소드를 사용합니다.

myMap.set('key', 'value');

 

Map에서 값을 검색하려면 get() 메소드를 사용합니다.

console.log(myMap.get('key')); // 'value' 출력

 

<Map의 반복>

Map에서는 keys(), values(), entries() 메소드를 사용하여 키, 값 및 키-값 쌍을 반복할 수 있습니다.

 

💡 [for …of 반복문]

for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다(직접 명시 가능).

var iterable = [10, 20, 30];

for (var valueof iterable) {
  console.log(value);// 10, 20, 30
}

 

 

iterator는 반복자라는 말이에요. 요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조로 이해해주시면 돼요. 아래 예시 코드에서 myMap.keys()으로 쓸 수 있는 이유는 myMap.key()가 반환하는 값이 iterator이기 때문이에요.

const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

for (const key of myMap.keys()) {
  console.log(key);
}

for (const value of myMap.values()) {
  console.log(value);
}

for (const entry of myMap.entries()) {
  console.log(`${entry[0]}: ${entry[1]}`);
}

 

<Map의 크기 및 존재 여부 확인>

Map의 크기를 확인하려면 size 속성을 사용합니다.

console.log(myMap.size); // 3 출력

 

특정 키가 Map에 존재하는지 여부를 확인하려면 has() 메소드를 사용합니다.

console.log(myMap.has('two')); // true 출력

 

(2) Set

Set은 고유한 값을 저장하는 자료 구조입니다. Set은 값만 저장하며, 키를 저장하지 않습니다. Set은 값이 중복되지 않는 유일한 요소로만 구성됩니다.

 

<Set 생성 및 사용>

새로운 Set을 만들려면 Set() 생성자를 사용합니다.

const mySet = new Set();

 

이제 Set에 값을 추가하려면 add() 메소드를 사용합니다.

mySet.add('value1');
mySet.add('value2');

 

Set에서 값을 검색하려면 has() 메소드를 사용합니다.

console.log(mySet.has('value1')); // true 출력

 

<Set의 반복>

Set에서는 values() 메소드를 사용하여 값을 반복할 수 있습니다.

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');

for (const value of mySet.values()) {
  console.log(value);
}

 

<Set의 크기 및 존재 여부 확인>

Set의 크기를 확인하려면 size 속성을 사용합니다.

console.log(mySet.size); // 3 출력

 

특정 값을 Set에서 검색하여 존재하는지 여부를 확인하려면 has() 메소드를 사용합니다.

console.log(mySet.has('value2')); // true 출력

 

JavaScript에서 Map과 Set은 두 가지 다른 유형의 자료 구조입니다. Map은 키-값 쌍을 저장하는 객체와 비슷하며, Set은 고유한 값을 저장하는 자료 구조입니다. Map 및 Set은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있습니다. Map 및 Set을 사용하여 효율적인 데이터 구성 및 검색을 수행할 수 있습니다.