자바스크립트
-
JavaScript:: 그래프의 최대 넓이 값 구하기알고리즘 2020. 7. 17. 13:18
[JavaScript] 그래프의 최대 넓이 값 구하기 문제 '인자'인 height는 숫자로 이루어진 배열입니다. 그래프로 생각한다면 y축의 값이고, 높이 값을 갖고 있습니다. 아래의 그래프라면 height 배열은 [1, 8, 6, 2, 5, 4, 8, 3, 7] 입니다. 저 그래프에 물을 담는다고 생각하고, 물을 담을 수 있는 가장 넓은 면적의 값을 반환해주세요. 가정 : 배열의 길이는 2이상입니다. 해결 과정 우리가 해결해야 할 문제는 아래와 같다. 각 배열의 요소를 돌아가며 다른 배열의 요소의 값과 함께 넓이를 구한다. 넓이를 구할 때 두 수를 비교하는데, 최소값을 통해 높이 값을 구한다. 두 요소의 인덱스 값을 비교해 가로값을 구한다. 모든 경우의 수로 담긴 넓이의 값을 비교하여 큰 ..
-
Javascript:: 가장 자주 등장한 숫자를 k개수만큼 return알고리즘 2020. 7. 16. 12:01
nums는 숫자로 이루어진 배열입니다. 가장 자주 등장한 숫자를 k 개수만큼 return 해주세요. nums = [1, 1, 1, 2, 2, 3] k = 2 return [1, 2] nums = [1] k = 1 return [1] 배열에서 같은 숫자, 글자 등 같은 값의 갯수를 서로 비교하고 싶다면 우리는 '객체'를 이용하면된다. 고로 for문을 돌려서 요소 하나하나를 객체의 key값과 비교하고, key값에 있다면 count 를 늘려주고, 없다면 객체 key에 넣어준다. 아래와 같이 코드를 작성한다. function topK(nums, k) { let obj = {}; for (let i=0; i < nums.length; i++) { (nums[i] in obj) ? obj[nums[i]] += 1 ..
-
string, Number 변환Study/JavaScript 2020. 6. 24. 16:22
JS 언어의 특징 중 하나가 데이터 타입을 신경쓰지 않는다는 것이다. 이것은 양날의 검이라고 할 수 있다. let a = '900'; let b = 350; let c = Math.random(); let d = '5' + 5; console.log(typeof a); // string console.log(typeof b); // number console.log(typeof c);; // number console.log(typeof a); //string 위와 같은 코드에서 우리는 당황할 것이다 string인 '5'와 숫자인 5가 서로 더해질 수 있따고??? 😵 자바스크립트에서는 가능하다. 자바스크립트는 스스로 타입을 변동시켜 연산을 하기 때문이다. 심지어 아래의 상황은 프로그램을 잘 못 짜면 날 ..
-
Array.from()Study/JavaScript 2020. 6. 13. 13:06
Array.from() 메서드는 유사 배열 객체(array-like object)나반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만든다. console.log(Array.from('foo')); // expected output: Array ["f", "o", "o"] console.log(Array.from([1, 2, 3], x => x + x)); // expected output: Array [2, 4, 6] 구문 Array.from(arrayLike[, mapFn[, thisArg]]) 매개변수 arrayLike : 배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체 mapFn : 배열의 모든 요소에 대해 호출할 맵핑 함수 thisArg : mapF..
-
forEach()와 map()의 차이점Study/JavaScript 2020. 6. 13. 11:58
공통점 forEach, map, reduce의 공통점은 "배열을 이용한다"는 점이다. 배열의 값을 조작해서 원하는 결과값을 도출하는데 의미가 있다. forEach()와 map()의 차이점 1. 새로운 배열을 반환하는 map() 다른 점을 알아보자. forEach()가 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행하는 것과 달리, map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환한다는 특징을 가지고 있다. 그리고, 그 함수는 1. currentValue (배열 원소의 값) 2. index (현재 요소의 인덱스) 3. array (현재 배열) 이 세 개의 인자를 가지고 호출된 다. 배열의 각 원소에 3을 곱하는 코드를 두 메서드의 특징에 맞게 짜..
-
원시값의 메서드Study/JavaScript 2020. 6. 10. 14:47
자바스크립트는 원시값(문자열, 숫자 등)을 마치 객체처럼 다룰 수 있게 해준다. 원시값에서도 객체에서처럼 메서드를 호출할 수 있다. 원시값의 메서드에 대해선 곡 학습할 예정인데, 그 전에 원시값은 객체가 아니라는 것을 상기하도록 하자. 원시값과 객체는 다음과 같은 차이점이 있다. 원시값: 원시형 값이다. 원시형의 종류는 문자(string), 숫자(number), bigint, boolean, symbol, null, undefined 형으로 총 7가지 이다. 객체 : 프로퍼티에 다양한 종류의 값을 저장할 수 있다. {name: "John", age: 30} 와 같이 대괄호{}를 사용해 만들 수 있다. 자바스크립트에는 여러 종류의 객체가 있는데 함수도 객체의 일종이다. 객체의 장점 중 하나는 함수를 프로퍼..
-
크롬으로 디버깅하기Study/JavaScript 2020. 6. 2. 12:23
크롬으로 디버깅하기 디버깅 (debugging) 디버깅은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미한다. 모던 브러우저와 호스트 환경 대부분은 개발자 도구 안에 UI 형태로 디버깅 툴을 구비해 놓는다. 디버깅 툴을 이용하면 디버깅이 훨씬 쉬워지고, 실행단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 있다. Sources 패널 Chrome을 사용해 예시 페이지를 엽니다. f12 (MAC : Cmd+Opt+I) 를 눌러 개발자 도구를 연다. sources 탭을 클릭해 sources 패널을 연다. sources 패널을 처음 열면 아래와 같은 화면이 보인다. 토글 버튼 을 누르면 navigator가 열리면서 현재 사이트와 관련된 파일들이 나열됩니다. 파일 목록에서 hello.js를 클릭해 아..
-
'use strict';Study/JavaScript 2020. 4. 14. 17:05
자바스크립트를 이용할 때는, 제일 윗부분에 'use strict'; 를 사용하는 것이 좋다. 타입스크립트를 사용할 때는 이 것을 쓰지 않아도 괜찮으나, 순수 자바스크립트를 사용할 때에는 이 것을 제일 윗부분에 쓰는 것이 좋다. why? 자바스크립트의 역사에서 보았듯이 , 브랜든이 자바스크립트를 만들 때 굉장히 빨리 만들어야 했고, 자바스크립트 언어는 굉장히 '유연한 언어'로 만들어졌다. 유연한 언어라는 것은 개발자가 굉장히 많은 실수를 할 수 있다는 말이다 . 자바스크립트에서는 선언되지 않은 변수의 값을 할당한다던지, 이런 말도 안되는 것들은 다른 언어를 공부하고 온 개발자들이 봤을 때, 약간 미친듯한 행동이다ㅋㅋㅋ 다행히도, ECMAScript5 에서부터, 'use strict'; 가 추가되었다. 그래..