반응형

숫자 찾기

 

문제 설명

정수 num과 k가 매개변수로 주어질 때, num을 이루는 숫자 중에 k가 있으면 num의 그 숫자가 있는 자리 수를 return하고 없으면 -1을 return 하도록 solution 함수를 완성해보세요.

제한사항
  • 0 < num < 1,000,000
  • 0 ≤ k < 10
  • num에 k가 여러 개 있으면 가장 처음 나타나는 자리를 return 합니다.
입출력 예numkresult
29183 1 3
232443 4 4
123456 7 -1
입출력 예 설명

입출력 예 #1

  • 29183에서 1은 3번째에 있습니다.

입출력 예 #2

  • 232443에서 4는 4번째에 처음 등장합니다.

입출력 예 #3

  • 123456에 7은 없으므로 -1을 return 합니다.

 

function solution(num, k) {
    var answer = 0;

    let arr = num.toString().split("");

    let found = arr.findIndex(el => Number(el) === k)
    if (found > -1) found++;

    answer = found;
    return answer;
}

console.log(solution(29183, 1)); // 3
console.log(solution(232443, 4)); // 4
console.log(solution(123456, 7)); // -1

먼저 num 숫자를 toStirng 메서드로 string으로 바꾸고 split() 메서드로 배열로 만들어줍니다.

이 후, findIndex() 메서드로 k와 일치하는것이 없으면 -1을 일치하는게 있으면 자리 수를 넘겨줘야 하기 때문에 +1을 해서 넘겨줍니다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > Javascript 코딩테스트' 카테고리의 다른 글

[ Javascript ] 코딩테스트 연습 ( 문자열 계산하기 )  (0) 2023.01.21
[ Javascript ] 코딩테스트 연습 ( 배열의 유사도 )  (0) 2023.01.20
[ Javascript ] 코딩테스트 연습 ( n의 배수 고르기 )  (1) 2023.01.18
[ Javascript ] 코딩테스트 연습 ( 자릿수 더하기 )  (0) 2023.01.17
[ Javascript ] 코딩테스트 연습 ( OX퀴즈 )  (0) 2023.01.16
반응형

findLastIndex() 메서드

findLastIndex() 메서드는 배열을 역순으로 반복하고 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환합니다.

만족하는 요소가 없으면 -1을 반환합니다.

 

구문

// Arrow function
findLastIndex((element) => { /* … */ })
findLastIndex((element, index) => { /* … */ })
findLastIndex((element, index, array) => { /* … */ })

// Callback function
findLastIndex(callbackFn)
findLastIndex(callbackFn, thisArg)

// Inline callback function
findLastIndex(function (element) { /* … */ })
findLastIndex(function (element, index) { /* … */ })
findLastIndex(function (element, index, array) { /* … */ })
findLastIndex(function (element, index, array) { /* … */ }, thisArg)

 

매개변수

  • callback: 3개의 인수를 취해 배열의 각 값에 대해 실행할 함수입니다.
  • element: 배열에서 처리중인 현재 요소입니다.
  • index: 배열에서 처리중인 현재 요소의 인덱스입니다.
  • array: findLastIndex 함수가 호출된 배열입니다.
  • thisArg: 선택사항. 콜백을 실행할 때 this로 사용할 객체입니다.

 

반환 값

테스트를 통과한 배열의 첫 번째 요소의 인덱스를 반환합니다. ( 뒤에서 )

일치하는 요소가 없으면 -1을 반환합니다.

 

예제

 

역 배열에서 첫 번째 소수의 인덱스 찾기

let arr = [4, 6, 8, 12];
let arr1 = [4, 5, 6, 7, 8, 9, 10, 11, 12, 15];

const isPrime = (ele) => {
  if (ele % 2 === 0 || ele < 2) return false;

  for (let i = 3; i <= Math.sqrt(ele); i += 2) {
    if (ele % i === 0) return false;
  }

  return true;
}

console.log(arr.findLastIndex(isPrime)); // -1
console.log(arr1.findLastIndex(isPrime)); // 7
반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > javascript 문법' 카테고리의 다른 글

[ Javascript ] Array.prototype.flatMap()  (2) 2023.01.21
[ Javascript ] Array.prototype.flat()  (0) 2023.01.20
[ Javascript ] Array.prototype.findLast()  (0) 2023.01.18
[ Javascript ] Array.prototype.findIndex()  (0) 2023.01.17
[ Javascript ] Array.prototype.find()  (1) 2023.01.16
반응형

버블링 ( Bubbling )

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모요소의 핸들러가 동작합니다.

이렇게 가장 최상단 요소를 만날때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작하게 됩니다.

 

