blob: 651f9827d0c23015d057d3cc7febe9be92574767 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
---
title: 삼항 조건 연산자
slug: Web/JavaScript/Reference/Operators/Conditional_Operator
tags:
- Conditional
- Decision
- JS
- JavaScript
- Language feature
- Operator
- Reference
- else
- if
- ternary
browser-compat: javascript.operators.conditional
---
<div>{{jsSidebar("Operators")}}</div>
<p><strong>조건부 삼항 연산자</strong>는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다. 맨 앞에 조건문 들어가고. 그 뒤로 물음표(<code>?</code>)와 조건이 참{{Glossary("truthy")}}이라면 실행할 식이 물음표 뒤로 들어갑니다. 바로 뒤로 콜론(<code>:</code>)이 들어가며 조건이 거짓{{Glossary("falsy")}}이라면 실행할 식이 마지막에 들어갑니다. 보통 <a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a> 명령문의 단축 형태로 쓰입니다.</p>
<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}</div>
<h2 id="구문">구문</h2>
<pre class="syntaxbox "><em>condition</em> ? <em>exprIfTrue</em> : <em>exprIfFalse</em> </pre>
<h3 id="매개변수">매개변수</h3>
<dl>
<dt><code>condition</code> (조건문)</dt>
<dd>조건문으로 들어갈 표현식</dd>
<dt><code>exprIfTrue</code> (참일 때 실행할 식)</dt>
<dd><code>condition</code>이 {{Glossary("Truthy")}}일 때 실행되는 표현식입니다. (<code>true</code>일 때 치환될 값입니다).</dd>
<dt><code>exprIfFalse</code> (거짓일 때 실행할 식)</dt>
<dd><code>condition</code>이 {{Glossary("falsy")}}일 때 실행되는 표현식입니다. (<code>false</code>일 때 치환될 값입니다).</dd>
</dl>
<h2 id="설명">설명</h2>
<p><code>false</code>외에도 <code>null</code>,<code>NaN</code>, <code>0</code>, 비어있는 문자 값 (<code>""</code>), 그리고 <code>undefined</code>으로 조건문에 false 값으로 사용 가능 합니다. 이 값들이 조건문으로 사용된다면 <code>exprIfFalse</code>이 결과로 나오게 됩니다.</p>
<h2 id="예제">예제</h2>
<h3 id="A_simple_example">간단한 예제</h3>
<pre class="brush: js">var age = 26;
var beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage); // "Beer"
</pre>
<h3 id="Handling_null_values">null 값 처리하기</h3>
<p>이와같이 <code>null</code> 값을 처리할 때에도 일반적으로 사용됩니다.:</p>
<pre class="brush: js">let greeting = person => {
let name = person ? person.name : `stranger`
return `Howdy, ${name}`
}
console.log(greeting({name: `Alice`})); // "Howdy, Alice"
console.log(greeting(null)); // "Howdy, stranger"
</pre>
<h3 id="Conditional_chains">연속된 조건문 처리하기</h3>
<p>삼항 연산자는 <code>if … else if … else if … else</code>와 같은 "연속된 조건"을 사용할 수 있습니다.</p>
<pre class="brush: js">function example(…) {
return condition1 ? value1
: condition2 ? value2
: condition3 ? value3
: value4;
}
// 위의 코드는 아래의 코드와 동일합니다.
function example(…) {
if (condition1) { return value1; }
else if (condition2) { return value2; }
else if (condition3) { return value3; }
else { return value4; }
}
</pre>
<h2 id="Specifications">명세</h2>
{{Specifications}}
<h2 id="Browser_compatibility">브라우저 호환성</h2>
<p>{{Compat}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li>
</ul>
|
