모든 개발자가 알아야 할 JavaScript 팁과 요령 💯 🚀️

이 기사에서는 몇 가지 유용한 JavaScript 팁과 요령을 살펴보겠습니다.

위치.재로드()

이것은 현재 문서를 다시 로드하고 브라우저의 다시 로드 버튼과 동일하게 작동합니다. 이것은 사용자 인터페이스에서 새로 고침 버튼을 구현할 때 정말 편리할 수 있습니다.

const btnRefresh = document.querySelector('button')

btnRefresh.addEventListener('click',() => {
  location.reload()
})

자바스크립트 스타일

javascript를 사용하여 적용된 CSS 스타일은 인라인 스타일로 적용됩니다.

<h1>Cakes & Bakes 🧁</h1> 

document.querySelector('h1').style.color = "coral"

<h1 style="color: coral;">  // HTML Element

유형 강제

한 데이터 유형에서 다른 데이터 유형으로 값을 암시적으로 변환하는 것을 유형 강제 변환(예: strings to numbers)이라고 합니다.

더하기 연산자 값의 경우 연결되어 문자열로 변환됩니다.

console.log("2" * 10)  // output: 20
console.log(10 - '2')  // output: 8
console.log(2 + '2')   // output: '22'

활성 요소

현재 초점을 맞추고 있는 요소를 파악하는 데 어려움을 겪고 있는 경우document.activeElement 현재 초점을 맞춘 요소를 반환합니다.

console.log(document.activeElement)

기초 요소

JavaScript에는 7개의 기본 데이터 유형이 있습니다.

number, string, boolean, undefined, null, BigInt, Symbol

나머지 연산자

나머지 연산자%는 단순히 나눗셈의 나머지, 즉 5 % 2 = 1를 반환합니다. 나머지 연산자를 사용하여 숫자가 짝수인지 홀수인지 확인할 수 있습니다.

const number = 10

console.log(number % 2 === 0 ? 'Even ❤️' : 'Odd 🧡') 

// output: Even ❤️

디자인 모드

웹 페이지 콘텐츠를 편집할 수 있도록 하려면 document.designMode를 on으로 설정합니다.

document.designMode = "on" 

포함 방법

HTML 요소에 특정 클래스가 포함되어 있는지 확인합니다.

<h1 class="title">Page title</h1>

document.querySelector('h1').classList.contains('title')
document.querySelector('h1').classList.contains('subtitle')

// output: true
// output: false 

Var 호이스팅

var로 선언된 변수가 호이스팅되지만 반환됨undefined.

console.log(a)
var a = 10;

// output: undefined

제거 방법

Remove 메서드를 사용하면 문서에서 HTML을 제거할 수 있습니다.

<h1>Page title ⚙️</h1> 

const pageTitle = document.querySelector('h1')
pageTitle.remove()

평가 방법

Eval은 strings, numbers.와 같이 주어진 값을 평가할 수 있는 내장 자바스크립트 함수입니다. 이것은 this과 같은 간단한 계산기를 만드는 데 사용할 수 있습니다.

eval(2 * '5')  
// output: 10

eval(12 / '2')  
// output: 6 

연산자 유형

typeof 연산자를 사용하면 값의 유형을 확인할 수 있습니다.

console.log(typeof 42);
// output: "number"

console.log(typeof 'markdown ⚡');
// output: "string"

console.log(typeof true);
// output: "boolean"

대체 방법

replace 메서드를 사용하면 문자열 엔터티의 첫 번째 인스턴스를 지정된 엔터티로 바꿀 수 있습니다. 마찬가지로 replace 모든 인스턴스를 바꾸는 replaceAll도 있습니다.

const string = 'cake'
string.replace('c','b')  

// output: 'bake'

기본 매개변수

인수가 전달되지 않은 경우 대입 연산자를 사용하여 함수의 기본 매개변수를 설정하면 함수가 기본값을 반환합니다.

이 주제를 자세히 다루기 위해 이 글을 썼습니다.

 function printName(name = "Anonymous"){
  console.log(name)
 }

 printName()  // output: "Anonymous"

문서 URL

document.URL은 문서 URL/위치를 문자열로 반환합니다.

console.log(document.URL)

// output: "https://developer.mozilla.org/en-US/" 

문자열 인덱스

마찬가지로 배열 문자열 인덱스도 0부터 시작합니다.

let string = 'cake'

string[0]  // output: 'c'

string[1]  // output: 'a'

방법 포함

문자열이나 배열에 특정 값이 포함되어 있는지 확인합니다. 메서드는 부울을 반환합니다.

const string = 'JavaScript'

string.includes('J')  // output: true

const hearts = ['🧡', '💙', '🤍']

console.log(hearts.includes('🧡'))  // output: true

console.log(hearts.includes('❤️'))  // output: false

내 다른 기사:

1.
2.
삼.

이 기사를 읽으셨기를 바랍니다. 할 말이 있거나 질문이 있는 경우 💯 아래에 자유롭게 댓글을 달아주세요.

저는 공식적으로 주니어/엔트리 레벨 프런트 엔드 개발자 직책을 찾고 있습니다. 채용 중이거나 기회를 공유하려면 아래에 의견을 남겨주세요. My portfolio .

감사합니다. 즐거운 코딩하세요!