본문 바로가기

Javascript

간결한 자바스크립트 코드를 만드는 9가지 최신 방법

1 2021. 7. 29. 1. 함수 파라미터에 기본값을 표시하기 함수를 정의할 때 파라메터의 기본값을 명시하는 습관을 들입니다. 파라미터 기본값은 파라미터가 넘어왔는지를 확인하는 조건 체크를 하지 않아도 되기 때문에 더 간결하고 짧은 코드를 작성하는데 도움이 됩니다. function myFunc1(param1){ console.log(`param1=${param1}`); } function myFunc2(param1 = '기본값'){ console.log(`param1=${param1}`); } myFunc1(); // undefined myFunc2(); // '기본값' 2. 다중 비교 조건을 한번에 비교하기 여러 개의 비교 조건을 만족하는 경우가 최소 1개 이상 있는지를 확인하는 다중 비교를 할 때, 배열의 some() 메서..

배열 요소에 접근하는 새로운 자바스크립트 메서드 Array.at()

0 2021. 7. 21. 자바스크립트에서 배열 요소의 값을 얻는 방법은 기본적으로 Array[index] 입니다. 다른 언어에서도 배열 요소에 접근하는 방법은 Array[index] 로 대동소이 합니다. 배열의 첫 번째 요소는 Array[0]으로 접근하고, 배열의 마지막 요소는 Array[Array.length-1]로 접근할 수 있습니다. 배열 요소에 접근하기 위해 사용할 수 있는 인덱스는 0 ~ Array.length-1 까지입니다. 이외의 배열 요소 접근 인덱스는 undefined를 반환합니다. Array[-1] 과 같은 접근 방식은 사용할 수 없습니다. Array.at()을 이용한 배열 요소 접근 Array.at(index) 메서드를 사용해 배열 요소에 접근하면 사용할 수 있는 인덱스의 제약이 다소 개선됩니다. 물론 메서드..

console 객체를 활용한 자바스크립트 디버깅. console.log() 만 있는게 아니다.

0 2021. 7. 17. console 객체는 자바스크립트가 웹 브라우저의 디버깅 콘솔에 접근할 수 있도록 하는 객체입니다. 콘솔(console) 객체를 이용하면 자바스크립트 코드의 객체, 변수 값을 콘솔 창에 출력하거나, 필요한 메시지를 표시할 수 있습니다. 콘솔 객체는 여러 가지 메서드를 제공하며, 콘솔 창에 다양한 형태로 메시지를 출력할 수 있습니다. 콘솔 객체의 메서드를 하나씩 알아보도록 하겠습니다. > console.log() 웹 브라우저 개발자도구의 콘솔 창에 메시지를 출력합니다. 로그(log) 메서드 이름 그대로 로그를 출력하는 용도로 사용되며, 로그 메시지 출력을 위한 log() 메서드 말고도 메시지를 출력하는 다양한 용도의 메서드가 있지만 거의 만능처럼 사용됩니다. console.log('콘솔 메시지 출력!');..

자바스크립트 ES2021(ES12)에서 추가된 5가지 주요 기능들

