이챙의 개발 log
논리연산자(논리합,옵셔널 체이닝,null 병합연산자)로 코드 간결하게 하기, if문 줄이기
이챙(leechaeng)
자바스크립트에서 연산자를 활용하면 코드를 간결하게 바꿀 수 있다. if문으로 여러줄 되어 있는 코드를 한줄로 가능하다는 말씀!
잘 사용하지 않았던 연산자 위주로 포스팅 해보았다
1️⃣ 논리합 연산자 &&
앞에 값이 true이면 뒤에 값을 실행.
true && true // 앞에 값이 true 니까 뒤에꺼 true 실행
false && false // 앞에 값이 false 니까 false (뒤에 값 실행x)
true && false // 앞에 값이 true니까 뒤에 값 false 실행
앞에 값이 true false 냐 에 따라 boolean 값을 반환 해준다.
논리합 연산자를 활용하여 예제를 활용해보자
<div>
<button id="clickBtn">클릭1</button>
<p id="text"></p>
</div>
</body>
<script>
const $clickBtn = document.querySelector('#clickBtn')
const $text = document.querySelector('#text')
let num = 0;
$clickBtn.addEventListener('click', function(){
if($clickBtn.innerHTML != ''){
$text1.textContent = num++
}
})
</script>
버튼을 클릭하면 p에 num값이 증가되는 코드를 간단하게 짜보았다. if문으로 클릭버튼에 text가 들어있지 않을때 값이 증가하도록 하였다.
이 코드를 논리합연산자를 활용하여 바꾸어 보면??
<div>
<button id="clickBtn">클릭1</button>
<p id="text"></p>
</div>
</body>
<script>
const $clickBtn = document.querySelector('#clickBtn')
const $text = document.querySelector('#text')
let num = 0;
$clickBtn.addEventListener('click', function(){
$clickBtn.innerHTML != '' && ($text1.textContent = num++) // 버튼에 text가 없으면? p태그에 num값을 넣어라
})
</script>
요렇게 한줄로 바꾸었다.
현재 버튼에 text가 클릭1이라고 값이 들어 있으니 true,
뒤에 num++ 가 실행되는것 이다.
코드를 한줄로 바꿀 순 있지만 if문이 가독성이 더 좋아보인당...ㅎㅎ;; 😅
2️⃣ null 병합 연산자 ??
앞에 값이 null,undefined 일때만 뒤에 값이 실행.
undefined ?? 'false 값 입니다' // 'false 값 입니다'
1 ?? 'false 값 입니다' // 1
<body>
<ul id="numberList">
</ul>
</body>
<script>
const $numberList = document.querySelector('#numberList');
const arr = Array(10).fill();
for(let i = 0; i < 5; i++){
const selectNum = Math.floor(Math.random() * 10)
arr[selectNum] = 1
}
arr.forEach((el,i)=>{
$numberList.appendChild(document.createElement('li'))
if(!el){
$numberList.children[i].textContent = '비어있는 데이터 입니다'
}else{
$numberList.children[i].textContent = el
}
})
</script>
arr 배열에 undefined,1 값을 랜덤으로 넣고 $numberList의 li에 해당 값을 뿌려주었다.
값이 undefined면 '비어있는 데이터 입니다' 이고 값이 1 이면 1값이 출력 되도록 했다.
<body>
<ul id="numberList">
</ul>
</body>
<script>
const $numberList = document.querySelector('#numberList');
const arr = Array(10).fill();
for(let i = 0; i < 5; i++){
const selectNum = Math.floor(Math.random() * 10)
arr[selectNum] = 1
}
arr.forEach((el,i)=>{
$numberList.appendChild(document.createElement('li'))
const infoText = el ?? '비어있는 데이터 입니다'
$numberList.children[i].textContent = infoText
})
</script>
if문 대신 null병합 연산자를 활용하여 infoText변수에 값을 저장하고 li에 infoText변수 값을 뿌려주었다
위의 코드를 비교해봤을때 중복코드도 사라지고 ?? 연산자 두글자로 undefined를 걸러주는 조건문을 해결해 주었다
이 연산자는 모르고 있었었는데...공부하다가 알게되었다. 나름 유용하게 쓰일듯...? ㅎ
3️⃣ 옵셔널체이닝 ?.
?.기준으로 뒤의 값이 undefined or null 이면 undefined를 반환한다.
옵셔널체이닝은 연산자는 아니고 문법인데 주로 리액트 상태관리 할때 많이 사용했었다.
const user = {
name : "공작새",
age : 20,
address: {
home: 'seoul',
work: null,
}
}
console.log(user?.name) // 공작새
console.log(user?.name?.work) // undefined
옵셔널 체이닝을 사용하면 에러가 발생하지 않는다. 안전?하게 값을 가져 올 수 있다
const user = {}
console.log(user.address.work) //Cannot read properties of undefined (reading 'work')
console.log(user?.address?.work) //undefined
단순 객체 프로퍼티 값을 가져왔더니 에러가 발생하지만 옵셔널체이닝을 사용했더니 undefined를 반환한다.
'javascript' 카테고리의 다른 글
| 이벤트루프 드디어 정.리.해.보.았.다. (0) | 2024.02.22 |
|---|---|
| [javascript] 이벤트 버블링과 캡처링! 이벤트 흐름,전달 알아보기 (0) | 2022.05.28 |
| [javascript] 어라, 객체를 복사했는데 이상하네?🤔깊은복사와 얕은복사를 알아보자 (0) | 2022.04.21 |
| [javascript]클로저 Clousure 가 뭔지 간단하게 알아보기 (0) | 2022.04.05 |
| [자바스크립트] 고차함수..? (0) | 2022.03.16 |
이챙(leechaeng)
프론트엔드 개발도 하고 뛰기도 하고