<form onclick="alert('form')">
    <div onclick="alert('div')">
        <p onclick="alert('p')">
            p -> div -> form
        </p>
    </div>
</form>
  1. 가장 안쪽에 있는 p의 onclick 핸들러가 동작합니다.
  2. 바로 위에 있는 div의 onclick 핸들러가 동작합니다.
  3. 가장 위에 있는 form의 onclick 핸들러가 동작합니다.
  4. document 객체를 만날때까지, 각 요소에 할당된 핸들러가 동작합니다.

P를 클릭하면 p -> div -> form 순서로 핸들러가 동작합니다.

위와 같이 하위에서 상위 요소로의 이벤트가 전파되는 방식을 이벤트 버블링( Event Bubbling )이라고 합니다.

 

버블링 중단하기

이벤트 버블링은 타깃 이벤트에서 시작해서 <html>요소를 거쳐 document 객체를 만날때까지 각 노드에서 모두 발생하게 됩니다.

그런데 버블링을 중간에 중단 시키는 명령을 할 수도 있습니다.

<form onclick="alert('form')">
    <div onclick="alert('div')">
        <div onclick="event.stopPropagation()">
            <p onclick="alert('p')">
                p -> stop
            </p>
        </div>
    </div>
</form>

위처럼 중간에 event.stopPropagation()을 추가하면 위쪽에 일어나는 버블링을 막을 수 있습니다.

:: 버블링은 꼭 멈춰야 하는 명백한 상황이 아니라면 막지 않아야 합니다. stopPropagation()은 후에 문제가 될 수 있는 상황을 만들어 낼 수 있습니다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'IT > IT ★★★' 카테고리의 다른 글

[ JS ] 재귀함수  (0) 2023.02.27
[ Web ] 브라우저 렌더링 ( Browser Rendering )  (0) 2023.01.30
[ Notion ] Notion API 만들기  (1) 2023.01.24
[ Web ] 주소창에 www.google.com을 입력했을 때 일어나는 일  (0) 2023.01.16
[ 용어 ] CS ?  (0) 2023.01.16
반응형

n의 배수 고르기

 

문제 설명

정수 n과 정수 배열 numlist가 매개변수로 주어질 때, numlist에서 n의 배수가 아닌 수들을 제거한 배열을 return하도록 solution 함수를 완성해주세요.

제한사항
  • 1 ≤ n ≤ 10,000
  • 1 ≤ numlist의 크기 ≤ 100
  • 1 ≤ numlist의 원소 ≤ 100,000
입출력 예nnumlistresult
3 [4, 5, 6, 7, 8, 9, 10, 11, 12] [6, 9, 12]
5 [1, 9, 3, 10, 13, 5] [10, 5]
12 [2, 100, 120, 600, 12, 12] [120, 600, 12, 12]
입출력 예 설명

입출력 예 #1

  • numlist에서 3의 배수만을 남긴 [6, 9, 12]를 return합니다.

입출력 예 #2

  • numlist에서 5의 배수만을 남긴 [10, 5]를 return합니다.

입출력 예 #3

  • numlist에서 12의 배수만을 남긴 [120, 600, 12, 12]를 return합니다.

 

function solution(n, numlist) {
    var answer = [];

    answer = numlist.filter(num => num % n === 0);

    return answer;
}

console.log(solution(3, [4, 5, 6, 7, 8, 9, 10, 11, 12])); // [6, 9, 12]
console.log(solution(5, [1, 9, 3, 10, 13, 5])); // [10, 5]
console.log(solution(12, [2, 100, 120, 600, 12, 12])); // [120, 600, 12, 12]

filter() 메서드로 나머지가 0이 나오는 요소들로 새로운 배열을 만들어줍니다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > Javascript 코딩테스트' 카테고리의 다른 글

[ Javascript ] 코딩테스트 연습 ( 배열의 유사도 )  (0) 2023.01.20
[ Javascript ] 코딩테스트 연습 ( 숫자 찾기 )  (0) 2023.01.19
[ Javascript ] 코딩테스트 연습 ( 자릿수 더하기 )  (0) 2023.01.17
[ Javascript ] 코딩테스트 연습 ( OX퀴즈 )  (0) 2023.01.16
[ Javascript ] 코딩테스트 1단계 ( 크기가 작은 부분 문자열 )  (0) 2023.01.15
반응형

findLast() 메서드

findLast() 메서드는 배열을 역순으로 반복하고 제공된 테스트 기능을 만족하는 첫 번째 요소의 값을 반환합니다.

만족하는 테스트 기능의 요소가 없으면 undefined가 반환됩니다.

 