0 2021. 6. 11. 1. String.prototype.replaceAll() 메서드 그동안 자바스크립트 개발자들이 주야장천 요청해왔던 기능이었는데 이제야 추가되었습니다. 일치하는 모든 문자열을 변경합니다. 자바스크립트 내장 문자열 변경 메서드인 "String.prototype.replace()"는 처음 나오는 일치하는 문자열만 바꾸는 것이기 때문에 여러 가지로 불편했습니다. 대부분 정규표현식으로 프로토타입 메서드를 만들어 써왔기 때문에 사실 없다는걸 알아도 나름대로는 다 개선을 해서 써왔습니다. 내장 메서드로 지원을 하므로 더 이상 추가로 구현을 해서 사용하지 않아도 됩니다. 대부분 최신 웹 브라우저에서 이미 지원하고 있습니다. console.log("문자열에서 여러번 나오는 문자열을 한꺼번에 변경할 수 있습니다.".re..

자바스크립트 배열의 요소(들)를 삭제하기

2 2021. 6. 9. 초보자에게는 다소 어려운 내용입니다. 기초 내용을 먼저 보고 읽어보면 도움이 될수 있습니다. > 배열 요소의 추가 > 배열 요소의 추가, 변경, 삭제하기 Splice() 메서드와 delete를 이용한 기초 삭제 방법 배열의 요소를 삭제하는 가장 기본적인 방법입니다. 배열의 위치 인덱스를 사용해 배열 아이템을 삭제합니다. 배열 아이템을 삭제하는 것은 동일하지만 "splice()"와 "delete"는 큰 차이점이 있습니다. "splice()"는 배열 아이템을 삭제하면서 배열 길이가 줄어듭니다. 배열 아이템이 완전히 삭제됩니다. "delete"는 배열 아이템을 삭제하지만, 배열이 차지하는 자리는 그대로 유지됩니다. 빈 배열 아이템이 유지되며, 배열 길이도 변하지 않습니다. 삭제 속도가 가장 빠른 방법이기 때문..

문자열 "true"/"false" 와 불리언을 비교하기

0 2021. 6. 8. 문자열로 표현한 불리언 값인 "true"는 실제 자바스크립트의 불리언인 true와는 다릅니다. 자바스크립트의 비교연산자로 비교한 "true" == true, "true" === true 는 false가 됩니다. 따라서 문자열을 불리언으로 변경하거나, 불리언을 문자열로 변경해서 비교를 해야합니다. 특히 비동기로 결과를 받아서 그 값이 참인지 거짓인지를 판단해야 할 때 반환된 결과가 문자열이기 때문에 변환하는 과정을 꼭 거쳐야 합니다. 여러 종류의 값이 가능한 문자열 보다는 true/false 2가지만 있는 불리언이 비교가 쉽고 명확하기 때문에 문자열을 불리언 타입으로 변환해서 비교를 하는 방법을 사용하는 것이 일반적입니다. 가장 기초적인 "True", "true", " true " 와 같은 불리언 문자열 ..

자바스크립트로 웹페이지 이동을 제어하는 방법

0 2021. 6. 8. 자바스크립트에서 접근할 수 있는 웹 페이지의 URL과 관련된 객체는 "window.location" 객체입니다. 자바스크립트의 URL 관련 제어, 또는 페이지 이동은 모두 이 객체에의 메서드, 또는 속성을 통해 이루어집니다. 메서드로 페이지 제어 "window.location" 객체에는 페이지 이동과 관련된 메서드가 3개 있습니다. "window"는 전역 객체이므로 "location"만 사용해서 "location.assign()"과 같이 표현할 수도 있습니다. assign() -- 새 페이지로 이동. reload() -- 현재 페이지 다시 로딩. replace() -- 현재 페이지를 대체해서 새 페이지 로딩. 세가지 메서드 중 "assign()" 메서드만 히스토리가 남습니다. 속성으로 페이지 제어 페이지..

자바스크립트 문자열에 검색어가 있는지 찾기

0 2021. 6. 8. 자바스크립트에는 문자열에서 검색어 문자열이 있는 첫 번째 인덱스 위치를 반환해주는 메서드가 있습니다. let string = '아주 여러 해 전 바닷가 어느 왕국에 당신이 아는지도 모를 한 소녀가 살았지.', search = '왕국'; console.log(string.indexOf(search, 0)); 문자열 객체의 메서드인 indexOf() 메서드는 첫 번째 파라미터로 검색 문자열을, 두 번째 파라미터로 시작 위치 인덱스를 넘기며, 검색 결과 찾는 문자열이 있으면 문자열이 처음 나오는 위치의 시작 인덱스를 반환합니다. 찾는 문자열이 없으면 -1을 반환합니다. 불리언으로 문자열이 있는지만 확인하고 싶으면 다음과 같이 조건식으로 비교하면 됩니다. console.log(string.indexOf(subs..

var 함수명 = function(){} 과 function 함수명(){}의 차이와 호이스팅(Hoisting)의 이해

0 2021. 6. 8. 함수를 정의하는 방법은 2가지가 있습니다. 2가지 모두 표준 자바스크립트 함수 정의 방법이기 때문에 어느 쪽을 사용해도 됩니다. 함수는 다음과 같이 2가지 방법으로 정의할 수 있습니다. 편의상 function1 선언은 "변수 함수 선언", function2는 "function 함수 선언"이라고 합니다. var function1 = function() { console.log("Hello!"); }; function function2() { console.log("Hello!"); } 함수를 호출해서 사용하는 방법도 동일하지만, 두가지 방법은 큰 차이점이 있습니다. 다음의 자바스크립트 코드에서 "function2();"는 정상 실행되지만 "function1();"은 함수가 아니라는 에러가 발생합니다. fu..

자바스크립트 엄격 모드('use strict';)의 개념과 제약 사항의 이해

0 2021. 6. 7. 'use strict'는 자바스크립트의 구문이 실행되는 환경을 설정하는 예약어입니다. 'use strict'; 와 같이 단일 구문으로 사용합니다. 한글로는 "엄격 모드"로 사용합니다. 자바스크립트 파일 전역으로, 또는 개별 함수 단위로 선언해서 사용할 수 있습니다. 자바스크립트 파일 전역으로 선언을 할 때는 파일 맨 위에 작성해서 표시를 합니다. 'use strict'는 자바스크립트의 의도치 않은 오류를 막아주는 수단으로 알려졌고, 또 그렇게 사용하고 있지만, 실제로는 조금 다르기도 하고, 사용상의 주의점도 여러 가지 있습니다. 항상 그렇지만 잘 알고 사용하면 자바스크립트의 여러가지 잠재적인 오류를 막아주는데 많은 도움을 주지만, 잘못 사용하면 없던 오류를 새로 만들어내는 애물단지가 될 수도 있습니다. ..

자바스크립트로 HTML 요소가 보이는지 체크하기

0 2021. 6. 7. ".element" 클래스를 가진 요소가 보이는지를 체크하는 코드를 이용해서 HTML 요소가 보이는지를 판별하는 코드를 알아보겠습니다. CSS는 다음과 같이 클래스를 정의해서 HTML 요소의 화면 표시에 관계된 속성들을 적용해서 확인합니다. html, body{ width: 100%; height: 100%; margin: 0; padding: 0; } .element{ /* display: none; visibility: hidden; opacity: 0; */ width: 100%; height: 100%; } 먼저 화면을 표시하는데 관계된 속성 3가지를 알아보겠습니다. 요소의 화면 표시 속성 3가지 HTML 요소의 화면 표시에 관여하는 속성은 3가지가 있습니다. 3가지 속성은 각각 용도가 다르며, ..

자바스크립트로 페이지 스크롤 인디케이터 구현하기

0 2021. 6. 5. 긴 페이지를 스크롤해서 움직일 때 페이지 어디쯤에 위치해있는지 알려주는 기능을 하는 페이지 스크롤 인디케이터가 있으면 방문자가 페이지 내용을 탐색하는데 많은 도움이 됩니다. 데스크톱 환경에서는 고정 위치에 스크롤바가 있기 때문에 대략의 위치를 파악하는 것이 어렵지 않지만, 모바일 웹 환경에서는 스크롤바가 스크롤하는 시점에만 보이고 사라지기 때문에 이런 스크롤 인디케이터가 고정 위치에 표시되는 것이 페이지 정보 파악에 도움이 됩니다. 문서 중심의 사이트, 긴 내용을 표시하는 페이지가 많은 사이트는 이런 스크롤 인디케이터가 특히 도움이 됩니다. 구현은 비교적 간단합니다. HTML과 CSS로 간단한 프로그래스 바를 하나 만들고, 자바스크립트로 스크롤 이벤트 처리를 해서 프로그래스 바 크기를 조절해주기만 하면 ..

이전 1 2 3 4 ··· 11 다음

닫기

티스토리툴바