본문 바로가기
반응형

JavaScript34

자바스크립트 - 디폴트 매개변수 (Default Parameters) 자바스크립트 전체 링크 자바스크립트에서도 다른 언어와 마찬가지로 기본값 매개변수를 사용할 수 있다. 아래와 같이 b와 c를 각각 0과 1로 지정하였다. const showDefaultParameters = (a, b = 0, c = 1) => { console.log({a, b, c}); } showDefaultParameters(1, 2, 3); // 1, 2, 3 showDefaultParameters(1, 2); // 1, 2, 1 showDefaultParameters(1, undefined, 2); // 1, 0, 2 showDefaultParameters(1, null); // 1, null, 1 중간에 있는 매개변수를 기본값으로 넘기기 위해 undefined를 이용할 수 있다. 아래의 경우 .. 2023. 6. 27.
자바스크립트 - 로컬 스토리지 사용 방법과 세션 스토리지 비교 (Local vs Session Storage) 자바스크립트 전체 링크 참고 - 오브젝트 순회하기 - 로컬 스토리지 유효기간 설정하기 - 모든 페이지의 로컬 스토리지 변경 감지하기 (useLocalStorage) 로컬 스토리지를 이용하면 간단히 데이터를 저장할 수 있다. setItem(key, value)로 값을 저장하고, getItem(key)로 값을 읽는다. let [key1, value1] = ["blood", "strawberry"]; localStorage.setItem(key1, value1); let item1 = localStorage.getItem(key1); console.log(item1); // strawberry; 로컬 스토리지에 배열이나 오브젝트를 저장하면, 그대로 문자열로 저장된다. let key2 = "java"; let .. 2023. 6. 26.
자바스크립트 - 오브젝트 순회하기 (Iterate JavaScript Object) 자바스크립트 전체 링크 다음과 같은 객체가 있다. let info = { id: 1, name: "blood", type: "strawberry", address: { city: "seoul", town: "gangnam", road: 2, }, }; 자바스크립트 객체(오브젝트)는 순서가 없기 때문에 배열처럼 순회할 수 없다. Object의 메서드를 이용해서 순회하는 것은 가능하다. Object.keys() 메서드를 이용하면 오브젝트의 key만 따로 배열로 모을 수 있다. let info = { id: 1, name: "blood", type: "strawberry", address: { city: "seoul", town: "gangnam", road: 2, }, }; let key = Object.k.. 2023. 6. 26.
자바스크립트 - 배열에 포함된 원소 판단하기 자바스크립트 전체 링크 문자열에서 특정 문자열을 포함하는지는 indexOf로 판단할 수 있다. let str = "hello"; console.log(str.indexOf("ll")); // 2 console.log(str.indexOf("xx")); // -1 문자열이 포함되지 않는 경우, indexOf가 -1을 리턴하기 때문에 조건문 판단에서 실수하기 쉽다. 아래의 코드는 "ll" 을 포함하면 if문을 실행하는 것 같지만, "ll"이 없더라도 -1을 리턴하기 때문에 코드가 실행된다. if(str.indexOf("ll")) {...} 따라서 위와 같은 상황을 피하고 싶다면 includes를 사용하여 true / false를 반환하는 것이 좋다. let str = "hello"; console.log(s.. 2023. 6. 25.
자바스크립트 - 배열 정렬하기 (Sorting) 자바스크립트 전체 링크 아래 배열을 선언해서 정렬해보자. 배열을 정렬해도 숫자 크기 순으로 정렬되지 않는다. 문자열 "-"가 앞으로 오고, 그 외 문자가 "1", "2", ..., "9"로 정렬되고 있다. let arr = [5, -1, 3, -7, 10, 2, 4, 20]; arr.sort(); console.log(arr); // -1, -7, 10, 2, 20, 3, 4, 5 숫자를 정렬하고 싶다면 sort에 compare option을 추가하면 된다. arr.sort((a, b) => a - b); //-7, -1, 2, 3, 4, 5, 10, 20; console.log(arr); arr.sort((a, b) => b - a); //20, 10, 5, 4, 3, 2, -1, -7; //or ar.. 2023. 6. 24.
자바스크립트 - 펼침 연산자로 문자열을 배열로 바꿔 수정하기 (Change String using Spread Operator) 자바스크립트 전체 링크 다음 코드를 실행시켜보자. let a = "hello"; a[2] = "x"; console.log(a); // hello 문자열 a에서 원하는 위치를 바꾸고 싶어도 바뀌지 않는다. 자바스크립트의 문자열은 원시 타입이기 때문에 변경이 불가능하기 때문이다. 위와 같은 경우 쉽게 변경하는 방법은 다음과 같다. let a = "hello"; let b = [...a]; b[2] = "x"; a = b.join(""); console.log(a); // hexlo 펼침 연산자(spread operator)를 이용해서 문자열 각각을 배열로 만든다. a의 일부를 수정할 수는 없지만, a를 다시 할당하는 것은 가능하다. 따라서 원하는 배열을 수정하고 다시 join하면 된다. 2023. 6. 22.
자바스크립트 - 텍스트를 클립보드에 복사하기 (Copy to Clipboard in Javascript) 자바스크립트 전체 링크 자바스크립트 파일 다운로드 코드와 유사하다. textarea를 만든 후, textarea의 value에 text를 입력한다. 그리고 textarea를 선택(select)한 후, 복사한다. 이후 불필요한 textarea를 다시 제거한다. const copyToClipBoard = (text) => { let textarea = document.createElement("textarea"); document.body.appendChild(textarea); textarea.value = text; textarea.select(); document.execCommand("copy"); document.body.removeChild(textarea); } 하지만 execCommand는 더.. 2023. 6. 19.
자바스크립트 - 깊은 복사 (Deep Copy) 자바스크립트 전체 링크 자바스크립트에서 object를 "=" 로 받아오면 참조만 한다. 아래의 코드에서 a의 color를 변경하였는데, b도 변경됨을 알 수 있다. 깊은 복사의 가장 간단한 방법은 object를 문자열로 바꾸고, 그 문자열을 다시 object로 바꾸는 것이다. JSON.stringify에 a를 넘겨주면 text로 된 object를 return한다. JSON.parse를 이용하면 문자열을 object로 변경해준다. JSON.parse는 object 형태의 문자열만 parsing한다. 따라서 parsing이 불가능한 경우는 SyntaxError를 뱉는다. 이제 a의 color를 blue로 변경해도, b는 변경되지 않음을 알 수 있다. (deep copy) 함수로 만들면 아래와 같이 만들 수 .. 2022. 5. 21.
자바스크립트 - 파일 다운로드 (JavaScript File Download) 자바스크립트 전체 링크 먼저 코드를 보자. const downLoad = () => { let contents = "test"; let fileDown = "data:text;charset=utf-8," + contents; let encodedUri = encodeURI(fileDown); let link = document.createElement("a"); link.setAttribute("href", encodedUri); link.setAttribute("download", "numbers.txt"); document.body.appendChild(link); link.click(); document.body.removeChild(link); } contents에 txt에 담을 내용을 입력한다... 2022. 5. 21.
반응형