자바스크립트 세트(Set), 맵(Map), 자주 사용하는 문자열 메소드

세트(Sets)

const orderSet = new Set(['Pasta', 'Pizza', 'Pizza', 'Risotto']);
console.log(orderSet); // {Pasta, Pizza, Risotto}

• 모든 요소가 유일한, 순서가 상관 없는 이터러블 자료 구조이다.

메서드

// size
console.log(orderSet.size); // 3

// has
console.log(orderSet.has('Pizza')); // true

// add
orderSet.add('Garlic Bread');

// delete
orderSet.delete('Risotto');

• 인덱스를 사용할 수 없다.

// 반복문에 set 사용하기
for (const order of orderSet) console.log(order);

// array to set
const staff = ['Waiter', 'Chef', 'Waiter', 'Manager', 'Chef', 'Waiter'];
const staffUnique = new Set(staff);

// 스프레드 연산자 사용
const staffUnique2 = [...new Set(staff)];

• 이터러블이므로 스프레드 연산자를 사용할 수 있다.

맵(Maps)

const rest = new Map();
rest.set('name', 'Classico Italiazno'); // set(key, value)
rest.set(1, 'Firenze, Italy');
console.log(rest.set(2, 'Lisbon', 'Portugal')); // 데이터가 추가된 set을 리턴함

• 객체(Object) 처럼 key-value 형태로 저장하나, 객체와의 차이점은 key로 object, array, map 등 어떠한 데이터 타입이든 사용이 가능하다는 점이다.

메서드

