[프로그래머스 Level 1] 핸드폰 번호 가리기 (자바스크립트)

Description

프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다.
전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요.

Constraints

s는 길이 4 이상, 20이하인 문자열입니다.

 

My Solution

function solution(phone_number) {
  return '*'.repeat(phone_number.length - 4) + phone_number.slice(-4);
}

휴대폰 번호 길이에서 4f를 뺀 만큼 *을 만들어주고,

휴대폰 번호에서 마지막 4자리를 추출하기 위해 slice(-4)를 사용한다.

slice는 원본을 변경하지 않고 새로운 스트링을 리턴한다.

시작 인덱스와 끝 인덱스를 지정할 수 있고, 끝 인덱스는 생략이 가능하다.

substring 메서드와 동일하게 동작하지만, slice에는 음수인 인수를 전달할 수 있다.

음수인 인수를 전달하면 대상 문자열의 가장 뒤에서부터 시작하여 문자열을 잘라내어 반환한다. 

 

Other's Solutions

(1) substring 활용 

function solution(phone_number) {
  const answer = phone_number.length - 4;
  return '*'.repeat(answer) + phone_number.substring(answer);
}

substring 메서드는 대상 문자열에서

첫 번째 인수로 전달받은 인덱스에 위치하는 문자부터

두 번째 인수로 전달받은 인덱스에 위치하는 문자의 바로 이전 문자까지의 부분 문자열을 반환한다. 

substring 메서드의 두 번째 인수는 생략할 수 있다.

이때는 첫 번째 인수로 전달한 인덱스에 위치하는 문자부터 마지막 문자까지 부분 문자열을 반환한다. 

인수가 0보다 작은 값이거나 NaN인 경우 0으로 취급된다. 

만약 첫 번째 인수가 두 번째 인수보다 큰 경우, 두 인수는 교환된다. 

 

(2) 정규 표현식 활용

function hide_numbers(s) {
  return s.replace(/\d(?=\d{4})/g, '*');
}

\d{4}는 숫자가 4번 반복되는 문자열을 의미한다.

\d(?=\d{4})로 숫자 4개가 뒤따라오는 숫자 문자를 구한다.

그것을 '*'로 replace 해 준다.

 

정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 format language(형식 언어)이다. 

\d는 숫자 문자에 대응된다. [0-9]와 동일하다. 

x(?=y)는 오직 'y'가 뒤따라오는 'x'에만 대응된다. 이것은 lookahead라고 불린다. 

{n}은 앞 표현식이 n번 나타나는 부분에 대응된다. n은 반드시 양의 정수여야 한다.

플래그 g : Global이라는 의미이다. 대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다. 

 

(3) spread syntax, fill, join 활용

const solution = n => [...n].fill('*', 0, n.length - 4).join('');

n에 핸드폰 번호를 문자열 형태로 받으면, 전개 문법을 이용해 번호 하나하나를 펼쳐서 배열로 만든다.

fill(value, start, end)에 따라서 인덱스 0부터 뒷 4자리를 제외한 인덱스까지를 *로 채워준다.

그 후 join으로 문자열로 만들어 준다. 

 

ES6에서 도입된 spead syntax ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(전개, 분산하여) 개별적인 값들의 목록으로 만든다. 

Spread syntax를 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection,), arguments와 같이 for...of 문으로 순회할 수 있는 이터러블에 한정된다. 

Spread syntax의 결과는 값이 아니다.

이는 Spread syntax ... 이 피연산자를 연산하여 값을 생성하는 연산자가 아님을 의미한다. 

따라서 Spread syntax의 결과는 변수에 할당할 수 없다.

 

참고자료

JavacScript Deep Dive

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions