210919 TIL

23658 단어 codecademy문제풀이codecademy문제풀이

Learn JavaScript Syntax: Arrays,Loops,Objects, Iterators

배열, 루프, 객체, 반복자에 대한 기초 학습 후 중급 과제 풀제 풀이

Lodash - 객체 메서드 7문제

Lodash공식홈페이지에 들어가면 아래와 같은 짧은 Lodash 소개를 볼 수 있다.

Lodash란?
JavaScript 유틸리티 라이브러리다.
Lodash는 배열, 숫자, 객체, 문자열 등으로 작업하는 번거로움을 없애 JavaScript를 더 쉽게 만든다.

Lodash의 모듈러 메서드는 다음과 같은 경우에 적합하다.

  • 배열, 객체 및 문자열 반복
  • 값 조작 및 테스트
  • 복합 함수 만들기

코드아카데미 문제
10가지 lodash 메소드를 직접 구현하세요.

공통
빈 객체로 초기화되는 _이라는 새 변수를 만든다. 이 객체는 모든 메서드를 포함한 라이브러리를 나타낸다.

const _ = {}

_.clamp()

Specify

  • .clamp()는 number, lower, upper 세 가지 인수를 취한다.
  • .clamp()는 제공된 두 개의 범위(lower, upper) 내에서 number을 수정한다.
  • number이 lower보다 작으면 lower을 최종 숫자로 반환한다.
  • number이 upper보다 크면 upper을 최종 숫자로 반환한다.
  • number이 lower과 upper 범위 내에 있으면 number을 최종 숫자로 반환한다.

Ideate

  1. lodash 객체에 .clamp() 메서드를 추가한다.
  2. Math.max() 메서드를 이용해 하한으로 숫자를 고정시키는데 사용한다.
  3. Math.min() 메서드를 이용해 상한으로 숫자를 고정시키는데 사용한다.
  4. 고정된 숫자를 최종 반환한다.

Implement

  1. _객체에 clamp() 메서드를 추가한다.
  2. 이 메서드에 number, lower, upper 세 개의 매개변수를 추가한다.
  3. lowerClampedValue 변수를 생성한 뒤 Math.max(number, lower) 반환 값을 값으로 할당한다.
  4. clampedValue 변수를 생성한 뒤 Math.min(lowerClampedValue, upper) 반환 값을 값으로 할당한다.
    number > upper 이라면 upper을 반환한다.(Specify 4)
    number < upper 이라면 number을 반환한다.(Specify 5)
    lower < upper 이라면 lower을 반환한다.(Specify 3)
const _ = {
  clamp(number, lower, upper) {
    const lowerClampedValue = Math.max(number, lower);
    const clampedValue = Math.min(lowerClampedValue, upper);
    return clampedValue;
  },
}

test

코드아카데미에서 제공하는 터미널을 통해 node test/clamp.js를 실행 후 잘 작동하는지 확인한다.

_.inRange()

Specify

  • .inRange()는 number, start, end 세 가지 인수를 취한다.
  • .inRange()는 number이 start와 end로 지정한 범위 내에 있는지 확인한다.
  • number이 start값보다 작으면 .inRange()는 false를 반환한다.
  • number이 end값보다 크거나 같으면 .inRange()는 false를 반환한다.
  • number이 start와 end 값 내에 있으면 .inRange()는 true를 반환한다.
  • 메서드에 end값이 제공되지 않으면 start값은 0이고 end값은 제공된 start값이다.
  • start값이 end값보다 크면 두 값을 바꿔야 한다.

Ideate

  1. lodash 객체에 .inRange() 메서드를 추가한다.
  2. end 값이 정의되지 않았는지 확인한다. 만약 그렇다면 end값을 start값과 같게 설정한 다음 start값을 0으로 설정한다.
  3. start값이 end값 보다 큰지 확인한다. 만약 그렇다면 두 값을 바꾼다.
  4. 부울 연산자를 사용해 number이 지정된 범위에 있는지 확인한다.
  5. 부울 값을 최종으로 반환한다.

Implement

  1. _객체에 inRange() 메서드를 추가한다.
  2. 세 개의 매개변수 number, start, end를 추가한다.
  3. if문을 이용해 end가 정의되지 않았는지 확인한다.
  4. 만약 true라면 end값은 start값으로 재할당하고 start값은 0으로 재할당한다.
  5. if문을 이용해 start값이 end값보다 더 큰지 확인한다.
  6. 만약 true라면 새 변수 temp를 생성해 현재 end값을 할당한다. 그런 다음 end값을 start값으로 재할당한다. 마지막으로 start값을 temp값으로 재할당한다.
  7. isInRange 새 변수를 생성하고 삼항연산자 표현식을 이용해 부울 값을 할당한다.
  8. isInRange 변수 값을 최종으로 반환한다.
const _ = {
  inRange(number, start, end) {
    if (end === undefined) {
      end = start;
      start = 0;
    }
    if (start > end) {
      const temp = end;
      end = start;
      start = temp;
    }
    const isInRange = number >= start && number < end ? true : false;
    return isInRange;
  },
};

test

코드아카데미에서 제공하는 터미널을 통해 node test/in-range.js를 실행 후 잘 작동하는지 확인한다.

_.word()

Specify

  • .words()는 문자열이라는 하나의 인수를 취한다.
  • .words()는 문자열을 단어 배열로 분할한다.
  • 단어는 공백으로 구분된 문자열로 정의되므로 각 공백 문자는 한 단어의 끝과 다음 단어의 시작을 나타낸다.
  • 참고: lodash 문서의 words()는 패턴 매개변수가 있다. 하지만 이 문제의 메소드는 추가 패턴 매개변수를 허용할 필요가 없다. 공백 기반으로 문자열만 단어로 분할한다.

Ideate

  1. lodash 객체에 .words() 메서드를 추가한다.
  2. string.prototype.split() 메서드를 사용하여 문자열을 단어 배열로 분할한다.
  3. 생성한 단어 배열을 반환한다.

Implement

  1. _객체에 words() 메서드를 추가한다.
  2. 매개변수에 string.prototype.split(' ') 메서드를 사용해 공백 문자마다 분할시켜 단어 배열로 만든다.
  3. 값을 반환한다.
const _ = {
    words(str, regExp = /[A-Za-z]+/g) {
    return str.split(" ");
  },
}

+) 만약 패턴을 매개변수로 설정한다면 아래와 같이 만들 수 있다.
regExp 매개변수에 따로 전달된 인수가 없다면 문자 패턴만 검색하는 [A-Za-z]+/g를 기본 값으로 설정했다.

const _ = {
    words(str, regExp = /[A-Za-z]+/g) {
    return str.match(regExp);
  },
}

test

코드아카데미에서 제공하는 터미널을 통해 node test/words.js를 실행 후 잘 작동하는지 확인한다.

_.pad()

Specify

  • .pad()는 string, length 두 가지 인수를 취한다.
  • .pad()는 문자열의 양쪽에 균등하게 공백을 추가하여 원하는 길이에 도달하도록 한다.
  • 지정된 길이에 도달하기 위해 패딩이 홀수 양이 필요한 경우 문자열 끝에 추가 패딩이 추가된다.
  • 이 문제에서는 chars 매개변수를 허용할 필요가 없다. 문자열을 채우기 위해 공백 문자만 추가한다.

Ideate

  1. lodash 객체에 pad() 메서드를 추가한다.
  2. length 값이 string.length 값보다 큰지 확인한다. string.length값이 더 큰 경우 패딩되지 않은 문자열을 그대로 반환한다.
  3. length 값과 string.length 값의 차이를 찾아 2로 나눈 다음 결과를 내림하여 문자열의 시작 부분에 추가할 패딩 값으로 설정한다.
  4. length 값에서 string.length 값과 시작 패딩값을 빼서 문자열의 끝에 추가할 패딩 값으로 설정한다.
  5. 계산한 시작 패딩값과 끝 패딩값을 string 문자열의 양쪽에 더하여 패딩 처리된 문자열을 생성한다.
  6. 해당 문자열을 반환한다.

Implement

  1. _객체에 pad() 메서드를 추가한다.
  2. 이 메서드에 두 개의 매개변수 string, length을 추가한다.
  3. if문으로 length 값이 string.length 값보다 작은지 확인한다. 만약 작다면 string을 그대로 반환한다.
  4. startPaddingLength 이름의 변수를 생성한다.
    변숫값으로 length 값에서 string.length값을 뺀 후 2를 나누어 Math.floor()메서드를 적용한 값을 할당한다.
    (length 길이에 도달하기 위해 필요한 패딩 값이 짝수면 시작 패딩값과 끝 패딩값이 같아 상관없지만, 홀수인 경우 끝 패딩값이 시작 패딩값보다 커야 한다는 조건이 있다. 그 때문에 Math.floor()메서드를 사용하여 내림시킨다.)
  5. endPaddingLength 이름의 변수를 생성한다.
    변숫값으로 length - string.length - startPaddingLength 표현식 값을 할당한다.

    4번과 5번 적용 예제
    length값이 8이고, string.length값이 5인 경우 조건에 따라 시작 패딩값은 1이고 끝 패딩값은 2이어야 한다.
    4번: (8 - 5)/2는 1.5이다. 여기에 Math.floor()을 적용하면 1이다. 따라서 시작값은 1이 된다.
    5번: 8 - 5 - 1은 2다. 따라서 끝값은 2가 된다.

  6. paddingString 이름의 변수를 만든다.
  7. 공백 문자에 repeat 메서드를 사용해 인수로 startPaddingLength와 endPaddingLength값을 각각 전달한다. 그리고 최종값을 paddingString 값으로 할당한다.
  8. paddingString을 반환한다.
const _ = {
  pad(str, length) {
    if (str.length >= length) return str;
    const startPaddingLength = Math.floor((length - str.length) / 2);
    const endPaddingLength = length - str.length - startPaddingLength;
    const padddedString =
      " ".repeat(startPaddingLength) + str + " ".repeat(endPaddingLength);
    return padddedString;
  },
}

test

코드아카데미에서 제공하는 터미널을 통해 node test/pad.js를 실행 후 잘 작동하는지 확인한다.

_.has()

Specify

  • .has()는 object, key 두 가지 인수를 취한다.
  • .has()는 object에 지정된 key값이 포함되어 있는지 확인한다.
  • 만약 키 값을 포함한다면 true를 반환하고, 없다면 false값을 반환한다.
  • 이 문제는 추가 경로 매개변수를 사용할 필요가 없다. 중첩되지 않은 값만 확인한다.

Ideate

  1. lodash 객체에 .has() 메서드를 추가한다.
  2. object의 key 값에 접근한다.
  3. 해당 key 값이 있으면 true를 반환하고 undefiend라면 false를 반환한다.

Implement

  1. _객체에 has() 메서드를 추가한다.
  2. object와 key 매개 변수를 추가한다.
  3. hasValue 이름의 변수를 생성하고 삼항 연산자를 사용하여 값을 할당한다.
    object에 해당 key 값이 undefined라면 없다는 뜻이기 때문에 false를, undefined가 아니라면 있다는 뜻이기 때문에 true 값을 할당한다.
  4. hasValue 최종값을 반환한다.
const _ = {
  has(obj, key) {
    const hasValue = obj[key] === undefined ? false : true;
    return hasValue;
  },
}

test

코드아카데미에서 제공하는 터미널을 통해 node test/has.js를 실행 후 잘 작동하는지 확인한다.

_.invert()

Specify

  • .invert()는 객체라는 인수 한 가지를 취한다.
  • .invert()는 제공된 객체의 각 키/값 쌍을 반복하고 키와 값을 교환한다.

Ideate

  1. lodash 객체에 .lodash() 메서드를 추가한다.
  2. 키와 값이 교환된 객체를 담을 새 객체를 만든다.
  3. 제공된 객쳉의 각 키를 반복한다.
  4. 해당 키의 원래 객체 값이 반전된 객체의 키로 설정하고 해당 키의 값을 원래 객체의 키로 설정한다.
  5. 반전된 객체를 담은 새 객체를 반환한다.

Implement

  1. _객체에 invert() 메서드를 추가한다.
  2. object를 매개변수로 추가한다.
  3. invertedObject 이름의 변수를 생성하고 빈 객체를 할당한다.
  4. for...in 루프를 사용해 전달받은 object의 각 키를 순환한다.
  5. originalValue 이름의 변수를 생성하고 object의 순환중인 현재 키 값을 할당한다.
  6. invertedObject의 키 값을 originalValue 설정해 순환중인 현재 키 값을 할당한다.
  7. 루프가 끝나면 invertedObject을 값으로 반환한다.
const _ = {
  invert(obj) {
    let invertedObject = {};
    for (let key in obj) {
      const originalValue = obj[key];
      invertedObject[originalValue] = key;
    }
    return invertedObject;
  },
}

test

코드아카데미에서 제공하는 터미널을 통해 node test/invert.js를 실행 후 잘 작동하는지 확인한다.

_.findKey()

Specify

  • .findKey()는 두 가지 인수인 객체와 predicate 함수(부울 값을 반환)를 취한다.
  • .findKey()는 객체의 각 키/값 쌍을 반복하고 값으로 predicate 함수를 호출한다.
  • .findKey()는 predicate 함수에서 true를 반환한다면 첫 번째 키를 반환한다.
  • .findKey()는 predicate 함수에서 반환하는 값이 없으면 undefined를 반환한다.

Ideate

  1. lodash 객체에 .findKey() 메서드를 추가한다.
  2. 객체의 각 키를 반복한다.
  3. 해당 키의 값으로 제공된 predicate 함수를 호출한다.
  4. predicate 함수가 true 값을 반환하면 메서드에서 현재 키 값을 반환한다.
  5. 루프가 종료되면 predicate 함수에서 반환한 값이 없기 때문에 undefined를 반환한다.

Implement

  1. _객체에 findKey() 메서드를 추가한다.
  2. object와 predicate함수를 매개변수로 취한다.
  3. for...in 루프를 사용하여 각 키를 순환한다.
  4. value라는 이름의 변수를 생성하고 현재 키 값과 동일한 값을 할당한다.
  5. predicateReturnValue라는 이름의 변수를 생성하고 predicate함수에 value값을 인수로 전달한 후 호출한 결과를 값으로 할당한다.
  6. if문을 사용해 predicateReturnValue변수가 true로 평가 된다면 key를 반환하고, 반환 값 없이 루프가 종료되면 undefined를 반환한다.
const _ = {
  findKey(obj, predicate) {
    for (let key in obj) {
      const value = obj[key];
      const predicateReturnValue = predicate(value);
      if (predicateReturnValue) return key;
    }
    return undefined;
  },
}

test

코드아카데미에서 제공하는 터미널을 통해 node test/find-key.js를 실행 후 잘 작동하는지 확인한다.

[CodeKata] 수박수박수박수박수박수?
spring 빠른 입문 실례 강좌

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage