함수의 arguments 객체와 3항 조건 식 사용에 대해 질문드립니다.
조회수 1708회
그림1. 그림2.
그림 1처럼
만약 빨간네모 처럼 selector 문자(예 : -=- ) 가 오지 않도록
그림 2처럼 소스코드를 변경/추가했는데,,
어떤 이유에서 조건식을 썼는지 궁금합니다.
[질문] 1) *l -1 은 배열의 마지막을 의미하는 건가요? (예 : [0,1,2] 에서 l -1 은 2 ) (l은 영어 소문자 "엘" 입니다)
2) i < l - 1 이 참이라는 의미가 무엇인가요?
3) 그래서, 참이면 selector, 거짓이면 " " 은 어떤 의미를 말하는 건가요?
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
2 답변
-
이건 자바스크립트의 삼항연산자(ternery operator) 문법을 쓴 겁니다. 일단 질문에 답을 드리면...
- 그렇죠.
arguments
배열 길이가l
이라면arguments
배열의 마지막 원소는arguments[l-1]
이니까요. (첫번째 원소는arguments[0]
이구요.) - "지금 마지막 원소를 처리하고 있는 건 아님"이라는 의미입니다.
- 참이면
separator
, 거짓이면''
이 괄호 안의 값이 되잖아요? 그러면 결과적으로 저 라인은result
스트링 끝에 그 괄호 안의 값을 덧붙이게 될 겁니다.
삼항연산자는
(조건식 ? 조건식이 참일 때 할일 : 조건식이 거짓일 때 할일)
의 형식으로 씁니다. 따라서 문제의for
문은 길게 늘여 쓰면 이렇게 되죠. 참고가 될까요?for (; i < l; i++) { result += arguments[i]; if (i < l - 1) { result += separator; } else { result += ''; } }
- 감사합니다 : ] i < l-1 어떤 부분에서 "아님" 의미를 찾을 수 있는 건지요 ? 보다 작다( < ) 란 의미가 "아님" 이라는 부정의 의미를 가리키는지요, i < l-1 부분에서 막히네요, 어떤 맥락에서 위 답변의 설명이 나왔는지 내용이 길더라도 설명 부탁드립니다:] 노현우 2018.9.18 18:28
- i를 증가시키면서 for를 돌고 있잖아요? 처음 돌 때 i=1일 겁니다. arguments[i]는 argumets[1] 즉 두번째 원소가 되겠죠. 이때 i < l -1 조건문을 보면 i=1이니까 조건문 결과는 참이죠. result에 separator를 더하고 i++가 실행되고 또 for가 돌겠죠? 이런 식으로 계속 돌다가 어느 순간 i가 l-1 만큼 커지는 순간이 올 거잖아요? 그때는 arguments[i]는 arguments[l-1] 즉 마지막 원소가 될 거고 i = l-1< l -1은 거짓이 되겠죠. for는 여기까지만 돌고요. 이걸 전체적으로 해석하면 i < l -1이라는 건 arguments[i]가 마지막 원소가 아닐 때 참이고 마지막 원소일 때 거짓이 되는 조건문이 되는 겁니다. 답변이 되었을까요? 엽토군 2018.9.18 18:59
- 명시적으로 기술된 코드는 덕분에 어떤 의미인지를 이해 했으나, 아쉽게도 식을 통해 "무엇을 표현하려는/전달하려고 하는건지는 아직 모호합니다. 추상적으로나마 selector를 마지막으로 수정하기 위해 어떤 이유로 i < l-1 ? selector : "" "코드를 변경/추가했는지 이미지나 그 이유가 아직은 모호합니다.자세한 답변 감사드립니다. 노현우 2018.9.19 00:52
- selector가 아니고 separator 입니다. 현우님 ^^ 모호한 부분이 해소될 수 있도록 답변을 남겼으니 읽어보세요. 알 수 없는 사용자 2018.9.19 01:46
- 엽토군 님, 야무 님 감사합니다. Step2 해결 아래 박스 안 주석을 보면서 이해가 됐습니다, 수식(i < l-1)을 통해 "지금 마지막 원소를 처리하고 있는건 아님" 과 "반복문의 끝이 아니라면" 각각 같은 의미 라는걸 파악하는데 많은 애를 먹었습니다. 감사합니다:] 노현우 2018.9.19 01:54
- 그렇죠.
-
안녕하세요 노현우님 ^ - ^
엽토군 님이 잘 답변해주셔서 굳이 답변이 필요할까 싶지만... 강의를 듣고 질문하시는 거니까 저 역시 답변 드려봅니다.
문제
먼저 STEP 1 코드는 다음과 같습니다..
myConcat()
함수 호출 과정에서 첫번째 전달 인자 값인' -=- '
에 이어 전달되는 인자들 사이에 첫번째 전달 인자 값이 끼워지는 스크립트 코드입니다.function myConcat(separator) { var result = ''; var i = 1; var l = arguments.length; for ( ; i < l; i++ ) { result += arguments[i] + separator; } return result; } myConcat(' -=- ', 'html', 'css', 'javascript', 'php', 'mySQL');
코드 실행 결과는 다음과 같습니다. 문제는 여기서 마지막에 출력된 구분 자를 출력되지 않게 하는 것이죠.
"html -=- css -=- javascript -=- php -=- mySQL -=- "
해결
문제 해결을 위해 요구되는 것은 "반복 문의 마지막 반복 과정은 구분 자가 설정되면 안된다" 입니다. 그럼 해결을 위해 반복 문 내부에 순환의 마지막 여부를 파악하는 조건 문이 필요하겠죠.
마지막인지 여부를 확인하는 방법은 전달인자(
arguments
)의 총 개수(length
)에서1
을 뺀 값을 for 문의 변수i
와 비교하는 것입니다. (이 부분이 모호하신 거죠?)STEP 2 구문을 찬찬히 살펴봅시다.
function myConcat(separator) { var result = ''; var i = 1; var l = arguments.length; for ( ; i < l; i++ ) { // [ 조건문 처리 ] // 조건 1: 반복문의 끝이 아니라면 if (i < l - 1) { result += arguments[i] + separator; } // 조건 2: 반복문의 끝이라면 else { result += arguments[i] + ''; // result += arguments[i] 와 동일 } } return result; } myConcat(' -=- ', 'html', 'css', 'javascript', 'php', 'mySQL');
여기서부터가 질문에 대한 답입니다.
arguments
는 사용자가 함수 호출 과정에서 전달한 인자의 집합을 말합니다. 호출 과정에서 총 6개의 인자를 전달했으니arguments
객체는 6개의 아이템으로 이루어지게 됩니다.myConcat(' -=- ', 'html', 'css', 'javascript', 'php', 'mySQL');
즉,
var l = arguments.length
구문에서l
값이 숫자6
이라는 사실을 알 수 있습니다. 변수i
값은 숫자1
부터 시작하도록 설정 했으니 반복 횟수는i < l
에 따라 1부터5
까지 총5
번 반복하게 됩니다. (총 반복 횟수는 5)반복문 내부의 조건문에서 첫번 째 조건은
i < l - 1
이죠.l - 1
은5
이므로,1
부터 시작하는i
값이 숫자5
보다 작을 때까지 처리하게 됩니다. 다시 말해 반복 횟수는 총4
번.5
번 반복 중4
번 반복이니 마지막 반복을 제외한 모든 경우는 이 곳에서 처리가 됩니다.if (i < l - 1) { // ... }
그럼 나머지 조건인
else
에서 처리되는 것은 남은5
번째 반복입니다. 즉, 반복문의 마지막이 처리되는 구간입니다.else { // ... }
정리 되시나요?
if 문의 첫번째 조건 처리 과정에서는
separator
인' -=- '
을result
문자에 접합하지만, 마지막 조건 처리 과정에서는''
빈 문자열을 접합됩니다. (문자에 빈 문자를 붙이면 결과는 그냥 그 문자입니다)핵심!
쉽게 말해
html
,css
,javascript
,php
전달인자를 순환하는 1부터 4번까지는-=-
를 문자 뒤에 붙이고, 마지막 전달인자인mySQL
일 때는''
빈 문자를 붙이는 것입니다. 최종 결과는 다음과 같이 출력됩니다."html -=- css -=- javascript -=- php -=- mySQL"
코드 간소화
마무리는 STEP 3로, 코드 간소화 단계입니다. 여러 줄로 구성된 STEP 2의
if ~ else
조건문을 단 한 줄의 3항 조건 식으로 바꿔봅니다.코드를 살펴볼까요?
function myConcat(separator) { var result = ''; var i = 1; var l = arguments.length; for ( ; i < l; i++ ) { // 3항 조건식을 사용하여 조건문을 간소화 처리 // 조건 ? 조건이 참이면 : 조건이 거짓이면 result += arguments[i] + ( i < l - 1 ? separator : '' ); } return result; } myConcat(' -=- ', 'html', 'css', 'javascript', 'php', 'mySQL');
다소 장황 했던 조건문을, 간결한 조건 식으로 변경했습니다. 3항 연산자(
?
,:
)를 사용해서 말이죠.STEP2의 조건문을, STEP3의 조건 식과 비교해봅시다.
아래 조건문을
if (i < l - 1) { result += arguments[i] + separator; } else { result += arguments[i] + ''; }
다음과 같이 조건 식으로 변경할 수 있습니다.
result += arguments[i] + ( i < l - 1 ? separator : '' )
비교 과정을 통해 조건 문의 어느 부분을 가져다 조건 식에 사용했는지 확인할 수 있을 겁니다. 조건에 해당하는 부분, 조건이 참일 경우 처리하는 구문, 조건이 거짓일 경우 처리하는 구문 이렇게 구분되죠. 3항 조건 식의 기본 구문은 다음과 같습니다.
조건 ? 참 : 거짓
결과는 STEP 2와 동일한 것을 확인할 수 있습니다. ^ - ^
"html -=- css -=- javascript -=- php -=- mySQL"
결론
모든 코드를 반드시 3항 조건 식으로 바꿀 필요는 없습니다. 제작자가 필요하다고 생각되면 조건 문 코드를 변경하거나, 처음부터 조건 식을 사용하면 되는 것입니다. ^ ㅡ ^
혹시 본문을 읽었음에도 잘 이해가 안된다면 조건(3항) 연산자 식 & 논리연산자를 사용한 조건 처리 (18:31) 영상을 반복해서 꼼꼼하게 시청해보세요. ^ ㅡ ^
-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력