Javascript 문법정리

jathazp·2022년 1월 16일
JavaScript
0

15

목록 보기
6/14

1. 자료형

  • parseInt : 정수 자료형 변환

  • typeof : 자료형 검사

  • 문자열-> 숫자 형변환 +
    ex) x = "1.25" , x=+x (1.25)

  • undefined vs Nan vs Null
    (1) NaN : Not a Number
    (2) undefined : 변수나 속성이 아직 정의되지 않은 경우
    (3) null : 프로그래머가 의도적으로 아무것도 없는 비어있는 상태를 나타날 때 사용
    (4) infinite : 1/0 처럼 무한한 값

  • 간단 진수변환

    (1) {{10진수}}.toString(n) 를 사용해 10진수를 원하는 n진수로 변환
    (2) parseInt({{n진수}}, n) 를 사용해 n진수를 10진수로 변환
    https://jsikim1.tistory.com/161

    연습문제:
    https://programmers.co.kr/learn/courses/30/lessons/6893

2. 연산자 우선순위

(1) ++, -- (단항 연산자)
(2) ! (부정 연산자)
(3) *, /, % (산술 연산자 (곱,나눔,나머지))
(4) +, - (산술 연산자(덧,뺄))
(5) <, <=, >, >= (관계 연산자)
(6) ==, != (관계 연산자)
(7) && (논리곱 연산자)
(8) || (논리합 연산자)

3. 문자열

  • String 붙이기

    (1) str1.concat(str2)
    (2) str1+str2

  • 부분문자열 구하기

    • String.prototype.substr()

      str.substr(pos,length)
      (1) pos부터 length길이 만큼의 부분 문자열 반환
      (2) pos가 음수인 경우 length-pos 로 동작
      (3) pos 생략시 pos부터 마지막까지의 문자열 반환
      ex) str.substr(-7) 뒤에서부터 7개의 문자를 자름
      str.substr(1) 1부터 끝까지 자름
      str.substr(1,2) 1부터 두 문자를 자름


  • 문자열 검색
    (1)  String.prototype.indexOf(str) :
    여러개 존재시 첫번째 문자열의 위치 반환

    (2)String.prototype.lastIndexOf(str) :
    주어진 값과 일치하는 부분을 fromIndex로부터 역순으로 탐색하여, 최초로 마주치는 인덱스를 반환

    ex)
    'Blue Whale'.indexOf('Blue'); // returns 0
    'Blue Whale'.indexOf('Blute'); // returns -1
    'Blue Whale'.indexOf('Whale', 0); // returns 5
    'Blue Whale'.indexOf('Whale', 5); // returns 5
    'Blue Whale'.indexOf('Whale', 7); // returns -1
    'Blue Whale'.indexOf(''); // returns 0
    'Blue Whale'.indexOf('', 9); // returns 9
    'Blue Whale'.indexOf('', 10); // returns 10
    'Blue Whale'.indexOf('', 11); // returns 10


  • 문자열 자르기 : String.prototype().split()
    var str="1,2,3,4,5";
    arr = str.split(",");

    결과
    arr = ["1", "2", "3", "4", "5"];

    문자열 자르기
    https://developer-talk.tistory.com/178


  • 문자열 replaceall 방법
    console.log(string.replace(/+/g, '')) //정규표현식

  • split 과 join 을 활용한 reaplceAll

        function solution(s) {
        let numbers = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
        var answer = s;

        for(let i=0; i< numbers.length; i++) {
            let arr = answer.split(numbers[i]);
           answer = arr.join(i);
        }

        return Number(answer);
   }

  • String.Prototype.repeat()

    const row = '*'.repeat(a)
    for(let i =0; i < b; i++){
        console.log(row)
    }

  • 아스키 코드표 변환
    javascript는 문자열에 직접 대입이 불가능
    아래 방식은 문자 하나하나에 아스키값을 적용하는 함수를 사용해서 새로운 문자열에 붙여주는 방식

    아스키 변환 함수
    String.prototype.charCodeAt() // string to ascii
    String.fromCharCode(ascii_val) // ascii to string

    answer += String.fromCharCode((s.charCodeAt(i) - ascii_alpha + n) % 26 + ascii_alpha);
String.fromCharCode(ascii_num) // ascii to string
s.charCodeAt(idx) // string to ascii코드를 입력하세요

4. 배열

5. 익명함수 , 람다함수(화살표 함수), 콜백 함수

6. 정렬

sort는 반환값없이 자기 자신에 바로적용

Ex1) 오름차순

answer.sort(function(a, b) {return a - b;});

Ex2)

function solution(strings, n) {
    strings.sort(
        (s1, s2) => {
            if (s1[n] == s2[n]) {
                if (s1 > s2) return 1;
                else return -1;
            }
            else {
                if (s1[n] > s2[n]) return 1;
                else return -1;
            }
        }
    );
    return strings;
}

Ex3)

      function solution(s) {
          let sarr = s.split('');
          sarr.sort((a, b) => {
              if (a > b) return -1;
              else return 1;
          });
          return sarr.join('');
      }

Ex4)

  function solution(strings, n) {
      strings.sort(//오름차순으로 하고싶음
          (s1, s2) => {
              if (s1[n] == s2[n]) {
                  if (s1 > s2) return 1; // s1>s2 면 바꿔줘야하므로 바꿔준다 1리턴
                  else if (s1 < s2) return -1; // s1<s2 면 안바꾼다 -1리턴
                  else return 0;//같은경우 0리턴
              }
              else {
                  if (s1[n] > s2[n]) return 1;
                  if (s1[n] < s2[n]) return -1;
                  else return 0;
              }
          }
      );
      return strings;
  }

