[구글 앱스 스크립트 기본 11] 자바 스크립트의 if 구문과 프롬프트 팝업의 버튼 응답 결과 분류하기

 

 

 

 

글의 순서 

• 자바 스크립트의 if 구문
• if 구문을 활용해 prompt(프롬프트) 팝업의 버튼 응답 결과 분류하기

 

 

자바 스크립트의 if 구문

엑셀이나 구글 시트와 같은 스프레드시트 프로그램을 써보신 분들이라면 if 함수를 한 번쯤은 들어보셨으리라 생각합니다. if 함수는 스프레드시트 프로그램에서 조금 특별한 함수인데, 주로 함수들은 어떤 값을 계산해서 결과를 내는데 초점을 맞춰져 있는 반면, if 함수는 어떤 계산을 한다기보다는 논리적인 판단을 하는 함수이기 때문입니다. 즉, 주어진 어떤 조건을 기준으로 참과 거짓을 판별해 주는 조금은 특별한 함수라고 할 수 있습니다.

 

스프레드시트 프로그램 뿐 아니라, 대부분의 프로그래밍 언어에는 이런 논리적인 판단을 하는 기능들이 있습니다. 이를 조건문이라고 부릅니다. 자바스크립트의 조건문은 스프레드시트와 같이 if로 시작하는 구문입니다. 흔히 어떤 조건을 주고 그 조건을 만족시킬 때 (if) A 값을 반환하고, 그렇지 않을 경우 (else) B 값을 반환한다와 같은 형태로 쓰기에 if... else 문이라고도 부릅니다. 가장 기본적인 형태의 if... else 문을 사용하는 방법은 아래와 같습니다. 

if (조건문) {
  조건문을 만족시킬 때 실행할 코드
} else {
  조건문을 만족시키지 않을 때 실행할 코드
};

 

if 문을 사용할 때 else 문을 사용하는 것은 필수가 아닌 선택입니다. 즉, 조건문을 만족시킬 때만 코드를 실행하기를 바라신다면 if (조건문) {조건문을 만족시킬 때 실행할 코드} 로 if 문을 마무리하셔도 됩니다. 만약 조건문을 여러개 넣고 싶을 경우 else 를 넣은 후 다시 if 문을 시작할 수도 있습니다. 이 경우의 코드는 아래와 같습니다. 

if (조건문A) {
  조건문A를 만족시킬 때 실행할 코드
} else if (조건문B) {
  조건문B를 만족시킬 때 실행할 코드
} else {
  조건문을 만족시키지 않을 때 실행할 코드
};

 

이 경우 조건문B에서 만족하지 않고 조건문C, D, E, F 등 더 많은 조건문을 넣을 수도 있습니다. 단, 이때 주의할 점이 있습니다. 조건문을 여러개 넣는 경우 마치 필터를 위에서 하나씩 순서대로 적용하는 것처럼 if 문이 작동하게 됩니다. 다른 말로 하면, 조건문 B는 조건문 A를 만족시키지 않는 조건문이어야 한다는 뜻입니다. 만약 조건문 B 또한 조건문 A를 만족시키는 경우, 코드를 실행시키는 데는 지장이 없지만 굳이 필요 없는 조건문 B가 들어갔기 때문에 코드가 길어지고 복잡해지게 됩니다. 따라서 if 문을 여러개 사용할 경우 가장 처음에 오는 조건문은 가장 작은 범위를 만족시키는 조건이거나, 다른 조건과 독립적인 조건이어야 합니다. 이를 그림으로 표현하면 다음과 같습니다.

 

(좌) 조건문 A가 가장 작은 범위를 만족시키는 경우 (우) 조건문 A가 다른 조건문과 독립적인 경우

 

또한 if 문 안에 또 다른 if 문을 넣는 것도 가능합니다. 예를 들어 조건문 하나로 원하는 조건을 완전하게 표현하지 못하는 경우와, 여러 조건을 동시에 만족시키는 값을 찾으려고 하는 경우 if 문 안에 또 다른 if 문을 중첩해서 사용할 수 있습니다. 이를 각각 그림과 스크립트로 표현해보면 아래와 같습니다.

if (조건문A) {
  if (조건문B) {
    조건문A와 조건문B를 만족시킬 때 실행할 코드
  } else if (조건문C) {
    조건문A와 조건문C를 만족시킬 때 실행할 코드
  } else {
    조건문A만 만족시킬 때 실행할 코드
  }
} else if (조건문D) {
  조건문D를 만족시킬 때 실행할 코드
} else {
  조건문을 만족시키지 않을 때 실행할 코드
};

 

if 문을 중첩해서 사용하는 경우

 

구글 앱스 스크립트도 자바 스크립트 기반으로 동작하기에 이 자바스크립트에서 사용하는 if 문을 그대로 구글 앱스 스크립트에서 사용할 수 있습니다. 지난 [구글 앱스 스크립트 기본 10] Class Ui의 프롬프트 팝업을 이용해 스크립트와 커뮤니케이션 하기 글에서 prompt 팝업의 정보를 가져오는 방법에 대해 알아보았는데요, 오늘은 사용자가 어떤 버튼을 눌렀는지에 따라 다른 로그를 남기는 기능을 이 if 문을 이용해 작성해보도록 하겠습니다. 

 

 

if 구문을 활용해 prompt(프롬프트) 팝업의 버튼 응답 결과 분류하기

지난 글에서 작성했던 간단한 스크립트 예제를 그대로 가져와보도록 하겠습니다.

function example1 () {
  var ui = SpreadsheetApp.getUi();
  var response = ui.prompt('이름이 무엇입니까?',ui.ButtonSet.OK_CANCEL)
  var responseText = response.getResponseText();
  var responseButton = response.getSelectedButton();
}

 

이제 변수 responseButton 아래에 if 문을 넣어 사용자가 OK 버튼을 눌렀을 때는 이름과 함께 환영인사를 로그에 남기는 스크립트를 작성해보도록 하겠습니다. 조건문을 작성할 때 주의할 점은, 구글 앱스 스크립트의 바탕이 되는 자바스크립트에서 'A와 B가 같다'를 표현하는 구문은 'A=B'가 아니라는 점입니다. 자바스크립트에서 등호 한개 (=)는 같다는 말이 아닌, 변수를 할당할 때 사용합니다. 위의 예제 스크립트에서 var ui = SpreadsheetApp.getUi(); 이라는 ui 변수를 만든 것 처럼 말입니다. 자바스크립트에서 같다는 것을 표현하기 위해서는 등호 두개 (==) 또는 세개 (===)세개를 사용합니다. 등호 두 개는(==) 값은 같지만 데이터 타입은 다를 때도 참이라는 결론을 냅니다. 예를 들어 문자열을 의미하는 따옴표 안에 들어간 "1"은 1이라는 값으로 표시되지만 데이터 타입은 문자열입니다. 하지만 그냥 1은 1이라는 값으로 표시되지만 숫자 타입의 데이터입니다. 이 경우 등호 2개로 둘을 비교해보면 그 값은 참으로 판명납니다. ("1" == 1 은 참입니다) 만약 이 때 등호 세 개(===)를 사용해 비교를 하게 된다면 이 때는 거짓을 반환합니다. 그 이유는 등호 세 개는 데이터의 값 뿐만 아니라 데이터 타입도 같은지 비교를 하기 때문입니다. ("1" === 1 은 거짓입니다.) 따라서 if 문의 조건문을 쓰실 때 등호 하나는 같다라는 뜻이 아니라는 점, 등호 두 개는 데이터의 값만 같다는 표현이라는 점, 등호 세 개는 데이터의 값과 데이터의 타입이 모두 같다는 표현이라는 점을 유의하셔야 합니다. 이를 바탕으로 사용자가 누른 버튼이 OK일 때 참을 반환하는 조건문과 조건을 만족시킬 때 실행할 스크립트를 써보겠습니다.

function example1 () {
  var ui = SpreadsheetApp.getUi();
  var response = ui.prompt('이름이 무엇입니까?',ui.ButtonSet.OK_CANCEL)
  var responseText = response.getResponseText();
  var responseButton = response.getSelectedButton();
  if (responseButton === ui.Button.OK) {
    Logger.log("안녕하세요, "+responseText+"님!");
  }
};

 

여기서의 조건문은 사용자의 응답 중 버튼 값을 반환하는 getSelectedButton 메서드의 반환값과 Enum Button의 OK가 같은지를 비교하는 겁니다. 이때 등호 두 개(==)가 아닌 세 개(===)를 써도되는 이유는 getSelectedButton 메서드는 사용자가 누른 버튼의 문자열을 반환하는게 아닌 사용자가 누른 버튼을 Enum 버튼 타입으로 반환하기 때문입니다. 따라서 구글 앱스 스크립트에게 반환된 사용자가 누른 버튼 값은  ui.Button의 속성 중 OK 버튼이므로 등호 세 개(===)를 써도 우리가 원하는 조건문을 완성시킬 수 있습니다. 물론 등호 두 개(==)를 써도 괜찮습니다. (만약 등호 두 개를 쓴다면 조건문을 responseButton == "OK"라고 해도 사용자가 OK버튼을 눌렀을 때 스크립트는 참으로 반환합니다). 다음으로는 사용자가 Cancel 버튼을 눌렀을 때 "이름이 입력되지 않았습니다"라는 로그를 남겨보도록 하겠습니다. 

function example1 () {
  var ui = SpreadsheetApp.getUi();
  var response = ui.prompt('이름이 무엇입니까?',ui.ButtonSet.OK_CANCEL)
  var responseText = response.getResponseText();
  var responseButton = response.getSelectedButton();
  if (responseButton === ui.Button.OK) {
    Logger.log("안녕하세요, "+responseText+"님!");
  } else if (responseButton === ui.Button.CANCEL) {
    Logger.log("이름이 입력되지 않았습니다");
  }
};

 

어짜피 버튼이 2개 뿐이니 else if 가 아닌 else를 써도 되지 않을까 라고 생각하신 분도 있을것입니다. 하지만 우리가 OK_CANCEL 버튼세트를 선택했다고 해도 버튼이 2개 인건 아닙니다. 바로 팝업창을 닫는 X 버튼 (CLOSE)이 있기 때문입니다. 다음은 사용자가 CLOSE 버튼을 눌렀을 때 "팝업을 종료했습니다" 라는 로그를 남겨보도록 하겠습니다. 이 때는 else 문을 써도 원하는 결과를 얻을 수 있겠습니다만, 저는 연습으로 else if문을 한번 더 써서 써보도록 하겠습니다. 

function example1 () {
  var ui = SpreadsheetApp.getUi();
  var response = ui.prompt('이름이 무엇입니까?',ui.ButtonSet.OK_CANCEL)
  var responseText = response.getResponseText();
  var responseButton = response.getSelectedButton();
  if (responseButton === ui.Button.OK) {
    Logger.log("안녕하세요, "+responseText+"님!");
  } else if (responseButton === ui.Button.CANCEL) {
    Logger.log("이름이 입력되지 않았습니다");
  } else if (responseButton === ui.Button.CLOSE) {
    Logger.log("팝업을 종료했습니다");
  } else {
    Logger.log("어떤 경우가 있을까요?")
  }
};

 

꼭 if 문을 else 문으로 마무리 해야 하는 것은 아닙니다만 저는 else문으로 if 문을 마무리해봤습니다. 사실 사용자가 버튼을 누르는 경우는 Ok, Cancel, Close 세 경우가 전부이므로 두 번째 else if 문으로 모든 경우를 커버하는 조건문을 완성시킨 상태입니다. 즉, 저 코드를 아무리 실행해도 else 문의 스크립트인 "Logger.log("어떤 경우가 있을까요?")"가 실행되는 경우는 없습니다. 완성시킨 이 코드를 실행시켜보면 각각 원하는 상황에서 원하는 로그가 실행 로그 창에 표시되는 것을 알 수 있습니다. 저는 이 코드를 실행시켜보면서 한가지 아쉬움이 있었습니다. 바로 사용자가 input 필드에 아무 것도 입력하지 않고 Ok를 눌러도 로그에는 " 안녕하세요, 님!"이라고 표시되는 것입니다. 그래서 If 문 안에 또 다른 If 문을 중첩시켜서, 만약 사용자가 아무 것도 입력하지 않고 Ok를 누르면 "이름이 입력되지 않았습니다"라는 로그를 남기는 스크립트를 써보도록 하겠습니다. 

function example1 () {
  var ui = SpreadsheetApp.getUi();
  var response = ui.prompt('이름이 무엇입니까?',ui.ButtonSet.OK_CANCEL)
  var responseText = response.getResponseText();
  var responseButton = response.getSelectedButton();
  if (responseButton === ui.Button.OK) {
    if (responseText === "") {
      Logger.log("이름이 입력되지 않았습니다");
    } else {
      Logger.log("안녕하세요, "+responseText+"님!");
    }
  } else if (responseButton === ui.Button.CANCEL) {
    Logger.log("이름이 입력되지 않았습니다");
  } else if (responseButton === ui.Button.CLOSE) {
    Logger.log("팝업을 종료했습니다");
  } else {
    Logger.log("어떤 경우가 있을까요?")
  }
}

 

첫번째 조건문을 만족시키는 경우는 사용자가 Ok 버튼을 눌렀을 때 입니다. 우리는 사용자가 Ok 버튼을 눌렀지만 값이 입력되지 않은 경우를 찾고 싶은 것이기에, 첫번째 조건을 만족시킬 때 실행할 스크립트에 또 다른 if 문을 넣어야 합니다. 또 다른 if 문에 들어가는 조건문은 아무 것도 없는 문자열을 나타내는 ""와 사용자의 입력 값이 같을 때 (입력 값이 아무 것도 없을 때)를 판단하는 조건문이 들어가야합니다. 여기서 등호 세 개(===)를 써도 되는 이유는 getResponseText 메서드가 반환하는 데이터 타입은 문자열이기에 아무 것도 들어있지 않은 문자열을 표현하는 ""와 값과 데이터 타입 모두 일치하기 때문입니다. 이렇게 조건문을 중첩시켜서 예를 들어 사용자가 Cancel을 눌렀지만, input 필드에 어떠한 값을 입력했을 때는 "XXX라는 이름이 입력되었지만 팝업이 종료되었습니다"라는 로그를 남길 수도 있습니다. 이 경우는 한번 스스로 스크립트를 작성해보시기 바랍니다.