#5. 일급 객체, Map

일급 객체

자바스크립트에서는 함수를 '일급 객체' 라고 부른다.

프로그래밍적 의미에서 일급 객체란 '다른 객체들에게 일반적으로 적용 가능한 연산' 을 모두 지원하는 객체 를 뜻한다.

그만큼 중요한 개념이며, 필요에 따라 함수를 매우 유연하게 사용할 수 있다는 말이다.

 

하나씩 그 활용도를 보도록 한다.

함수의 활용

1. 변수에 함수 할당

const sayHello = function() {
	consoㅣe.log("hello");
}

이 sayHello 함수를 변수처럼 활용하여 어디서든 호출할 수 있다.

함수가 마치 값 으로 취급되는 것이다.

 

2. 매개변수로 다른 함수에 전달

function callFunction(func)
{ 
		//매개변수로 받은 변수가 사실 함수다.
		func();
}
callFunction(sayHello);
//출력 : hello

위에서 선언한 sayHello 함수를 callFunction 함수에 매개변수로 넣은 것이다.

여기서 callFunction 에서 매개변수로 받은 함수를 콜백함수, callFunction 을 고차함수 라고 부른다.

1. 콜백 함수 : 매개변수로서 쓰이는 함수 

2. 고차 함수 : 함수를 인자로 받거나 return 하는 함수

3. 함수를 return 

고차함수의 특징 중 하나이다.

function createAdder(num) {
	return function(x)
	{
		return x + num;
	}
}
const addFive = createAdder(5);
console.log(addFive(10));

하나씩 해석해보면 addFive 는 일단 변수로 선언되었지만, 함수의 내용을 가지고 있는 것과 같다.

const addFive = function(x) {return x + num;}

다음과 같은 형태인 것이다.

코드에서 addFive 의 선언에서는 x + 5; 의 코드가 되었고, console.log 를 통해 호출하는 부분에서는 x에 10이 대입되면서 결과적으로 15가 출력된다.

 

객체에서 또한 활용 가능하다.

const person = {
	name : "John",
	age : 31,
	isMarried : true,
	sayHello:function () {
		console.log("Hello, My Name is " + this.name);
		//백틱 활용시 코드
		console.log("Hello, My Name is ${this.name}");		
	}
	//화살표 함수 활용시 코드
	sayHello : () => 
	{ 
		console.log("Hello, My Name is ${this.name}");
	}
}
person.sayHello();
//출력 : Hello, My Name is John

객체 안의 sayHello 키의 value 값으로 함수가 들어간 예시이다

this 라는 문법이 나오는데, 이는 '자기 자신' 을 가리키는 키워드이다.

따라서 이 코드에서의 this는 person 을 말한다.

4. 배열의 요소로 할당

const myArr = {
	function(a, b) { return a + b;},
	function(a, b) { return a - b;}
};
console.log(myArr[0](1, 3)); //더하기 : 4
console.log(myArr[1](4, 7)); //빼기 : -3

 

Map

객체나 배열로 핸실세계만큼 복잡한 구조를 반영하기 어려운 점이 있어 추가적인 자료구조를 탄생시켰고, 그 중 하나가 이 Map 에 해당한다.

목적

데이터의 구성, 검색, 사용을 기존의 객체/배열보다 더 효율적으로 처리하기 위함이다

구조

Key - Value 의 pair 형태는 기존과 동일하다.

다만 차이점으로 Key가 정렬된 순서로 저장되기에 Key 에 어떠한 데이터 타입이라도 들어갈 수 있다는 점이 있다.

기능

검색, 삭제, 제거, 여부 확인 이 있다.

const myMap = new Map();
const myMap = new Map();
myMap.set('key', 'value');
myMap.get('key');

데이터 저장은 Set() 함수를 통해 이뤄지고, 검색은 Get() 으로 진행되어 이 Set()/Get() 또한 Pair 로 취급한다.

반복을 위한 메서드로는 Key(), Values(), Entries() 가 있는데, 이 반복문을 시행할 때는 Iterator(반복자)의 개념이 필수적이다.

 

Map의 반복 메서드에는 이 반복자를 모두 가지고 있어 직접적인 선언 없이도 사용할 수 있다.

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

console.log(myMap.keys());
//출력 : [Map Iterator] { 'one', 'two', 'three' }

반복자를 통해 key 들을 순회하는 코드로, key 값이 조회되는 것을 알 수 있다.

 

예시 코드들

1. Key() 활용

for(const key of myMap.keys())
{
	console.log(key);
}
//출력 : one two three

 

2. Values() 활용

for(const myValues of myMap.values())
{
	console.log(myValues);
}
//출력 : 1 2 3

 

3. Entries() 활용

console.log(myMap.entries());
//출력 : [Map Entries] { [ 'one', 1 ], [ 'two', 2 ], [ 'three', 3 ] }

for(const entry of myMap.entries())
{
	console.log(entry);
}
//출력 : [ 'one', 1 ] [ 'two', 2 ] [ 'three', 3 ]
//각각이 별개의 로그로 출력됨

 

그 외 여러 동작들

console.log(myMap.size); // map 의 사이즈(길이) 체크 - 출력 : 3
console.log(myMap.has("two")); //map의 key 존재여부 확인 - 출력 : true

 

Set

고유한 값을 저장하는 자료구조로, map 과는 다르게 키는 저장하지 않고 오직 value, 값만 저장한다.

또한 값이 중복되지 않은 유일한 요소로만 구성된다.

기능

값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인 이 있다.

//기본 구조
const mySet = new Set();
mySet.add('value1');
//key 는 넣지 않는다

 

언급했듯이 유일한 요소로만 구성되기 때문에 중복되는 요소가 추가된다면, 이를 추가하지 않는다.

mySet.add('value1');
console.log(mySet);
//출력 : value1 1번

 

여러 동작들도 대부분 map 과 같은 방식으로 사용할 수 있다.

console.log(mySet.size);
console.log(mySet.has("value1"));

 

반복문 활용의 경우, 키를 저장하지 않기 때문에 Iterator 가 오직 value 로만 시행된다.

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

for(const value of mySet.values())
{
	console.log(value);
}
//출력 : value1 value2 value3