if문과 논리연산자

부트스트랩을 사용하던 도중, 브라우저의 너비가 변할 때 마다 table을 리랜더링하는 스크립트가 작동하고 있는 것을 발견했다.

 

나는 테이블의 th가 스크립트로 인해 변하는 것을 막기 위해서 스크립트를 보다가 처음 보는 if문 형태를 발견했다.

큰 if문의 조건식에 다음과 같은 논리 연산자들이 많이 있는데 이해하기가 힘들었다.

 

위의 조건식을 이해하기 위해서 아래의 과정이 필요했다.

 

1. , (쉼표)

if 문의 조건문 내부에 , 이 존재한다면

각 조건을 차례대로 검사하고, 검사하는 도중 true 가 발생하면 검사를 멈추고 if문의 실행문을 실행한다.

-> 이 성질을 이용해서 왼쪽에 부작용을 가진 표현식을 적고 변수나 속성을 할당하도록 로직을 만들고

가장 오른쪽에 실행하는 로직을 작성한다.

따라서 위의 조건문은

3개의 조건이 true인지, false인지 차례로 검사하고 true인 조건이 발생하는 경우 이후의 조건은 검사하지 않는다.

 

2. if 문 처럼 사용되는 논리연산자

  - 1)

이 논리연산자는 or 연산자이다. (   ||   )

그런데, 논리 연산자의 마지막 부분에 ( ) 로 함수가 들어온다면 다음과 같은 기능을 한다

 

  - 2)

이 논리 연산자는 

  - 3)

는

와 같다.

그 이유는 

&& 나 || 의 경우 다음과 같은 성질을 가진다

a && b 일 때, a가 거짓이면 b를 확인하지 않고 연산의 결과를 False로 반환한다.

 

a || b 일 때, a가 참이면 b를 확인하지 않고 연산의 결과를 True로 반환한다.

 

이 성질을 이용해서 if 문처럼 사용되도록 만들 수 있다.

 

2번을 예로 들면,

a.cellClass 에 값이 없으면, && 이후의 모든 과정을 스킵하고 3번 조건인 a.render를 확인한다.

만일 a.cellClass 에 값이 있어서 true로 인정받으면, () 내부를 확인하는데

o.attributes가 ture이면 우측의 (o.attributes = {}), (o.attributes.class = a.cellClass) 를 스킵하고

o.attributes 가 false면, o.attributes = {} 를 실행한 후 (o.attributes.class = a.cellClass) 를 확인한다.

o.attributes.class = a.cellClass 의 실행 결과는 true가 아니므로 3번 조건인 a.render를 확인한다.