Programing/Javascript

[JS] Array vs. Set

백준 1920번 문제를 해결하면서 Set과 Array는 속도 차이가 나는지 차이가 난다면 얼마나 나는지, 특정 상황에서 어떤 구조가 더 빠른지 찾아보았다. Set 객체는 Map 객체와 함께 자바스크립트 ES6 버전에서 생긴 기능이다. 속도에 관한 내용을 찾던 도중 Set이 나왔을 당시 성능에 대한 내용과 현재는 어떤 지 알아볼 수 있는 글을 찾았다. 1. Set,Map 등이 처음 나왔을 당시 스택오버플로우에서 첫 요소의 추가, 변경, 삭제에 대해 테스트 케이스를 만들어 수행한 결과를 찾았는데, 일반적으로 Array가 빠르지만 입력받는 숫자가 아주 크다면 delete 메서드를 사용해 요소를 삭제하는 경우에 한하여 Set 이 압도적으로 빠르다는 내용이었다. 하지만 속도를 비교하기에 테스트 케이스가 적절한가에..

[JS] Set & Map

Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. 배열과 유사하지만 다음과 같은 차이가 있다. 중복된 값을 포함할 수 없다. 요소 순서에 의미가 없다. 따라서 인덱스로 요소에 접근할 수 없다. Set 객체의 생성 let set = new Set(); console.log(set) //Set(0) {} 이터러블을 인수로 전달받아 Set 객체를 생성한다. Set은 중복된 값을 포함할 수 없으므로, 중복된 값은 무시된다. let set = new Set('Hello'); console.log(set) //Set(4){ 'H', 'e', 'l', 'o' } 요소 개수 확인 let set = new Set('Hello'); console.log(set.size)// 4 let set1 = new Set..

[JS] 정규 표현식 RegExp

얼마 전까지만 해도 for문으로 문자열을 탐색, 교체했는데 정규표현식을 사용하니 써야 할 코드가 많이 줄어서 좋다. 기호들이 들어가다 보니 가독성은 별로긴 하지만, 여러모로 사용할 것 같으니 미리 정리해둔다. 정규 표현식 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어. 문자열을 대상으로 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 제공한다. 반복문과 조건문 없이 패턴을 정의하고 테스트할 수 있다. 주석이나 공백을 허용하지 않고 여러 가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다. 정규 표현식의 생성 슬래쉬( '/' ) 를 이용해 열고 닫고, 플래그를 이용해 검색 방식을 설정한다. let text = "Today is wednesday"; l..

[JS] 구조 분해 할당

알고리즘 문제를 푸는데 구조 분해 할당을 잘 사용하면 코드를 많이 줄일 수 있었다. 구조 분해 할당에 대해 잘 정리해두고 문제에 활용하려 한다. 구조 분해 할당(destructuring assignment) 구조화된 배열과 같은 이터러블 또는 객체의 구조를 파괴하려 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 객체에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. 1. 배열 구조 분해 할당 배열 구조 분해 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스이다. 즉 순서가 중요하다. 이때 변수의 개수와 이러터블의 요소 개수가 반드시 일치할 필요는 없다. const [x,y] =[1,2]; console.log(x,y)//1 2 const [x,y] =[1];..

<JS> 자바스트립트로 HTML수정

자바스크립트에서 태그, id, class 등을 생성하거나 수정할 수 있다. 이를 위해 DOM과 메서드, 프로퍼티의 범위에 대해 정확하게 이해해야 한다. 오늘 연습해 볼 부분은 사실 CSS에서 충분히 작성 가능함은 물론, CSS로 작성하는 편이 일반적으로 깔끔하나 DOM과 이벤트리스너를 연습해본다는 개념으로 접해본다. 1. HTML 온전히 자바스크립트로 문서를 수정할 것이기 때문에, 추후 자바스크립트 연결을 위한 태그 외에는 비워둔다. 2. Javascript let h2 = document.createElement("h2"); // 1. HTML에 없는 태그를 생성 h2.innerHTML = "Hello!"; // 2. 생성한 태그에 넣을 내용 기입 h2.style.color = "white"; docu..

<JS> for문 탐색

for문을 이용해 조건에 맞는 문자열 혹은 배열을 만든다. 1. 입력된 단어에 포함된 'A'를 모두 '#'으로 바꾸기 let str="BANANA"; function solution(s) { let answer = ""; for(let x of s) { if(x==='A') answer+='#' else answer +=x; } return answer; } console.log(solution(str)); // B#N#N# let str="BANANA"; function solution(s) { let answer = s; answer=answer.replace(/A/g, '#'); // g는 전역을 뜻함. return answer; } console.log(solution(str)); //B#N#N#..

<JS> 최솟값, 최댓값

반복문을 이용한 방법과, 내장함수를 이용한 방법을 알아보았다 1. 반복문 arr = [5,7,1,3,2,9,11]; function solution(arr) { let answer, min=Number.MAX_SAFE_INTEGER; for(let i=0;i

[JS] 객체

객체에 대한 이해 1. 왜 객체를 쓰는지 const userName = "poylib"; const userAge = "26"; const userCheck = true; const userAddress = "changwon"; // 'user'가 반복되는게 보기 불-편하다 const user = ["poylib", 26, true, "changwon"]; // array로 정렬하면 간단해지지만 userName이 "poylib"인지 "changwon"인지 알기어렵다 // 객체로 해결 ! const userObj = { name : "poylib", age : 26, check : true, address : "changwon" } // 읽기쉬워지고, 원하는 값을 불러오기 편하다 // ex) console..