구문

// Arrow function
findLast((element) => { /* … */ })
findLast((element, index) => { /* … */ })
findLast((element, index, array) => { /* … */ })

// Callback function
findLast(callbackFn)
findLast(callbackFn, thisArg)

// Inline callback function
findLast(function (element) { /* … */ })
findLast(function (element, index) { /* … */ })
findLast(function (element, index, array) { /* … */ })
findLast(function (element, index, array) { /* … */ }, thisArg)

 

매개변수

  • callbackFn: 배열의 각 요소에 대해 실행할 함수입니다.
  • element: 배열에서 처리 중인 현재 요소입니다.
  • index: 배열에서 처리 중인 현재 요소의 인덱스입니다.
  • array: findLast 함수가 호출된 배열입니다.
  • thisArg: this를 실행할 때 사용할 값 callbackFn입니다.

 

반환 값

제공된 테스트 기능을 만족하는 첫 번째 요소의 값을 반환합니다. ( 뒤에서 )

일치하는 값이 없는 경우에는 undefined를 반환합니다.

 

예제

 

역 배열에서 2보다 작은 첫번째 quantity 찾기 

const arr = [
  { name: "사과", quantity: 2 },
  { name: "바나나", quantity: 9 },
  { name: "감", quantity: 0 },
  { name: "체리", quantity: 1 },
  { name: "파인애플", quantity: 5 },
];

const isNotEnough = (item) => {
  return item.quantity < 2;
}

console.log(arr.findLast(isNotEnough)); // {name: '체리', quantity: 1}

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > javascript 문법' 카테고리의 다른 글

[ Javascript ] Array.prototype.flat()  (0) 2023.01.20
[ Javascript ] Array.prototype.findLastIndex()  (0) 2023.01.19
[ Javascript ] Array.prototype.findIndex()  (0) 2023.01.17
[ Javascript ] Array.prototype.find()  (1) 2023.01.16
[ Javascript ] Array.prototype.filter()  (0) 2023.01.09
반응형

findIndex() 메서드

findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

 

구문

arr.findIndex(callback(element[, index[, array]])[, thisArg]);

 

매개변수

  • callback: 3개의 인수를 취해 배열의 각 값에 대해 실행할 함수입니다.
  • element: 배열에서 처리중인 현재 요소입니다.
  • index: 배열에서 처리중인 현재 요소의 인덱스입니다.
  • array: findIndex 함수가 호출된 배열입니다.
  • thisArg: 선택사항. 콜백을 실행할 때 this로 사용할 객체입니다.

 

반환 값

요소가 테스트를 통과하면 배열의 인덱스를 반환합니다. 그렇지 않으면 -1을 반환합니다.

 

예제

 

배열에서 소수의 색인 찾기

let arr = [4, 6, 8, 12];
let arr1 = [4, 6, 7, 22];

const isPrime = (ele, index, array) => {
  let start = 2;
  while (start <= Math.sqrt(ele)) {
    if (ele % start++ < 1) {
      return false;
    }
  }
  return ele > 1;
}

console.log(arr.findIndex(isPrime)); // -1
console.log(arr1.findIndex(isPrime)); // 2

Math.sqrt() 함수 : 숫자의 제곱근을 반환합니다.

ex ) Math.sqrt(9); // 3

반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > javascript 문법' 카테고리의 다른 글

[ Javascript ] Array.prototype.findLastIndex()  (0) 2023.01.19
[ Javascript ] Array.prototype.findLast()  (0) 2023.01.18
[ Javascript ] Array.prototype.find()  (1) 2023.01.16
[ Javascript ] Array.prototype.filter()  (0) 2023.01.09
[ Javascript ] Array.prototype.fill()  (0) 2023.01.02
반응형

자릿수 더하기

 

문제 설명

정수 n이 매개변수로 주어질 때 n의 각 자리 숫자의 합을 return하도록 solution 함수를 완성해주세요

제한사항
  • 0 ≤ n ≤ 1,000,000
입출력 예nresult
1234 10
930211 16
입출력 예 설명

입출력 예 #1

  • 1 + 2 + 3 + 4 = 10을 return합니다.

입출력 예 #2

  • 9 + 3 + 0 + 2 + 1 + 1 = 16을 return합니다.

 

function solution(n) {
    var answer = 0;

    let arr = n.toString().split("");

    for (let i = 0; i < arr.length; i++) {
        answer = answer + Number(arr[i])
    }
    return answer;
}

console.log(solution(1234)); // 10
console.log(solution(930211)); // 16

n이라는 숫자를 toString() 메서드로 string으로 변경시켜준다음, split() 메서드로 한글자씩 배열로 만들어줍니다.

