Javascript
if문에서 true/false 체크에 관하여
<style>
body {
font-size: 9pt;
font-family: "굴림";
}
div,
p,
ul,
li {} ul.menu {
padding: 10px;
list-style: none;
border: 1px #000 solid;
}
ul.menu li {
border: 1px #eeeeee solid;
margin: 10px;
}
li.select {
background-color: #ccc;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var $menu = null;
var $menuName = null;
var $selectedItem = null;
$(document).ready(function() {
init();
initEvent();
});
function init() {
$menu = $('ul.menu');
$menuName = $('#menuName');
}
function initEvent() {
$('#add').click(function() {
addMenu();
});
$menu.on('click', 'li', function() {
setSelectItem($(this));
});
$('#update').click(function() {
updateMenuItem();
});
$('#remove').click(function() {
removeMenuItem();
});
$('#up').click(function() {
upMenuItem();
});
$('#down').click(function() {
downMenuItem();
});
}
function addMenu() {
var menuName = $menuName.val();
var newMenuItem = '<li>' + menuName + '</li>';
if ($selectedItem) { // <<= 이런 부분
$selectedItem.after(newMenuItem);
} else {
$menu.append(newMenuItem);
}
}
function setSelectItem($item) {
if ($selectedItem != null) {
$selectedItem.removeClass('select');
}
$selectedItem = $item;
$selectedItem.addClass('select');
}
function updateMenuItem() {
if ($selectedItem) { // <<= 이런 부분
var menuName = $('#menuName').val();
$selectedItem.html(menuName);
} else {
alert('No selected Menuitem');
}
}
function removeMenuItem() {
if ($selectedItem) { // <<= 이런 부분
$selectedItem.remove();
$selectedItem = null;
} else {
alert('No selected Menuitem');
}
}
function upMenuItem() {
if ($selectedItem) { // <<= 이런 부분
var $prevItem = $selectedItem.prev();
if ($prevItem) { // <<= 이런 부분
$selectedItem.insertBefore($prevItem);
} else {
alert('No selected Menuitem');
}
}
}
function downMenuItem() {
if ($selectedItem) { // <<= 이런 부분
var $nextItem = $selectedItem.next();
if ($nextItem) { // <<= 이런 부분
$selectedItem.insertAfter($nextItem);
} else {
alert('No selected Menuitem');
}
}
}
</script>
<body>
<div>
<input type="text" id="menuName" />
<button id="add">
추가
</button>
<button id="update">
수정
</button>
<button id="remove">
삭제
</button>
<button id="up">
UP
</button>
<button id="down">
DOWN
</button>
</div>
<ul class="menu">
</ul>
</body>


위 소스입니다. 

우선, 전체적인 로직은 다 이해를 합니다. 

다만, 제가 궁금한 부분에 대해서는 //한줄 주석을 달아놓았습니다.


위에 // <<== 이런 부분으로 주석을 달은 if문입니다. 


보통,,책을 보면서 if조건문을 배웠는데요, 

if조건문은 if(조건식) ,,즉, if(i<=0){    이런식으로 해서

변수 i가 0보다 작거난 같을 때,,,라는 식으로 사용이 되었습니다. 


그런데, 위에 주석을 달은 if문에는 그런 비교연산자가 없이

그냥 각각의 객체만 있더군요..

그렇다면 적어도 그 객체가 어떤 조건인지에 대한 true 또는 false와 같은

논리연산자도 없이, 그냥 딸랑 객체만 있습니다.


즉, 

하나를 예를 들자면 if($prevItem){... 이렇게 돼어있는데..

해석하자면, 만약 $prevItem이....로만 끝납니다.

즉, 만약에 $prevItem 이 뭐뭐라면도 없이,,,그냥 if($prevItem)이렇게만 나와서,

$prevItem이 뭘 어쨌다는건지.....만일 $prevItem >= 0 이런 식으로 돼어있다면,

"만약 $prevItem이 0보다 크거나 작으면.." 이렇게 이해를 하겠는데,

그러한 아무런 비교 또는 논리적인 연산도 없이, 그냥 if($prevItem)만 있어서

$prevItem이 뭘 어쨌따는건지,,,이해가 안되더군요..


가령, if($prevItem==true){a} else {b} <<<== 이런 구문은 이해합니다.

즉, $prevItem 객체가 참이면 a를 실행하고, 아니면 b를 실행하라는건데요,,,


if($prevItem){a} else {b} <<== 이런 식으로 나와서,,잘 이해가 안되네요..=.-;;;


언제나 답변주셔서 늘 감사하는 마음입니다. ^^;


댓글 4