#03. JavaScript의 연산자

나는 기본적으로 자바개발자다.

그렇기에 이 포스팅 시리즈도 기본적으로는 자바개발자를 대상으로 잡고있고 자바로 if, for문정도는 돌려서 구구단 출력은 해봤다는 전제하에 작성하는것이다.

자바스크립트에 대해 깊숙하게 알고있지는 않더라도 웹개발자라면 어쩔수없이 자바스크립트를 사용할수밖에 없는데 변수를 선언할때 타입이 아닌 var를 붙인다는것과 메서드가 function 으로 선언된다는거 말고는 실행하는데 있어 자바랑 크게 다른점이 없다고 생각하며 코딩을 하게 되는것이 일반적이다.

 

하지만 사실 변수를 선언할때 타입이 숫자든 문자열이든 boolean이든 상관없이 var로 선언한다는 것이, 앞에서 알아봤지만 자바에서 메서드라고 생각했던 함수가 내부적으로는 변수로 관리한다는것이. 그냥 '아~ 얜 이렇구나 이것만 주의하면 되겠네' 라고 생각하고 넘어갈게 아니라 사실 엄청난 차이고 자바와 자바스크립트는 이름만 좀 비슷할뿐 완전히 다른언어라는걸 알아야한다.

 

그냥 단순히 jsp 혹은 html에서 필수값이나 체크하고 값이 들어왔는지말았는지만 체크하는 수준의 코딩을 하다보니 그런걸 생각할 필요가 없었던것 뿐이다.

아니, 사실 그정도 수준의 코딩도 하다보면 분명 '자바에서는 이렇게 되어야하는데 얘는 왜 이러지?' 라는 의문을 품는 결과가 나올떄가 심심찮게 나올것이다.

앞서 알아봤던 var없이 변수를 선언할 경우 전역변수로 사용된다는것이 그중 하나이다.

함수내부에서 var없이 선언하게되어도 전역변수로 선언되기때문에 자바였으면 에러를 뿜고 어플리케이션 구동이 멈췄어야할 부분에 자바스크립트는 에러한줄없이 깔끔하게 실행이 되는 경우가 발생한다.

물론 원하는 값이 나오진 않겠지만.

 

서론이 길었는데 여튼 나의 자바스크립트 포스팅은 이런사람들을 대상으로 하고있는것이다. 이번 포스팅은 상당히 짧을것같아 내 포스팅이 어떤사람들을 대상으로 하고있고, 간단하게 생각하고 넘어가서 자바스크립트로 소스를 짜고있는 자바개발자들에게 사실 두 언어가 어마무시하게 다르다는 점을 먼저 밝히고싶었다.

 

자바스크립트도 여타 프로그래밍 언어에서 지원하는 연산자들을 지원하고있다.

+, -, /, *, &&, || 등등...

기본적으로 자바로 구구단정도는 출력하는 사람들이 대상이기떄문에 하나하나 알아보진 않는다. 다만 이번 포스팅에서 꼭 짚고 넘어가고싶은 부분은 &&와 ||. 얘네다.

소스를 하나 확인해보자

 

var str = "hello" && "world";

console.log(str);

var str = "hello" || "world";

console.log(str);

 

출력되는 값을 확인해보았는가?

사실 자바 개발자라면 첫번째 구문에서부터 이해가 안될것이다.

자바에서의 && || 연산자는 양 피연사자의 boolean 형태의 값이나 최종결과가 boolean 형태가 나오는 수식이 들어와야하고 연산자 자체도 boolean 형태의 값을 리턴하게된다.

즉 true or false 둘중에 하나의 값만 리턴이 된다는 뜻이다.

 

허나 확인해봤다시피 콘솔에 찍힌 값은 true도, false도 아닌 문자열이다.

자바스크립트에서는 자바보다 훨씬 풍성하게(?) 형변환을 지원한다.

피연사자에 오는 값들중 null, undefined, "", 0, false 이 5 가지를 false로 변환하고 그 외엔 전부 true로 변환한다.

 

그래도 아직 의문은 풀리지 않았다. 그말대로라면

 

var str = "hello" && "world";

console.log(str);

 

이건 true가 출력되어야하는게 아니겠는가? 좀 더 살펴보자.

"hello" 도 true이고 "world"도 true이다.

자바스크립트의 && 연산은 왼쪽항이 true이고 오른쪽항이 true이면 '오른쪽 항을 반환' 한다.

만약 왼쪽항이 false이면 오른쪽 항은 볼것도 없이 바로 왼쪽 항을 반환하게 된다.

아래의 코드를 실행시켜보자

 

var str = 0 && "world";

console.log(str);

 

이제 ||에 대해 알아보자. 원리는 &&와 똑같다. 왼쪽이 true면 바로 왼쪽을 반환하고 왼쪽이 false면 오른쪽을 반환한다.

 

그래서 이 2가지의 연산자에 대해 설명할때

"두개의 값을 비교해서 둘다 참이면 이걸 반환하고 하나가 참이면 저걸 반환~~"이런식으로 말할필요가 없다.

&&는 왼쪽이 true면 오른쪽, false면 왼쪽을 반환, ||는 왼쪽이 true면 왼쪽, false면 오른쪽을 반환.

이라고만 생각하면 된다.

이 원칙을 잘 이해하고 자유자재로 구현하게된다면 자바로 짤때보다 훨씬 유연하고 간결한코드를 짤수있다.

 

String str = str1 == null ? "hello world" : str1;

 

str1이 null이면 왼쪽을 반환하고 null이 아니면 오른쪽을 반환하는 소스다.

삼항연산자를 사용해 최대한 간결하게 만들었다. 하지만 자바스크립트를 이용하게되면

 

var str = str || "hello world";

 

이런식으로 더 간결하게 사용할수있게된다.

 

형변환에 대해 좀 더 얘기하자면 if문을 사용할때도 이런식의 표현이 가능하다

 

if(str){

//실행소스

}

 

str에 0, false, "", undefined, null이 들어있지 않다면 실행되는것이다.

그리고 비교연산자를 사용할때도 자동적으로 형변환이 되게되는데 가령 이런 소스는 true가 나온다.

 

"" == 0

 

근데 개발을 하다보면 분명히 저 2개의 값에대한 비교가 true가 나오면 안되는 상황이 존재한다.(매우많다.)

그래서 형변환을 하지않고 타입까지 비교하는 연산자가 ===다.

===연산자는 일단 타입부터 비교하고 타입이 다르면 false를 반환한다. 타입이 같으면 값을 비교해서 결과를 반환한다.

 

true === "true"

 

사실 이런 자유롭고 유연한 모습만 보게되면 자바스크립트라는 언어는 매우 쉽고 좋은 언어인것만 같다는 생각이 들수있다.

사실 ; 하나가 없어도 돌아가고 길게 썼어야하는 문장을 &&, ||으로 처리할수도있다.

다음번에 얘기하겠지만 함수에 function func(a, b){} 로 2개의 파라미터를 받게 선언해놓고 func(1); 이런식으로 1개만 보내도 에러없이 실행된다.

 

하지만 강력한 정적언어인 자바에 비해 이런 느슨하고 런타임에 모든걸 체크하는 동적인 언어는 그만큼 개발자가 많은걸 스스로 컨트롤해야하고 언어에 대한 이해도가 낮은상태로 코딩을 하게되면 디버깅에 많은 어려움을 느끼게된다는걸 잘 알아야 할것이다.