함수의 arguments 객체와 3항 조건 식 사용에 대해 질문드립니다.

조회수 512회

그림1. 이미지 그림2. 이미지

그림 1처럼 만약 빨간네모 처럼 selector 문자(예 : -=- ) 가 오지 않도록 그림 2처럼 소스코드를 변경/추가했는데,,
어떤 이유에서 조건식을 썼는지 궁금합니다.

[질문] 1) *l -1 은 배열의 마지막을 의미하는 건가요? (예 : [0,1,2] 에서 l -1 은 2 ) (l은 영어 소문자 "엘" 입니다)

2) i < l - 1 이 참이라는 의미가 무엇인가요?

3) 그래서, 참이면 selector, 거짓이면 " " 은 어떤 의미를 말하는 건가요?

2 답변

  • 이건 자바스크립트의 삼항연산자(ternery operator) 문법을 쓴 겁니다. 일단 질문에 답을 드리면...

    1. 그렇죠. arguments 배열 길이가 l이라면 arguments 배열의 마지막 원소는 arguments[l-1]이니까요. (첫번째 원소는 arguments[0]이구요.)
    2. "지금 마지막 원소를 처리하고 있는 건 아님"이라는 의미입니다.
    3. 참이면 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 - 15 이므로, 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) 영상을 반복해서 꼼꼼하게 시청해보세요. ^ ㅡ ^

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.