TIL 11일차 JS배열, 객체 코플릿 그리고 페어 😌

shleecloud·2021년 8월 2일

Codestates

목록 보기

11/95

시작

오늘은 코플릿 위주로 진행해서 달성 목표는 따로 없다. 그래서 코플릿 중 까다로웠던 부분이나 팁 위주로 포스팅하고자 한다.

새로운 주소로 배열 복사

arr = [1, 2, 3];
// 배열의 주소를 복사했기 때문에 같은 메모리를 바라본다.
arrSoftCopy = arr;
// 새로운 배열을 만들고 복사했기 때문에 다른 메모리를 바라본다. 
arrDeepCopy = arr.slice();
// 테스트 
arrSoftCopy.pop()
console.log(arr) // 1, 2
console.log(arrSoftCopy) // 1, 2
console.log(arrDeepCopy) // 1, 2, 3

slice 함수로 아무런 전달인자를 주지 않으면 그대로 새로운 배열로 그대로 복사한다. 이 기법은 앞으로 두고두고 써먹을 국밥같은 기법이 아닐까?
새로운 배열을 만드는 immtator 함수들까지 포함해서 다양하게 쓸 수 있을 것 같다.

Object인지 Array인지?

typeOf 함수로 객체와 배열을 확인하면 둘 다 object로 나온다. 배열의 경우 Array.isArray() 메소드로 구분할 수 있지만 객체는 Object.isObject()라는 메소드는 없다.
둘을 구분할 수 없는지 찾아보던 중 constructor 메소드가 정확하게 나눠주는걸 알았다. 근데 조금 찾아보니 아직 프로토타입과 클래스에 대해 배우지 않아서 정확히 정리하는건 과한 느낌이 든다. 일단 마크만 해놓고 나중에 돌아와서 보면 좋을 것 같다.

constructor
constructor 메서드는 class 내에서 객체를 생성하고 초기화하기 위한 특별한 메서드입니다.
MDN constructor

뒤에서 인덱싱

배열 24번 코플릿 전화번호 생성하는 문제였다. 스프린트 리뷰에서 나온 내용인데 전화번호 앞자리가 있는지 없는지에 따라 처리 방식이 나뉘는 문제였다. 나는 앞부터 인덱싱을 해서 if문으로 나눠서 진행했다. 이 방식의 단점은 앞자리가 8 또는 11뿐만 아니라 10일수도 있다. 예를들어 02로 시작하는 번호일 수도 있다.
이런 단점과 복잡함을 깔끔하게 만드려면 변수를 줄이면 된다. 앞자리가 계속 달라질 수 있다면 이렇게 뒤를 기준으로 생각할 수 있다.
arr.slice (array.length - 8, array.length -4)

기술적으로 대단한 내용은 아니지만 내가 생각 못하던 방식이라 참신해서 기록한다. 이런게 익숙해지면 고수가 되겠지.
그리고 이 문제는 지난번 TIL에서 처리하기 까다로운 자료형인 배열을 join 함수로 문자열로 수정해서 진행하면 간단하게 해결할 수 있었다는 내용을 기록했다. 두 번이나 나올 정도면 문제까지 적어둔다.

createPhoneNumber

문제
0-9 사이의 정수를 요소로 갖는 배열을 입력받아 전화번호 형식의 문자열을 리턴해야 합니다.
입력
인자 1 : arr
number 타입을 요소로 갖는 배열
arr[i]는 0 이상 9 이하의 정수
배열의 길이는 8 또는 11
출력
string 타입을 리턴해야 합니다.
주의 사항
반복문(for, while) 사용은 금지됩니다.
배열의 길이가 8인 경우, 앞에 [0, 1, 0]이 있다고 가정합니다.

function createPhoneNumber(arr) {
  // TODO: 여기에 코드를 작성합니다.
  // let phoneNumber = [];
  // if (arr.length === 8) {
  //   phoneNumber = ['(',0,1,0,')'];
  // } else {
  //   phoneNumber.push('(');
  //   phoneNumber = phoneNumber.concat(arr.slice(0,3));
  //   phoneNumber.push(')');
  //   arr.splice(0,3);
  // }
  
  // phoneNumber = phoneNumber.concat(arr.slice(0,4));
  // phoneNumber.push('-');
  // phoneNumber = phoneNumber.concat(arr.slice(4,8));
  // return phoneNumber.join('');
  
  let phoneNumber = '';
  phoneNumber = arr.join('');
  if (phoneNumber.length === 8) {
    // 템플릿 리터럴 쓰면 더 깔끔함.
    phoneNumber = '(010)' + phoneNumber.slice(0,4) + '-' + phoneNumber.slice(4);
  } else {
    phoneNumber = '(' + phoneNumber.slice(0,3) + ')' + phoneNumber.slice(3, 7) + '-' + phoneNumber.slice(7);
  }
  return phoneNumber;
}

페어

감사하게도 정말 좋은 페어분을 중요한 좋은 파트를 같이 했다. 같이 진행하면서 토론하고 문제를 해결하고 최적화 하는 부분에서 미처 생각 못했던 부분도 알게 돼서 즐겁기도 하고 유익한 경험이었다. 이런 공감대를 만들 수 있는 부분이 혼자서 코딩 공부를 하는 것과 큰 차이를 준다. 실력 차이가 나면 나는대로 상대방에게 설명하면서 나 자신의 개념도 더 확고해진다. 이건 단방향 강의로는 얻기 힘든 부분이다. 코드스테이츠 사랑해요. 😘