[JS] 유용한 JS팁 정리 (toggle / 백틱/arrow 함수/spread)

1. toggle

document.querySelector("#ID").classList.toggle("sampleName");

위의 코드는 ID라는 id를 가진 html의 요소의 class 중에서 "sampleName"이 없다면 추가하고, 있다면 제거하라는 뜻이다.
이는 만약 toggle을 안 쓴다면 직관적으로 다음의 코드와 동치이다.

const hasClass = document.querySelector("#ID").classList.contains("sampleName");
if (hasClass){
	document.querySelector("#ID").classList.remove("sampleName");
} else {
	document.querySelector("#ID").classList.add("sampleName");
}

 

2. 백틱 template strings

큰따옴표나 작은 따옴표 대신에 백틱(`)을 사용하면 플레이스 홀더를 활용하여 쉽게 string을 작성할 수 있습니다.

let a = 5;
let b = 10;
console.log(`Fifteen is ${a + b}.`);

// "Fifteen is 15"

이는 큰따옴표나 작은 따옴표 활용시 다음과 같이 작성되었어야하는 불편함을 줄여줍니다.

let a = 5;
let b = 10;
console.log("Fifteen is "+(a+b)+".");

// "Fifteen is 15"

 

3. Arrow function

ES6부터 기존의 불편했던 JS의 함수 정의를 보다 더 간편하고 보기 쉽게 할 수 있게 되었다.

// 기존 함수 정의
function add(a,b){
    return a+b;
}
function divide(a,b){
    if (b!==0){
        return "IMPOSSIBLE"
    }
    else{
        return a/b
    }
}

// arrow function
const add = (a,b) => a+b; // 한 줄인 경우 자동 return을 해준다 {} 없어도 됨.
const divide = (a,b) => {
    if (b==0){
        return "IMPOSSIBLE"
    }
    else{
        return a/b
    }
}

 

4. spread operator

배열 혹은 객체를 언패킹하여 저장할 수 있습니다.
아래의 예시 뿐만 아니라 object에서도 역시 적용 가능합니다.

const days = ["MON", "TUE", "WED"]
const otherDays = ["THU", "FRI", "SAT"]

let allDays = days+otherDays
// allDays = "MON,TUE,WEDTHU,FRI,SAT" (string으로 반환됨)

allDays = [days, otherDays]
// allDays = [Array(3), Array(3)] (배열을 저장한 배열로 반환됨)

allDays = [ ...days, ...otherDays]
// allDays = ["MON", "TUE", "WED", "THU", "FRI", "SAT"] (배열을 언패킹하여 저장한 배열로 반환됨)

 

5. class 상속

자바스크립트에서 react 사용 시, class 개념을 계속 사용하게 될 것이다.
이 때 상속의 방법은 다음과 같다.

class Parent {}
class Child extends Parent {}

 

6. Array.map / filter

array.map(func): array를 각각 돌면서 func에서 리턴한 값들을 배열로 저장.
array.filter(func): array를 각각 돌면서 func의 조건을 만족하는 값들만 배열로 저장
array.forEach(func): array를 각각 돌면서 요소에 대해 함수 실행.
array.push("data"): array끝에  "data"요소 추가.
array.includes("data"): array에 "data"존재 유무 boolean 으로 반환

allDays = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"]

// index arg에는 index가 자동 저장된다.
const cryExceptSun = (day, index) => {
   if (day === "SUN") {return `${index}:😄 ${day}`}
   else {return `${index}:😭 ${day}`}
}

allDaysCry = allDays.map(cryExceptSun)
// allDaysCry = ["0:😭 MON", "1:😭 TUE", "2:😭 WED", "3:😭 THU", "4:😭 FRI", "5:😭 SAT", "6:😄 SUN"]

const exceptSun = day => day !=="SUN";
allDaysExceptSun = allDays.filter(exceptSun)
// allDaysExceptSun = ["MON", "TUE", "WED", "THU", "FRI", "SAT"]

 

이 게시물은 제가 자바스크립트를 공부하면서 계속 내용이 업데이트 되어갈 예정입니다.

무엇이든 자바스크립트에 대해 기본적인 것이 모르겠거나 헷갈린다면, MDN javascirpt를 보시면 큰 도움이 된답니다.