이 후, for문을 통해 answer에 숫자를 더해줍니다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > Javascript 코딩테스트' 카테고리의 다른 글

[ Javascript ] 코딩테스트 연습 ( 숫자 찾기 )  (0) 2023.01.19
[ Javascript ] 코딩테스트 연습 ( n의 배수 고르기 )  (1) 2023.01.18
[ Javascript ] 코딩테스트 연습 ( OX퀴즈 )  (0) 2023.01.16
[ Javascript ] 코딩테스트 1단계 ( 크기가 작은 부분 문자열 )  (0) 2023.01.15
[ Javascript ] 코딩테스트 연습 ( 문자열안에 문자열 )  (1) 2023.01.15
반응형

OX퀴즈

 

문제 설명

덧셈, 뺄셈 수식들이 'X [연산자] Y = Z' 형태로 들어있는 문자열 배열 quiz가 매개변수로 주어집니다. 수식이 옳다면 "O"를 틀리다면 "X"를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해 주세요.

제한사항
  • 연산 기호와 숫자 사이는 항상 하나의 공백이 존재합니다. 단 음수를 표시하는 마이너스 기호와 숫자 사이에는 공백이 존재하지 않습니다.
  • 1 ≤ quiz의 길이 ≤ 10
  • X, Y, Z는 각각 0부터 9까지 숫자로 이루어진 정수를 의미하며, 각 숫자의 맨 앞에 마이너스 기호가 하나 있을 수 있고 이는 음수를 의미합니다.
  • X, Y, Z는 0을 제외하고는 0으로 시작하지 않습니다.
  • -10,000 ≤ X, Y ≤ 10,000
  • -20,000 ≤ Z ≤ 20,000
  • [연산자]는 + 와 - 중 하나입니다.
입출력 예quizresult
["3 - 4 = -3", "5 + 6 = 11"] ["X", "O"]
["19 - 6 = 13", "5 + 66 = 71", "5 - 15 = 63", "3 - 1 = 2"] ["O", "O", "X", "O"]
입출력 예 설명

입출력 예 #1

  • 3 - 4 = -3 은 틀린 수식이므로 "X", 5 + 6 = 11 은 옳은 수식이므로 "O" 입니다. 따라서 ["X", "O"]를 return합니다.

입출력 예 #2

  • 19 - 6 = 13 은 옳은 수식이므로 "O", 5 + 66 = 71 은 옳은 수식이므로 "O", 5 - 15 = 63 은 틀린 수식이므로 "X", 3 - 1 = 2는 옳은 수식이므로 "O" 따라서 ["O", "O", "X", "O"]를 return합니다.

 

function solution(quiz) {
    var answer = [];


    for (let i = 0; i < quiz.length; i++) {
      let arr = quiz[i].split(" ");

      let x = Number(arr[0]);
      let y = Number(arr[2]);
      let z = Number(arr.at(-1));

      if (arr[1] === "-") {
        if (x - y === z) answer.push("O");
        else if (x - y !== z) answer.push("X");
      } else if (arr[1] === "+") {
        if (x + y === z) answer.push("O");
        else if (x + y !== z) answer.push("X");
      }
    }

    return answer;
}

console.log(solution(["3 - 4 = -3", "5 + 6 = 11"])); // ['X', 'O']
console.log(solution(["19 - 6 = 13", "5 + 66 = 71", "5 - 15 = 63", "3 - 1 = 2"])); // ['O', 'O', 'X', 'O']

연산 기호와 숫자 사이에 항상 공백이 존재한다고 했기 때문에 띄어쓰기마다 split() 메서드로 분리를 해줍니다.

그리고 수식의 형태가 X [연산자] Y = Z로 고정이기 때문에 배열의 0번 2번 마지막 배열을 숫자로 변경해 줍니다.

이후, 수식이 맞으면 "O"를 틀리면 "X"를 answer 배열에 넣어줍니다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > Javascript 코딩테스트' 카테고리의 다른 글

[ Javascript ] 코딩테스트 연습 ( n의 배수 고르기 )  (1) 2023.01.18
[ Javascript ] 코딩테스트 연습 ( 자릿수 더하기 )  (0) 2023.01.17
[ Javascript ] 코딩테스트 1단계 ( 크기가 작은 부분 문자열 )  (0) 2023.01.15
[ Javascript ] 코딩테스트 연습 ( 문자열안에 문자열 )  (1) 2023.01.15
[ Javascript ] 코딩테스트 연습 ( 제곱수 판별하기 )  (1) 2023.01.14
반응형

