JS에서 string을 number로 바꾸는 방법들

자바스크립트는 변수 타입을 지정하지 않고 사용한다. 하지만 === 연산자 등을 사용할 경우 변수의 타입을 맞춰줘야 하고, 0과 "0"은 서로 falsy, truthy 값이라서 구분 할 필요는 있다. 최근 읽은 기사에서 string을 number로 바꾸는 여러 방법들을 보고 이를 정리해 보았다. 1. Number() const quantity = "12"; console.log(Number(quantity)); // 12 무난하고 자주 사용되는 용법이다. 직관적으로 나타내어지고, 정수와 소수 모두 사용가능하다. 2. parseInt() const quantity = "12.5"; console.log(parseInt(quantity)); // 12 parseInt는 주로 소수의 버림이나 n진법 만들기 용으..

Closure &Scope chain

스코프 체인 자바스크립트는 스코프라는 개념이 있다. 스코프는 유효범위를 뜻하고, 크게는 함수 레벨 스코프와 블록 레벨 스코프가 있다. var로 선언한 변수는 함수 레벨 스코프를 따르는데, var은 옛 것이므로 생략하면 let과 const는 블록 레벨 스코프를 따른다. 이 때 블록은 {}를 뜻한다. 따라서 자바스크립트는 {}안에서만 같은 레벨인 것이다. 하지만 같은 스코프 안의 변수만을 사용할 수는 없다. 이 때 필요한 것이 스코프 체인이다. 스코프 체인은 하위 스코프가 상위 스코프를 참조하는 것을 의미한다. const a = 10; { console.log(a); // 10 } 콘솔이 찍히는 곳은 글로벌 안의 하위 스코프지만, 해당 스코프에 a가 선언되어 있지 않으므로 상위 스코프에서 a를 가져온다. c..

React Router Dom V6 : nested routes

Reac Router Dom가 V6로 업그레이드 되면서 중첩 라우팅 기능이 강화되었다. 공식 문서에서는 nested routes라고 설명하는 중첩 라우팅은 동일한 레이아웃을 공유하는 여러 페이지에 한번의 레이아웃 호출로 간단하게 레이아웃을 공유하게 해준다. 위 홈페이지는 패스트캠퍼스에서 미니프로젝트로 진행한 해커뉴스 페이지이다. 3개의 페이지를 보면 헤더와 네비게이션을 동일하게 가져가는 것을 볼 수 있다. 만약 중첩라우팅을 사용하지 않는다면 위 3개의 라우트에 모두 각각 헤더와 네비게이션을 따로 설정해줘야 할 것이다. 예시로 들어보면 아래와 같은 구조가 나올 것이다. // simplify Router 구조를 보면 Route들이 모두 안에 들어간 모습임을 볼 수 있다. 해당라우트가 상위 라우트이고 그 안..

This

자바스크립트에는 this라는 키워드가 존재한다. 또한 이 this 키워드가 다른 언어와는 다르게 동작을 해서 잘 알아두어야 한다. node.js와 브라우저의 js는 서로 다른 의미의 this를 가지며, 여기선 브라우저의 this를 알아볼 것이다. 가장 포괄적인 설명은 this는 호출한 객체를 의미한다는 것이다. 1. 전역 객체 브라우저에서 window객체는 브라우저에서 시행되는 가장 큰 객체로 존재한다. 따라서 달리 참고할 대상이 없는 this는 모두 window를 의미한다. // 전역에서 사용되는 this는 전역(global)과 같다. var a = 27; console.log(this.a); // OUTPUT: 27 function sum() { console.log(this.a + this.b + ..

프로그래머스 : 거리두기 확인하기-javascript

https://programmers.co.kr/learn/courses/30/lessons/81302 코딩테스트 연습 - 거리두기 확인하기 [["POOOP", "OXXOX", "OPXPX", "OOXOX", "POXXP"], ["POOPX", "OXPXP", "PXXXO", "OXXXO", "OOOPP"], ["PXOPX", "OXOXP", "OXPOX", "OXXOP", "PXPOX"], ["OOOXX", "XOOOX", "OOOXX", "OXOOX", "OOOOO"], ["PXPXP", "XPXPX", "PXPXP", "XPXPX", "PXPXP"]] [1, 0, 1, 1, 1] programmers.co.kr 문제 설명 더보기 문제 설명 개발자를 희망하는 죠르디가 카카오에 면접을 보러 왔습니다. 코..

LeetCode : 6 - javascript

https://leetcode.com/problems/zigzag-conversion/ 6. Zigzag Conversion The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like this: (you may want to display this pattern in a fixed font for better legibility) P A H N A P L S I I G Y I R And then read line by line: "PAHNAPLSIIGYIR" Write the code that will take a string and make this conversion given a number of ..

프로그래머스 : 다리를 지나는 트럭-javascript

https://programmers.co.kr/learn/courses/30/lessons/42583 문제 설명 트럭 여러 대가 강을 가로지르는 일차선 다리를 정해진 순으로 건너려 합니다. 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 알아내야 합니다. 다리에는 트럭이 최대 bridge_length대 올라갈 수 있으며, 다리는 weight 이하까지의 무게를 견딜 수 있습니다. 단, 다리에 완전히 오르지 않은 트럭의 무게는 무시합니다. 예를 들어, 트럭 2대가 올라갈 수 있고 무게를 10kg까지 견디는 다리가 있습니다. 무게가 [7, 4, 5, 6]kg인 트럭이 순서대로 최단 시간 안에 다리를 건너려면 다음과 같이 건너야 합니다. 경과 시간 다리를 지난 트럭 다리를 건너는 트럭 대기 트럭 0 [] [..

프로그래머스 : H-index-javascript

https://programmers.co.kr/learn/courses/30/lessons/42747 코딩테스트 연습 - H-Index H-Index는 과학자의 생산성과 영향력을 나타내는 지표입니다. 어느 과학자의 H-Index를 나타내는 값인 h를 구하려고 합니다. 위키백과1에 따르면, H-Index는 다음과 같이 구합니다. 어떤 과학자가 발표 programmers.co.kr 문제 설명 H-Index는 과학자의 생산성과 영향력을 나타내는 지표입니다. 어느 과학자의 H-Index를 나타내는 값인 h를 구하려고 합니다. 위키백과1에 따르면, H-Index는 다음과 같이 구합니다. 어떤 과학자가 발표한 논문 n편 중, h번 이상 인용된 논문이 h편 이상이고 나머지 논문이 h번 이하 인용되었다면 h의 최댓값이..