Javascript(58)
-
[JS] 전개 연산자 Spread Operator
전개 연산자로 할당하면 2차원 형태가 되지 않는다. 배열의 경우 const arr1 = [1, 2, 3]; const arr2 = [4, 5]; console.log(arr1.push(...arr2)) // [1, 2, 3, 4, 5] 객체의 경우 const obj1 = {a: 'A', b: 'B'}; const obj2 = {c: 'C', d: 'D'} const objWrap = {...obj1, ...obj2}; console.log(objWrap); // { a: 'A', b: 'B', c: 'C', d: 'D' } 기존 배열을 보존해야 할 때 유용 const arr1 = [1, 2, 3]; const arr2 = arr1.reverse(); console.log(arr1); // [3, 2, 1..
2022.01.25 -
[JS] Math
Math.ceil : (무조건) 반올림 let num1 = 5.1; let num2 = 5.7; console.log(Math.ceil(num1)) // 6 console.log(Math.ceil(num2)) // 6 Math.floor: (무조건) 내림 let num1 = 5.1; let num2 = 5.7; console.log(Math.floor(num1)) // 5 console.log(Math.floor(num2)) // 5 Math.round: 반올림 let num1 = 5.1; let num2 = 5.7; console.log(Math.round(num1)) // 5 console.log(Math.round(num2)) // 6 toFixed() : 소수점까지 반환 let num1 = 5.1..
2022.01.24 -
[JS] 객체 메소드
1. Object.assign : 객체 복제 const user = { name: 'min', age: 30 } const cloneUser = Object.assign({}, user) // { ...user } 같다 cloneUser.name = 'jin' console.log(user) // { name: 'min', age: 30 } console.log(cloneUser) // { name: 'jin', age: 30 } assign({}
2022.01.24 -
[문제] ★빈도수 / 객체 가장 큰 수 찾기
보호되어 있는 글입니다.
2022.01.22 -
[JS] reset 버튼
리셋버튼을 누르면 선택으로 바뀌게 하기 선택 바나나 딸기 사과 리셋 const select = document.querySelector('select'); const button = document.querySelector('button'); select.addEventListener('change', function () { const value = select.options[select.selectedIndex].value; console.log(value); }); button.addEventListener('click', function () { select.options[0].selected = true; }); 버튼을 클릭했을 때 select.options[0]는 선택 태그이고 select.o..
2022.01.20 -
예산
문제 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다. 물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 1,000원을 신청한 부서에는 정확히 1,000원을 지원해야 하며, 1,000원보다 적은 금액을 지원해 줄 수는 없습니다. 부서별로 신청한 금액이 들어있는 배열 d와 예산 budget이 매개변수로 주어질 때, 최대 몇 개의 부서에 물품을 지원할 수 있는지 return 하도록 solution 함수를 완성해주세요. 제한사항 d는 부서별로 신청한 금액이..
2022.01.17 -
완주하지 못한 선수
수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. function solution(participant, completion) { participant.sort(); completion.sort(); for (let i = 0; i < participant.length; i++) { if (participant[i] !== completion[i]) { return participant[i] } } } console.log..
2022.01.17 -
[JS] 데이터 속성 (data-xxx)
1. 데이터 속성 HTML5부터는 데이터 속성이라는 개념이 생겼다. 데이터 속성은 HTML 요소의 'data-'로 시작하는 속성이다. 이러한 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위한 목적. 데이터 속성은 'data-' 로 시작해야 하며, 브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다. ex ) input 태그에는 data-value 라는 데이터 속성을 내가 만들었다. 속성명은 data-value이지만 HTML 표준 속성인 value 속성과는 상관이 없다. 내가 임의로 만든 속성이므로! 2. 장점 이전과 같이 hidden으로 태그를 숨겨두고 데이터를 저장할 필요가 없다. 따라서 HTML ..
2022.01.10 -
[JS] 동작원리 (Stack, Queue, event loop)
Memory Heap: 메모리 할당이 일어나는 곳 Call stack: 코드 실행에 따라 스택 프레임이 쌓이는 곳 Web APIs : DOM, AJAX, Timer 등 브라우저에서 제공하는 api Callback queue : 콜백 함수들이 대기하는 곳 Event Loop : call stack이 비워질 때마다 callback queue에 대기 중인 콜백함수가 있다면, callback 함수를 call stack에 보내줌. 자바스크립트는 싱글 스레드(single-threaded) 언어이기 때문에, 한 번에 하나의 작업만 처리할 수 있습니다. 하지만 이벤트 루프(event loop)라는 메커니즘을 통해 비동기(asynchronous) 처리가 가능해집니다. 이벤트 루프는 자바스크립트 엔진이 비동기 작업을 처리..
2022.01.04 -
[JS] fill
1. fill() 배열의 start index부터 end index 전까지(end index는 미포함) value값으로 채워주는 함수 파라미터 value 배열에 채울 값을 지정합니다. start value 값을 채울 배열의 시작 index입니다. 입력하지 않으면 기본값은 0입니다. end value 값을 채울 배열의 종료 index입니다. 입력하지 않으면 기본값은 배열의 길이(arr.length)입니다. 리턴값 지정한 값으로 채워진 배열을 리턴합니다. const arr1 = [1, 1, 1, 1]; console.log(arr1.fill(2)); // [2, 2, 2, 2] const arr2 = [1, 1, 1, 1]; console.log(arr2.fill(2, 1)); // [ 1, 2, 2, 2 ..
2022.01.03 -
zigzag
function zigZag(){ let num = 0; for (let i = 1; i
2021.12.21 -
[JS] event.preventDefault()
1. event.preventDefault 기본(default)를 막다(prevent)라는 단어에서 유추 할수 있듯이 html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드입니다. 예를 들어 앵커태그 태그는 각각 페이지 이동이나 form 데이터 전송 등의 기본 이벤트들이 있는데 preventDefault() 메서드를 통해 해당 이벤트 발생을 막을 수 있습니다. 이벤트 흐름의 어떤 단계에서라도 preventDefault()를 호출하면 이벤트를 취소합니다. 즉, 이벤트에 대한 구현체의 기본 동작을 실행하지 않습니다. Event.cancelable을 사용해서 이벤트의 취소 가능 여부를 알아낼 수 있습니다. 취소 불가능한 이벤트에 대해 preventDefault()를 호출해도 아무 효과가 없습니다..
2021.12.16 -
[JS] Filter()
1.정의 주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 true를 반환하는 요소를 기준으로 신규 배열을 만들어 반환한다. 콜백함수의 인자는 순서대로 값(value), 인덱스(index), 원 배열(array)이다. let numbers = [1, 4, 9] let parameters = numbers.filter((num, index, arr) => {console.log(num, index, arr)}) // 결과 1 0 [ 1, 4, 9 ] 4 1 [ 1, 4, 9 ] 9 2 [ 1, 4, 9 ] 2. 사용법 const person = [ { name: 'a', money: 500000 }, { name: 'b', money: 400000 }, { name: 'c', money:..
2021.12.15 -
[JS] 마우스 이벤트 종류
1. click 사용자해 해당 element를 클릭했을 때(버튼을 눌렀다가 떼었을 때) 발생 합니다. 2. mousedown 사용자가 해당 element에서 마우스 버튼을 눌렀을 때 발생합니다. 3. mouseup 사용자가 해당 element에서 눌렀던 마우스 버튼을 떼었을 때 발생합니다. 4. dblclick 사용자가 해당 element에서 마우스 버튼을 더블 클릭했을 때 발생합니다. 5. mousemove 사용자가 해당 element에서 마우스를 움직였을 때 발생합니다. 6. mouseover 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생합니다. 7. mouseout 사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다. 8. mouseenter 사용자가 ..
2021.12.10 -
[JS] 이벤트 버블링 / 캡쳐링 / 위임
1.이벤트와 이벤트 핸들링 자바 스크립트의 대부분의 코드는 이벤트(event)에 의해 동작된다. 이벤트란 클릭이라던가 키 입력 같이 사용자가 행하는 모든 동작을 의미하는데, 이러한 이벤트가 발생했을 때 이에 맞는 상황을 지정해주고 처리하는 것을 이벤트 핸들링이라 한다. element.addEventListener(event, function, useCapture) 위처럼 addEventListener()를 사용할 때, 세 번째 인자인 useCapture와 관련된 개념이 바로 이벤트 버블링(Bubbling)과 캡쳐링(Capturing)이다. default 값은 false (버블링)이며, true로 변경 시 캡쳐링을 통해 이벤트를 전파한다. 2. 이벤트 버블링 이벤트 버블링은 특정 화면 요소에서 이벤트가 발..
2021.11.30