[Javascript] 변수 설정하기

안녕하세요. 플입니다.

오늘은 변수를 설정해보겠습니다.

---

▷변수

변수란 쉽게 말해 새로운 이름을

지어주는 것입니다.

 

예를 들자면 줄임말과 같습니다.

최근엔 줄임말이 굉장히 많죠.

 

'세젤귀'는

'세상에서 제일 귀여운'의 줄임말입니다.

여기서 '세젤귀'가 변수입니다.

 

세상에서 제일 귀엽다고 말해도 되지만

세젤귀라고 줄여 부르는 것이

빠르고 간편하게 말할 수 있죠.

 

변수 역시 빠르고 간편하게

코딩을 하기 위해 사용합니다.

---

 1.  var

 

var

위의 코드를 참고해서 봐주세요.

 

우선 변수를 설정하기 전에

앞쪽에 var이라는 단어를 적어줍니다.

 

var은 변수라는 의미의 영어단어

'variable'의 약자로

지금 적는 단어가 변수라는 것을

알려줍니다.

 

var을 적지 않았을 때

오류가 발생하지는 않으나

코딩이 길어졌을 때 변수 찾기가 쉽습니다.

 

var이 필요할 때와 그렇지 않을 때가 존재하지만

초보자라면 항상 적는 것이 좋습니다.

저 역시 변수를 설정할 때 항상 적고 있습니다.

 

---

 2.  변수 설정하기

 

var img_h = 600px;

var로 변수의 위치를 잡았다면

변수명 = 변수에 넣을 것(데이터) 형식으로

코드를 입력합니다.

 

이 식은 예전에 배웠던 방정식과 비슷합니다.

잠깐, 아직 도망가지 마세요.

저희는 수학을 하려는 게 아닙니다.

걱정마세요. 계산할 것은 없습니다.

 

그냥 방정식과 비슷한 모양입니다.

x = a + b

이런 모양의 식을 본 기억이 있으실 겁니다.

 

기억이 안 나셔도 괜찮습니다.

저희는 x의 값을 구하는 게 아니니까요.

 

방정식과 동일하게

변수명 = 데이터

라고 적고 이 뒤에서는 모두 변수명을 적어줍니다.

 

위의 코드를 참고해서 보면

img_h를 변수명으로 정했습니다.

 

 TIP) 변수명은 직관적으로!

 

팁을 드리자면 변수명은 변수명만 보고도

어떤 데이터가 들어있는지

알 수 있게 정하는 게 좋습니다.

 

저는 img_h라고 적었는데요.

이미지의 높이라서 이런 변수명을 적었습니다.

 

변수명을 너무 어렵게 적으면

나중에 자신이 적은 변수 명도

이게 무엇인지 한참 고민해야 합니다.(경험담)

 

데이터는 600px이 들어가 있습니다.

즉, img_h라는 변수는 600px이라는 뜻입니다.

 

실제로 사용할 때는 600px보다

복잡한 데이터가 들어가는 경우가 많지만

간단하게 하기 위해 숫자를 사용했습니다.

 

---

 3.  변수 사용하기

var img_h = 600px;

$("div").css({ marginTop: img_h });

이제 설정한 변수를 사용해보겠습니다.

 

제이쿼리에서 가져온 예제입니다만

제이쿼리를 전혀 모르셔도 됩니다.

 

지금은 위는 변수를 설정한 부분

아래는 변수를 사용한 부분으로

이해해주시면 됩니다.

 

변수 설정은 2번에서 했으니

아래를 살펴보겠습니다.

 

앞의 코드는 무시하고

뒤에 변수가 사용된 부분을 보면

 

marginTop : img_h

 

marginTop 값으로 사용한 것을 볼 수 있습니다.

 

여기서 marginTop이란

css의 margin-top과 동일하게

위 부분의 여백을 말합니다.

 

변수를 넣은 부분에 값을 대입하면

marginTop : 600px

이 됩니다.  

 

$("div").css({ marginTop: 600px });

즉, 이 코드와 동일한 값으로 처리됩니다.

 

 

여기까지만 보면 변수의 사용이

왜 편한지 이해하기 힘들 수도 있습니다.

 

저도 처음에는

그냥 600px을 쓰면 되는 것 아닌가?

하고 생각했지만 실제 코딩을 하다 보면

변수가 얼마나 유용한지 알게 됩니다.

 

var img_h = $(".w_img").height();
       
   if( $(this).prev().css("display")=="none" ){
            
      $(this).html("▲펼치기")
      $(this).prev().css({ marginTop : -img_h })
      $(this).prev().slideDown("fast");
      $(this).html("▼접기")
            
   }

 

이건 실제 사용했던 코드의

일부분을 복사해온 것입니다.

전부 보실 필요는 없고

변수가 설정된 곳과 사용된 곳만 보시면 됩니다.

 

여기선 변수의 데이터가

600px보다 길고 복잡합니다.

 

이런 코드를 변수로 사용하지 않고

그냥 넣었다면 알아보기 힘들지 않았을까요?

 

여기서는 변수가 한번 사용되지만

만약 10번이 넘는다면 어떨까요?

저 긴 코드를 10번이나 복사하려면

너무 귀찮고 힘들지 않겠습니까?

이럴 때 변수가 아주 유용합니다.

 

또 만약 변수의 데이터를

수정할 일이 발생한다면

10개를 변수로 처리했을 때와

10개를 그냥 복사했을 때 어떤 쪽이

수정하기 편할까요?

 

변수 처리를 했다면

변수 설정을 한 곳에서 한 번만 수정하면 됩니다.

하지만 10번을 복사했다면 10번을 수정해야겠죠.

 

이렇게만 봐도 변수를 사용할 이유는 충분합니다.

 

---

여기까지 변수 설정을 해봤습니다.

하지만 변수 설정은 필수가 아니고 어렵다면

자신에게 쉬운 방법으로

코딩하는 것도 상관없습니다.

 

그렇게 하다 보면

언젠가 변수가 필요한 순간이 올 거고

그때 사용하면 되니까요.

 

그럼 이만.

총총.