https://dudmy.net/javascript/2015/11/16/javascript-sort/
https://hianna.tistory.com/409

  • Pair_sort
    두 수를 묶어서 pair_sort 하는 방법

    (1) 두 수를 딕셔너리로 만들어서 {key1:val1,key2:val2} 형태로 list에 push
    (2) arr.sort((a, b) => b.key2 - a.key2); 처럼 val에 접근해 두 수중 원하는 값 기준으로 정렬이 가능
    여러개의 숫자가 있어도 같은 원리로 정렬할 수 있다.

    function solution(N, stages) {
    var answer = [];
    let now_stage = Array(N + 2).fill(0);
    let acc_stage = Array(N + 2).fill(0);
    acc_stage[1] = stages.length;
    for (let i = 0; i < stages.length; i++) {
        now_stage[stages[i]]++;
    }
    for (let i = 2; i < now_stage.length; i++) {
        acc_stage[i] = acc_stage[i - 1] - now_stage[i - 1];
    }
    let ans = [];
    for (let i = 1; i < now_stage.length; i++) {
        ans.push({ now: i, val: now_stage[i] / acc_stage[i] });
    }
    ans.sort((a, b) => b.val - a.val);
    for (let i = 0; i < ans.length; i++) {
        if (ans[i].now == N + 1) continue;
        answer.push(ans[i].now);
    }
    return answer;
}

console.log(solution(5, [2, 1, 2, 6, 2, 4, 3, 3]));

7. 숫자 판별

  • isNaN() : is not a number?

8. swap

  • [a,b] = [b,a]

9. ...연산자 > SpreadOperator 전개 구문

:https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

  • spread operation 쓰면 그냥 해당 객체나 결과값을 말그대로 펼쳐쓴다 생각

  • spreadoperator를 이용한 깊은복사 예시

    let arr = ['a','b','c'];
let arr2 = [...arr];

console.log(arr); // [ 'a', 'b', 'c' ]

arr2.push('d'); //inserting an element at the end of arr2

console.log(arr2); // [ 'a', 'b', 'c', 'd' ]
console.log(arr); // [ 'a', 'b', 'c' ]

10. 배열최대값 js

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/max
Math.max(1,2,3,4,5)
Math.min(1,2,3,4,5)

11. 수학

(1) 소수판별 알고리즘

function isPrime(num) {

  if(num === 2) {
    return true;
  }

  for(let i = 2; i <= Math.floor(Math.sqrt(num)); i++){
    if(num % i === 0){
      // 한 번이라도 나누어 졌으니 소수가 아니므로 return false
      return false; 
    }
  }
  // 나눠진 수가 없다면 해당 수는 소수이므로 return true
  return true; 
}

num의 제곱근까지만 반복문을 돌려 판별하면 된다.
그 뒤의 약수는 앞서나온 약수로 num을 나눈 값들이 되기 때문이다.
따라서 방법의 시간복잡도는 O(√ N) 이 된다.
36=> 1 2 3 4 6 9 12 18 36
제곱근인 6까지만 검사를 하면
9 = 36/4,12 = 36/3, 18=36/2 , 36=36/1
처럼 앞에 나온 수들로 36을 나눈 몫이 나머지 약수가 된다.
https://ant-programmer.tistory.com/2


(2)약수개수 알고리즘
소수판별 방법과 같은 알고리즘이다.
앞에서 말한것처럼 제곱근까지만 검사하며 i가 약수인 경우 n/i도 약수라는것을 이용해 cnt=cnt+2 를 적용시켜주었다.
단, i가 제곱근 인 경우는 6 = 36/6 같은 수를 의미하므로 cnt++ 를 시켜주었다

function cntdiv(n){
    let cnt=0;
    for(let i=1;i<=Math.sqrt(n);i++){
        if(n%i==0){
            if(n/i==i) cnt++;
            else cnt=cnt+2;
        }
    }
    return cnt;
}

(3) left와 right 범위 사이의 모든 소수 구하기
이 경우는 에라토스 테네스의 체를 사용하는게 좋다.

에라토스테네스의 체 소수 
function solution(n) {
    var answer = 0;
    let primes = Array(n + 1).fill('true');

    for (let i = 2; i < n; i++) {
        for (let j = i*2; j <= n; j += i) {
            if (!primes[j]) continue;
            if (j % i == 0) {
                primes[j] = false;
            }
        }
    }

    for (let i = 2; i <= n; i++) {
        if (primes[i]) answer ++;
    }

    return answer;
}

solution(10);

12. 정규 표현식

https://wormwlrm.github.io/2020/07/19/Regular-Expressions-Tutorial.html

ex) 프로그래머스 신규아이디 추천

function solution(new_id) {
    const answer = new_id
        .toLowerCase() // 1
        .replace(/[^\w-_.]/g, '') // 2
        .replace(/\.+/g, '.') // 3
        .replace(/^\.|\.$/g, '') // 4
        .replace(/^$/, 'a') // 5
        .slice(0, 15).replace(/\.$/, ''); // 6
    const len = answer.length;
    return len > 2 ? answer : answer + answer.charAt(len - 1).repeat(3 - len);
}

13. Set

Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장하는 자료구조

MDN
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set

+)
Set 이용한 중복숫자 제거 방법
const dupArr = [1, 2, 3, 1, 2];
const set = new Set(dupArr);
const uniqueArr = [...set];

14 in 연산자

in 연산자를 이용해 객체 내의 값이 존재하는지 쉽게 판별 가능하다.
if( i in obj)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/in

profile
jathazp
이전 포스트

웹개발 플러스 2주차

0개의 댓글