find() 메서드

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 만약 그런 요소가 없을 경우에는 undefined를 반환합니다.

 

구문

arr.find(callback[, thisArg]);

 

매개변수

  • callback: 배열의 각 값에 대해 실행할 함수입니다. 아래 세 인자를 받습니다. 
  • index: 콜백함수에서 처리할 현재 요소의 인덱스
  • array: find 함수를 호출한 배열
  • thisArg: 선택 항목. 콜백이 호출될 때 this로 사용할 객체

 

반환 값

주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. ( 그 외에는 undefined를 반환합니다. )

 

예제

 

10보다 큰 가장 첫 번째 요소 찾기

const arr = [5, 7, 1, 100, 130, 42];

const found = arr.find(el => el > 10);

console.log(found); // 100

 

속성 중 하나를 사용하여 배열에서 객체 찾기

const inventory = [
    { name: '사과', quantity: 2 },
    { name: '바나나', quantity: 0 },
    { name: '체리', quantity: 5 }
];

const result = inventory.find(fruit => fruit.name === '체리');

console.log(result) // { name: '체리', quantity: 5 }

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > javascript 문법' 카테고리의 다른 글

[ Javascript ] Array.prototype.findLast()  (0) 2023.01.18
[ Javascript ] Array.prototype.findIndex()  (0) 2023.01.17
[ Javascript ] Array.prototype.filter()  (0) 2023.01.09
[ Javascript ] Array.prototype.fill()  (0) 2023.01.02
[ Javascript ] Array.prototype.every()  (1) 2022.12.28
반응형

크기가 작은 부분문자열

 

문제 설명

숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요.

예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 141, 159 2개 입니다.

제한사항
  • 1 ≤ p의 길이 ≤ 18
  • p의 길이 ≤ t의 길이 ≤ 10,000
  • t와 p는 숫자로만 이루어진 문자열이며, 0으로 시작하지 않습니다.
입출력 예tpresult
"3141592" "271" 2
"500220839878" "7" 8
"10203" "15" 3
입출력 예 설명

입출력 예 #1
본문과 같습니다.

입출력 예 #2
p의 길이가 1이므로 t의 부분문자열은 "5", "0", 0", "2", "2", "0", "8", "3", "9", "8", "7", "8"이며 이중 7보다 작거나 같은 숫자는 "5", "0", "0", "2", "2", "0", "3", "7" 이렇게 8개가 있습니다.

입출력 예 #3
p의 길이가 2이므로 t의 부분문자열은 "10", "02", "20", "03"이며, 이중 15보다 작거나 같은 숫자는 "10", "02", "03" 이렇게 3개입니다. "02"와 "03"은 각각 2, 3에 해당한다는 점에 주의하세요

 

1번 ( 풀어쓰기 )

function solution(t, p) {
    var answer = 0;

    let arr = [];

    for (let i = 0; i < t.length; i++) {
        let newArray = t;
        if (newArray.slice(i, p.length + i).length !== p.length) break;
        arr.push(newArray.slice(i, p.length + i));
    }

    for (let i = 0; i < arr.length; i ++) {
        if (Number(arr[i]) <= p) answer++;
    }
    return answer;
}

console.log(solution("3141592", "271")); // 2
console.log(solution("500220839878", "7")); // 8
console.log(solution("10203", "15")); // 3

먼저 첫 번째 for문에서 arr 배열에 잘라준 숫자로 된 문자열을 넣어줍니다.

그리고 두 번째 for문에서 비교를 해줍니다.

 

2번 ( 줄이기 )

function solution(t, p) {
    var answer = 0;

    let arr = [];
    for (let i = 0; i < t.length; i++) {
        let newArray = t;

        if (newArray.slice(i, p.length + i).length === p.length) {
            if (Number(newArray.slice(i, p.length + i)) <= p) answer++;
        }
    }
    return answer;
}

console.log(solution("3141592", "271")); // 2
console.log(solution("500220839878", "7")); // 8
console.log(solution("10203", "15")); // 3

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > Javascript 코딩테스트' 카테고리의 다른 글

[ Javascript ] 코딩테스트 연습 ( 자릿수 더하기 )  (0) 2023.01.17
[ Javascript ] 코딩테스트 연습 ( OX퀴즈 )  (0) 2023.01.16
[ Javascript ] 코딩테스트 연습 ( 문자열안에 문자열 )  (1) 2023.01.15
[ Javascript ] 코딩테스트 연습 ( 제곱수 판별하기 )  (1) 2023.01.14
[ Javscript ] 코딩테스트 연습 ( 세균 증식 )  (1) 2023.01.14

+ Recent posts

티스토리툴바