Topic

자바스크립트

A collection of 197 posts
자바스크립트

[javascript] 자바스크립트의 알려지지 않은 연산자들 - "??", "??=", "?."

자바스크립트에 비교 및 연산 과정을 줄여주는 새로운 연산자들이 몇가지 추가되었습니다. 이미 연산자가 넘쳐나기 때문에 아직은 잘 사용되지 않고 있고 역시나 시간이 좀 지나야 합니다. 새로 추가된 연산자들은 "??", "??=", "=." 입니다. 다른 연사자들과 달리 의미가 바로 와닿지 않기 때문에 예제를 통해 알아 보겠습니다. ?? 두 값을 비교해 값을 반환받는 비교 연산자인 "||" 와 기본적으로 같습니다.
4 min read
자바스크립트

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

1. 함수 파라미터에 기본값을 표시하기 함수를 정의할 때 파라메터의 기본값을 명시하는 습관을 들입니다. 파라미터 기본값은 파라미터가 넘어왔는지를 확인하는 조건 체크를 하지 않아도 되기 때문에 더 간결하고 짧은 코드를 작성하는데 도움이 됩니다. function myFunc1(param1){ console.log(`param1=${param1}`); } function myFunc2(param1 = '기본값'){ console.log(`param1=${param1}`); } myFunc1(); // undefined myFunc2(); // '기본값'
9 min read
자바스크립트

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

자바스크립트에서 배열 요소의 값을 얻는 방법은 기본적으로 Array[index] 입니다. 다른 언어에서도 배열 요소에 접근하는 방법은 Array[index] 로 대동소이 합니다. 배열의 첫 번째 요소는 Array[0]으로 접근하고, 배열의 마지막 요소는 Array[Array.length-1]로 접근할 수 있습니다. 배열 요소에 접근하기 위해 사용할 수 있는 인덱스는 0 ~ Array.length-1
3 min read
자바스크립트

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

console 객체는 자바스크립트가 웹 브라우저의 디버깅 콘솔에 접근할 수 있도록 하는 객체입니다. 콘솔(console) 객체를 이용하면 자바스크립트 코드의 객체, 변수 값을 콘솔 창에 출력하거나, 필요한 메시지를 표시할 수 있습니다. 콘솔 객체는 여러 가지 메서드를 제공하며, 콘솔 창에 다양한 형태로 메시지를 출력할 수 있습니다. 콘솔 객체의 메서드를 하나씩 알아보도록 하겠습니다. > console.
8 min read
자바스크립트

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

1. String.prototype.replaceAll() 메서드 그동안 자바스크립트 개발자들이 주야장천 요청해왔던 기능이었는데 이제야 추가되었습니다. 일치하는 모든 문자열을 변경합니다. 자바스크립트 내장 문자열 변경 메서드인 "String.prototype.replace()"는 처음 나오는 일치하는 문자열만 바꾸는 것이기 때문에 여러 가지로 불편했습니다. 대부분 정규표현식으로 프로토타입 메서드를 만들어 써왔기 때문에 사실 없다는걸 알아도 나름대로는 다 개선을 해서
7 min read
자바스크립트

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

문자열로 표현한 불리언 값인 "true"는 실제 자바스크립트의 불리언인 true와는 다릅니다. 자바스크립트의 비교연산자로 비교한 "true" == true, "true" === true 는 false가 됩니다. 따라서 문자열을 불리언으로 변경하거나, 불리언을 문자열로 변경해서 비교를 해야합니다. 특히 비동기로 결과를 받아서 그 값이 참인지 거짓인지를 판단해야 할 때 반환된 결과가 문자열이기 때문에 변환하는 과정을 꼭 거쳐야 합니다.
3 min read
자바스크립트

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

함수를 정의하는 방법은 2가지가 있습니다. 2가지 모두 표준 자바스크립트 함수 정의 방법이기 때문에 어느 쪽을 사용해도 됩니다. 함수는 다음과 같이 2가지 방법으로 정의할 수 있습니다. 편의상 function1 선언은 "변수 함수 선언", function2는 "function 함수 선언"이라고 합니다. var function1 = function() { console.log("Hello!"); }; function function2() { console.log("Hello!"); } 함수를 호출해서
7 min read
자바스크립트

[javascript] 자바스크립트 문자열에 검색어가 있는지 찾기. indexOf()와 contains() 메서드 활용.

자바스크립트에는 문자열에서 검색어 문자열이 있는 첫 번째 인덱스 위치를 반환해주는 메서드가 있습니다. let string = '아주 여러 해 전 바닷가 어느 왕국에 당신이 아는지도 모를 한 소녀가 살았지.', search = '왕국'; console.log(string.indexOf(search, 0)); 문자열 객체의 메서드인 indexOf() 메서드는 첫 번째 파라미터로 검색 문자열을, 두 번째 파라미터로 시작
2 min read
자바스크립트

자바스크립트로 웹페이지 이동을 제어하는 location 객체 사용 방법

자바스크립트에서 접근할 수 있는 웹 페이지의 URL과 관련된 객체는 "window.location" 객체입니다. 자바스크립트의 URL 관련 제어, 또는 페이지 이동은 모두 이 객체에의 메서드, 또는 속성을 통해 이루어집니다. 메서드로 페이지 제어 "window.location" 객체에는 페이지 이동과 관련된 메서드가 3개 있습니다. "window"는 전역 객체이므로 "location"만 사용해서 "location.assign()"과 같이
2 min read