[JavaScript][TIL] 일급 객체로서의 함수, Map과 Set

Trippy·2023년 10월 20일
2

JavaScript

목록 보기
10/28
post-thumbnail

일급 객체로서의 함수

함수는 일급 객체라고 한다. 그래서 함수를 객체처럼 여러가지 방식으로 다룰 수 있다.
일반 객체와 달리 함수는 특별한 능력을 가지고 있다.

일급객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가르킨다.

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

[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] 함수를 반환

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

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

const addFive = creatAdder(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 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출력

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


Map과 Set

[1] Map

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

  • 키-값 쌍 추가 및 검색(set
  • 키-값 쌍 삭제(delete)
  • 모든 키-값 쌍 제거(clear)
  • Map크기 및 존재 여부 확인(size)

Map에는 다음과 같은

  • new Map() : 맵을 만든다.
  • map.set(key, value) : key를 이용해 value를 저장한다.
  • map.get(key, value) : key에 해당하는 값을 반환한다. key가 존재하지 않으면, undefined를 반환한다.
  • map.has(key) : key가 존재하면 true를 존재하지 않으면 false를 반환한다.
  • map.delete(key) : key에 해당하는 값을 삭제한다.
  • map.clear() : 맵 안의 모든 요소를 제거한다.
  • map.size : 요소의 개수를 반환한다.

<Map 생성 및 사용>

// 새로운 Map을 생성하려면 Map() 생성자를 사용한다.

const myMap = new Map()
// Map에 값을 추가하려면 set() 메소드를 사용한다.

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

<Map의 반복>

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

for...of 반복문

for...of반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문이다. for...of를 사용하기 위해선 컬렉션 자체가 [symbol.iterator] 속성을 가지고 있어야만 한다.

var iterator = [10, 20, 30];

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

iterator는 반복자 라는 말이다. 요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어 있는 자료구조로 이해한다.
아래 예시 코드에서 myMap,key()으로 사용할 수 있는 이유는 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); // one, two, three
}

for (const value of myMap.values()) {
  console.log(value); // 1, 2, 3
}

for (const entry of myMap.entries()) {
  console.log(`${entry[0]}: ${entry[1]}`); // one:1, two:2, three:3
}

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

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

consolt.log(myMap.size); // 3

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

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

[2] Set

Set은 고유한 값을 저장하는 자료 구조이다. Set은 값만 저장하며, 키를 저장하지 않는다. Set은 값이 중복되지 않는 유일한 요소로만 구성된다. Set을 사용하면 다음과 같은 작업을 수행할 수 있다.

  • 값 추가 및 검색
  • 값 삭제
  • 모든 값 제거
  • set크기 및 존재 여부 확인

<set생성 및 사용>

// 새로운 `set`을 만드려면`set()` 생성자를 사용한다.

const mySet = new Set();
// 이제 set에 값을 추가하려면 add() 메소드를 사용합니다.
mySet.add('value1')
mySey.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 => 고유한 값을 저장.

profile
감금 당하고 개발만 하고 싶어요

0개의 댓글