웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트 변수선언시 팁 및 정보

Last Modified : 2016-05-26 / Created : 2016-05-26
8,838
View Count




자바스크립트는 매우 좋은 언어입니다. 오늘은 변수 선언시 간단하게 선언할 수 있는 변수선언 팁에 대하여 알아보려고합니다. 먼저 일반적인 변수의 선언 방법과 오늘 알아볼 분기문에 따른 변수 선언시의 약식 표현... 이 둘의 차이점에 대하여 알아보겠습니다. 그전에 일반적인 경우 우리는 어떻게 변수를 선언할까요?아래는 변수를 선언의 방법입니다.



# 일반적인 변수선언의 방법


변수는 여러가지 타입의 데이터를 가질 수 있습니다. 예를들어 number, boolean, undefined, NaN, string, array, object 등이 그것이지요~ 이 변수를 선언하기 위해서는 아래와 같이 사용할 것입니다. 만약 변수 test가 있다면...

var test = 'How to set variable up';
var test = true;

일반적인 방법으로 우리는 test 변수에 string인 문자타입을 선언해 보았습니다. 그리고 아래는 불리언 형태의 true를 선언해보았구요. 이 방법은 가장 간단한 방법입니다. 그런데 변수 선언시 어떤 값에 의하여 달라지는 변수값이 필요하다면 어떻게 선언할까요? 즉 분기문 형태인 if 등을 사용하여 정해진 값에의하여 달라지는 변수가 필수할 수 있습니다. 간단하게 예를들자면...

만약 isWork라는 변수가 있다고 생각해보겠습니다. isWork의 값이 false나 0이 아닌 truly값 형태... 즉 falsy 값이 아닐때에만 특정 변수 isGood 의 값을 true를 주려고 한다면? 이런 경우에 우리는 아래와 같이 변수선언이 가능할 것입니다.

var isWork = 0;
if (isWork != 0) {  <--- 1
   isGood = true;   <--- 2
}
else {
   isGood = false;   <--- 3
}

위에 사용된 isGood은 다음의 과정을 통하여 값이 선언됩니다.

1. isWork의 값이 0인지 아닌지 확인하는 if문을 실행
2. 만약 참이라면 isGood 변수에 true인 불리언 값을 할당함
3. 만약 거짓인 경우 isGood 변수에 false 값을 할당함

우리는 의도했던 바인 isGood변수 선언에 isWork의 결과에 따라 달라지는 변수 값을 할당할 수 있었습니다. 하지만 이런 형태는 보기에 꽤 복잡합니다. 과정은 간단한데 코드를 좀 더 간단하게 사용하는 방법은 없을까요? 이런 경우 약식으로 사용할 수 있는 방법이 있습니다.


# 변수 선언시 약식 분기문에 의한 값 할당 방법


이 방법은 변수를 선언할 경우 특정값의 데이터를 확인해 할당합니다. 이때 사용될 기호로 || 그리고 && 기호를 사용할 것입니다. 이 기호들은 데이터 값이 truly 또는 falsy인지를 기준으로 실행됩니다. 쉽게 이해를 위해 아래의 예제를 보시기 바랍니다.

(참고로 truly가 아닌 falsy 인 값은 우리가 undefined이 아니나 값이 없는 empty형태의 값을 의미합니다. 일반적으로 0, false등의 값들이 falsy value에 해당합니다.)


var isWork = true;
var isGood = isWork || false;

alert(isGood);

위 코드의 실행결과...
true
// true를 출력함

이를 설명하자면... isWork의 변수값을 확인하여 isGood의 값을 결정하게 됩니다. 이때 isGood = isWork || false; 가 사용되었는다. isWork의 값이 falsy 형태가 아닌 경우에만 isGood의 변수값으로 할당되며 반대인 경우 || 의 뒤에 위치한 false 값을 가지게 되는 것입니다. 그렇다면 만약 isWork가 false나 0인 경우 당연히 isGood은 false가 될 것입니다. 아래를 확인해보세요.


var isWork = false;
var isWork = 0;
var isWork = '';

var isGood = isWork || false;



alert(isGood);

false
// 결과를 false를 경고창에 출력함

출력의 결과는 예상과 우리의 예상과 같습니다. isWork가 false, 0 또는 null 값인 경우 isGood인 항상 false의 값이 할당되게 됩니다. 처음에 나타낸 if문과 비교해 보면 긴 코드가 한줄로 간단하게 표현되어 간결하고 이해하기가 매우 쉽습니다.

아래는 위와 비슷한 경우입니다. 하지만 똑같은 값이 아닌 true인 경우와 false 경우에 비교했던 변수와 전혀 다른 값을 할당하고 싶은 경우가 있습니다. 이 경우 어떻게해야할까요? 아래를 확인해보세요.



# 변수값에 따라 전혀 다른 값을 선언, 할당하는 방법


var isWork = true;
var goodNum = isWork && 1 || 2;

alert(goodNum);

1
// 1을 출력함

설명하자면...

1. isWork 변수 값 선언
2. goodNum 변수에 1의 결과에 따라 1 아니면 2를 선언함
3. 변수의 값을 alert() 함수로 출력

위 예제는 아주 간소한 방법으로 불리언에 대하여 알아봤지만 데이터 타입이 불리언이 아닌 문자나 기타인 경우에 아래와 같이 사용할 수 있습니다.

var isWork = 'yes';
var goodNum = isWork == 'yes' ? 1 : 2;

alert(goodNum);


만약 isWork의 값이 false인 경우 아래와 같습니다.

var isWork = false;
var goodNum = isWork && 1 || 2;

alert(goodNum);


2
// 2를 출력

isWork의 값이 false인 경우이므로 2를 출력하게됩니다. 여기까지 변수선언시 활용가능한 팁이었습니다. 변수 선언은 함수를 만들거나 DOM을 조작할때 등등 대부분의 경우 필요하므로 이를 알아두면 좀 더 개선된 코드를 작성할 수 있을 것입니다.

Previous

[자바스크립트] 오늘 하루만 팝업 띄우기

Previous

이벤트 함수에서 e 그리고 window.event 구문 이해하기