FRONTEND/JavaScript

[JS] FormData() 생성자에 데이터 추가하는 법

1. 사용 목적 FormData() 생성자 생성으로 form의 데이터들을 비동기처리를 위한 ajax에 넘겨주기 위함 // 생성 let formData = new FormData(form); //id가 form인 form태그 존재시 -> new FormData(document.querySelector('#form') 기존 HTML에서 form 태그가 존재한다면 위처럼 매개변수로 넣어준다. 2. 데이터 추가 기본적으로 입력한 데이터는 '문자열'로 추가됨. set() 과 append()를 사용해서 데이터를 추가한다. //데이터 추가 let formData = new FormData() formData.append('age', 18); // 같은 key값으로 데이터 추가 가능. formData.append('a..

[JS] Map()의 메서드 종류

1. new Map() 맵 생성 // Map() 생성 let map = new Map(); //데이터 저장 map.set(key, value); //데이터 값 호출 - key에 해당하는 값이 없으면 undefined 반환 map.get(key); //데이터 유무검사 - key가 존재하면 true, 없으면 false map.has(key); //데이터 삭제 - key에 해당하는 값 삭제 map.delete(key); //데이터 모두 삭제 map.clear(); //맵의 요소개수 반환 map.size 2.  Map()의 특징 맵은 키가 있는 데이터를 저장한다는 점에서 객체와 유사하지만, 객체가 못하는 키값으로 객체를 쓸 수 있다. //Map()의 특징 : 객체를 키로 쓸 수 있다. const obj = {..

[JS] arr.forEach() 와 arr.map()의 차이점!

1. 공통점: 호출한 배열을 순환하면서 각 요소마다 콜백함수를 호출한다. //arr.forEach() const arr = [1, 2, 4]; const newArr = arr.forEach(x=> x*2); console.log(newArr) // undefined; //arr.map() const arr = [1, 2, 4]; const newArr = arr.map(x=> x*2); console.log(newArr) // [2, 4, 8] 2. 차이점: forEach() - return 값 = undefined; (단순 반복 == for문) map() - return 값 = 콜백 함수를 수행한 새로운 배열

[JS] 버블정렬 알고리즘 오름차순, 내림차순

1. 오름차순 정렬 //오름차순 const arr = [3, 5, 2, 6]; function bubble(arr) { for(let i=0; i

[JS] 문자열을 배열로 바꾸고 공백 제거하기 (+배열 공백제거)

1. 문자열 → 배열로 변환 · str.split() 지정한 구분자로 문자열을 나눈 후 배열로 반환한다. //String.split() 메서드 const inputString = prompt('숫자를 입력해주세요'); //input: 12345(String) inputString.split('') // ['1','2','3','4','5'] inputString.split(' ') // ['12345'] 공백이없으므로 inputString.split() // ['12345'] 구분자없을시 문자열그대로 배열반환 · spread operator 전개 연산자로 문자열을 배열로 반환한다. //spread operator 전개연산자 const inputNum = prompt('입력해주세요') //input: 12..

[JS] 요소.getBoundingClientRect() 메서드 속성

//엘리먼트.getBoundingClientRect() 예시 const formBottomPadding = document.querySelector('.chat-form').getBoundingClientRect().height; chatWrap.style.paddingBottom = `${formBottomPadding}px`; getBoundingClientRect()메서드는 요소의 width, height 뿐만아니라 top, left의 대한 상대적인 위치 까지도 제공한다. 위 예시는 chat-form이라는 클래스를 가진 요소의 height값을 받아서 다른 요소의 패딩값으로 동적추가하는 과정이다.