[javascript] 조건문 - if, ifelse 간단한 샘플 코드 및 작성 방식

예전 회사 내부에서 스터디용으로 작성했던 글입니다.

말을 너무 어렵게 쓴거 같다고도 듣긴했지만..

(같이 공부하던 분들이 대략 이런 표정ㅋ)

javascript 말고도 프로그래밍 언어 배우면서 

if 문은 기본으로 배우죠.

아무 생각없이 자연스럽게 작성하던 문법이 

'왜 이렇고 왜 그런지..' 에 대해 설명을 쓰다보니

저 또한 공부도 많이 되고 느낌이 새롭네용

조금이나마 도움이 될것 같아 공개합니다.

(에버노트에 작성했던걸 가져왔더니 

글 여백이나 줄바꿈 수정이 힘드네요..ㅠ)

---

보통 프로그램의 문장은 작성된 순서대로 하나씩 실행되며, 이런 과정을 순차적(sequential) 실행이라고 합니다. 
많은 프로그램 언어들은 순차적인 실행에서 벗어나 프로그래머의 의도대로 프로그램의 흐름을 제어할 수 있는데 이를 제어 이동(transfor of control)이라고 하며, 자바스크립트에서 대표적인 제어 이동이 가능한 문장 중 하나가 바로 if 문 입니다. 

if 문의 형식은 다음과 같습니다.

1 2 3 4 5 6 7 8 9

if (조건1) {     조건1이 참이면 이 블록을 실행 } else if (조건2) {     조건2가 참이면 이 블록을 실행 } else if (조건3) {     조건3가 참이면 이 블록을 실행 } else { // 그렇지 않다면     위 조건(들)이 모두 거짓이면 이 블록을 실행 }

일반적인 프로그래밍 언어에서 흐름을 제어할 수 있는 문장을 조건문 또는 선택문 이라고 부릅니다. 
if 문은 특정 조건을 내세워 이를 만족하느냐 마느냐에 따라 흐름을 제어하기 때문에 일반적으로 '조건문' 이라 불리우며, switch 문은 특정 조건(값)을 내세운 뒤 해당하는 case 로 흐름을 제어하기 때문에 일반적으로 '선택문' 이라 부릅니다. 
자바스크립트에서 조건을 이용하여 프로그램의 흐름을 제어하는 방법으로는 if 문 외에 switch 문, 3항식이라고 불리는 조건부 연산자가 있습니다. 
(for, while 과 같은 반복문도 조건을 이용하여 프로그램의 흐름을 제어하지만, 조건문이 아닌 반복문이라 부릅니다.)

if

코드1

1 2 3 4 5

var A = 100; var B = 80; if (A > B) { // A 가 B 보다 크다면     console.log("학생 A 의 성적이 높다."); }

[코드1] 의 (1)줄은 A 의 성적을 의미하는 100을, (2)줄은 B 의 성적을 의미하는 80을 변수에 담아 놓습니다. (3)줄은 A 가 B 보다 크다면 이라는 조건을 걸었고 이 조건이 참(true)이면 if 문의 블록(block, {}) 안에 있는 구문을 실행합니다.

if-else

코드2

1 2 3 4 5 6 7

var A = 100; var B = 80; if (A > B) { // A 가 B 보다 크다면     console.log("학생 A 의 성적이 높다."); } else { // 그렇지 않다면     console.log("학생 B 의 성적이 높거나 A 와 B 의 성적이 같다."); }

[코드1] 과 마찬가지로 [코드2] 의 (3)줄은 A 가 B 보다 크다면 이라는 조건을 걸었고, 이 조건이 참(true)이면 if 문의 블록을 실행하고, 거짓(false)이면 else 문의 블록을 실행하게 됩니다.

if-elseif-else

코드3

1 2 3 4 5 6 7 8 9

var A = 100; var B = 80; if (A > B) { // A 가 B 보다 크다면     console.log("학생 A 의 성적이 높다."); } else if (A == B) { // A 와 B 가 같다면     console.log("학생 A 와 B 의 성적이 같다."); } else { // 그렇지 않다면     console.log("학생 B 의 성적이 높다."); }

위 두가지 예와 비교해서 하나더 추가된게 else if 구문 입니다. 주석을 보면 알겠지만, if 문은 조건이 참일 때, else if 문은 그 위 조건(들)이 거짓이고 다시 제시한 조건이 참일 때, else 문은 상위 조건(들)이 모두 거짓일때 해당하는 블록의 구문을 실행되게 됩니다.

작성 방식

코드A-1

1 2 3 4 5

if (A > B) {     console.log("학생 A 의 성적이 높다."); } else {     console.log("학생 B 의 성적이 높다."); }

코드A-2

1	if (A > B) console.log("학생 A 의 성적이 높다.");

코드A-3

1 2 3 4

if (A > B)     console.log("학생 A 의 성적이 높다."); else     console.log("학생 B 의 성적이 높다.");

if 문을 작성하는데에는 여러가지 문법이 있습니다. 블록으로 감싸는 방식도 있고 그렇지 않은 방식 또한 존재합니다. 

어떻게 작성을 해도 실행에는 문제가 없게 만들수 있고, 개인의 성향과 본인이 속한 그룹(회사 등), 언어 자체의 지원여부에 따라 작성 방식이 틀려질 수 있습니다. 
다만, 특별히 정해놓은 방식이 없고 이 글을 읽으시는 분이라면 [코드A-1] 방식인 블록으로 감싸는 방식을 권장하고 싶습니다. 

• 주석, 빈줄, 문장의 종료 등 코딩 습관에 대해 고민이 있으신 분은 니콜라스 자카스의 "읽기 좋은 자바스크립트 코딩 기법" 을 한번 읽어보세요.

2015/02/28 - [IT/Javascript] - [javascript] 반복문 (for문, break, continue)