1
if문에서 true/false 체크에 관하여 답변 1 (/p/javascript)
body { font-size: 9pt; font-family: "굴림"; } div, p, ul, li {} ul.menu { padding: 10px; list-style: none; border: 1px #000 sol..
<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} <<== 이런 식으로 나와서,,잘 이해가 안되네요..=.-;;;


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


+
핀란디아 님께서 11일 전에 자바스크립트 카테고리에 올린 질문

if문에서 true/false 체크에 관하여

1
if문에서 true/false 체크에 관하여 답변 1 (/p/javascript)
body { font-size: 9pt; font-family: "굴림"; } div, p, ul, li {} ul.menu { padding: 10px; list-style: none; border: 1px #000 sol..
<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} <<== 이런 식으로 나와서,,잘 이해가 안되네요..=.-;;;


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


+
핀란디아 님께서 11일 전에 자바스크립트 카테고리에 올린 질문

1개의 답변

2
[답변]주말 잘 보내고 계시는지요? ^^; 질문을 드립니다. =.-;; 3 (/p/javascript)
자바스크립트 뿐만 아니라 대부분의 프로그래밍 언어에서는 변수 값이 무엇이냐에 따라 false로 취급되는 경우들이 있습니다.예를 들어 다음과 같이 변수 값이..

자바스크립트 뿐만 아니라 대부분의 프로그래밍 언어에서는 변수 값이 무엇이냐에 따라 false로 취급되는 경우들이 있습니다.

예를 들어 다음과 같이 변수 값이 0이면 이것은 false로 취급됩니다.

var x = 0;
if(x) {
   // x가 false이므로 if문 블럭은 실행되지 않음

위와 같이 변수 값 자체가 false로 취급되는 경우들은 다음과 같습니다.

var x= 0;
var x= -0;
var x;    // x가 선언만 되고 값이 할당되지 않은 경우도 false
var x = null; 
var x = false;
var x = 10 / "A"    // 숫자를 숫자가 아닌 값으로 나누려하면 false

올려주신 예제를 보시면 변수들에 처음에 null을 할당했기 때문에 처음에는 if문에서 false로 체크되고, 이후에 변수에 다른 값들이 할당되면서 변수는 true로 체크가 되는 것입니다.


+
kimho 님께서 10일 전에 자바스크립트 카테고리에 올린 글
1
 
핀란디아 10일 전
아 , 그렇군요...책에도 이렇게 자세한 설명이 나왔으면 좋겠는데,,이렇게 잘 설명을 해주셔서 감사드립니다. ^^
0
 
kimho 9일 전
네. 궁금한 사항 있으시면 언제든지 질문주세요. 성심껏 답변드리겠습니다^^
조회수 22
답글 1