// set
rest.set('categories', ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'])
  .set('open', 11)
  .set('close', 23)
  .set(true, 'We are open')
  .set(false, 'We are closed');

// get
console.log(rest.get('name'));
const time = 21;
console.log(rest.get(time > rest.get('open') && time < rest.get('close')));

// has
console.log(rest.has('categories'));

// delete
rest.delete(2);

// size
console.log(rest.size); // 7

// clear
rest.clear();

key에 객체를 사용할 때 주의할 점

rest.set([1, 2], 'Test');
console.log(rest.get([1, 2])); // undefined

const arr = [1, 2];
rest.set(arr, 'Test');
console.log(rest.get(arr)); // Test

• 1 line의 배열과 2 line의 배열은 다른 주소를 가지고 있으므로, undefined가 리턴된다.

rest.set(document.querySelector('h1', 'Heading'));

• DOM API와 같이 사용하면 파워풀하게 사용할 수 있다.

Object to Map

const question = new Map([
  ['question', 'What is the best programming language in the world?'],
  [1, 'C'],
  [2, 'Java'],
  [3, 'JavaScript'],
  ['correct', 3],
  [true, 'Correct!'],
  [false, 'Try again!'],
]);

console.log(question);

// object to map
console.log(Object.entries(openingHours));
const hoursMap = new Map(Object.entries(openingHours));
console.log(hoursMap);

• 맵을 선언하기 위해 array가 들어가있는 array를 사용하므로 Object.entries를 사용하면 object를 map으로 쉽게 바꿀 수 있다.

Map to Array

// map to array
console.log([...question]);
// console.log(question.entries());
console.log([...question.keys()]);
console.log([...question.values()]);

반복문에 맵 사용하기

for (const [key, value] of question) {
  if (typeof key === 'number') console.log(`Answer ${key}: ${value}`);
}

• 구조 분해 할당을 사용해서 간단하게 반복문을 사용할 수 있다.

알맞은 데이터 구조 선택하기

• Object
  • 좀 더 전통적인 방식(‘abused’ object)
  • 작성과 접근이 쉬움(.-dot, []-bracket)
  • value로 function을 저장해야할 때 사용(methods)
    • Object에서만 this를 사용할 수 있음
  • JSON을 다뤄야할 때 사용
• Maps
  • 더 나은 퍼포먼스
  • key로 모든 데이터 타입 지원
  • 반복문 사용이 쉬움
  • size 계산이 쉬움
  • key, value를 심플하게 매핑해야할 때 사용
  • key가 string이 아닐 때 사용

자주 사용하는 문자열 메서드

1. indexOf, slice

const airline = 'TAP Air Portugal';
const plane = 'A320';

// indexOf
console.log(airline.indexOf('r')); // first occurence
console.log(airline.lastIndexOf('r'));
console.log(airline.lastIndexOf('Portugal'));

// slice
console.log(airline.slice(4)); // Air Portugal (start 인덱스를 지정해주는 역할)
console.log(airline.slice(4, 7)) // Air (start, end(포함하지 않음))

console.log(airline.slice(0, airline.indexOf(' '))); // TAP
console.log(airline.slice(airline.lastIndexOf(' ') + 1)); // Portugal

console.log(airline.slice(-2)); // al
console.log(airline.slice(1, -1)); // AP Air Portuga

2. toLowerCase, toUpperCase, trim, replace

const airline = 'TAP Air Portugal';
// const plane = 'A320';

// lower, uppercase
console.log(airline.toLowerCase());
console.log(airline.toUpperCase());

const passenger = 'jOnAS';
const passengerLower = passenger.toLowerCase();
const passengerCorrect = passengerLower[0].toUpperCase() + passengerLower.slice(1);
console.log(passengerCorrect);

// comparing email
const email = 'hello@jonas.io';
const loginEmail = '  Hello@Jonas.Io \n';

const lowerEmail = loginEmail.toLowerCase();
// trim
const trimmedEmail = lowerEmail.trim();
console.log(trimmedEmail);

// method chaining
const normalizedEmail = loginEmail.toLowerCase().trim();
console.log(normalizedEmail);
console.log(email === normalizedEmail);

// replacing
const priceER = '288.97€';
const priceUS = priceER.replace('€', '$'); // first occurence
console.log(priceUS);
const announcement =
  'All passengers come to boarding door 23. Boarding door 23!';
console.log(announcement.replace('door', 'gate'));
// console.log(announcement.replaceAll('door', 'gate')); // ES2021

// replacing - regex
console.log(announcement.replace(/door/g, 'gate'));

Booleans – includes, startsWith, endsWith

// includes
const plane = 'A320neo';
console.log(plane.includes('A320'));

// startsWith, endsWith
console.log(plane.startsWith('A'));
console.log(plane.startsWith('0'));

3. split, join

// Split and join
console.log('a+very+nice+string'.split('+')); // ['a', 'very', 'nice', 'string']
console.log('Jonas Schmedtmann'.split(' '));

const [firstName, lastName] = 'Jonas Schmedtmann'.split(' ');

const newName = ['Mr.', firstName, lastName.toUpperCase()].join(' ');
console.log(newName); // Mr. Jonas SCHMEDTMANN

const capitalizeName = function (name) {
  const names = name.split(' ');
  const namesUpper = [];

  for (const n of names) {
    // namesUpper.push(n[0].toUpperCase() + n.slice(1));
    namesUpper.push(n.replace(n[0], n[0].toUpperCase()));
  }
  console.log(namesUpper.join(' '));
};

capitalizeName('jessica ann smith davis'); // Jessica Ann Smith Davis
capitalizeName('jonas schmedtmann'); // Jonas Schmedtmann

Padding – padEnd, padStart

// Padding
const message = 'Go to gate 23!';
console.log(message.padStart(20, '+').padEnd(30, '+')); // ++++++Go to gate 23!++++++++++
console.log('Jonas'.padStart(20, '+').padEnd(30, '+')); // +++++++++++++++Jonas++++++++++

const maskCreditCard = function (number) {
  const str = number + '';
  const last = str.slice(-4);
  return last.padStart(str.length, '*');
};

console.log(maskCreditCard(64637836)); // ****7836
console.log(maskCreditCard(43378463864647384)); // *************7384
console.log(maskCreditCard('334859493847755774747')); // *****************4747

repeat

// Repeat
const message2 = 'Bad waether... All Departues Delayed... ';
console.log(message2.repeat(5));

const planesInLine = function (n) {
  console.log(`There are ${n} planes in line ${'🛩'.repeat(n)}`);
};
planesInLine(5); // There are 5 planes in line 🛩🛩🛩🛩🛩
planesInLine(3); // There are 3 planes in line 🛩🛩🛩
planesInLine(12); // There are 12 planes in line 🛩🛩🛩🛩🛩🛩🛩🛩🛩🛩🛩🛩