JavaScript

변수

변수(Variable)는 (문자나 숫자 같은) 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용한다. 여기에 담겨진 값은 다른 값으로 바꿀 수 있다. 변수는 마치 (사람이 쓰는 언어인) 자연어에서 대명사와 비슷한 역할을 한다.

변수의 선언

JavaScript에서 변수는 var로 시작한다. var은 변수를 선언하겠다는 것을 의미한다. var을 생략 할수도 있지만 이것은 유효범위라는 것에 영향을 미친다. 그렇기 때문에 var의 의미를 명확하게 이해하기 전까지는 var를 사용하는 것이 권장된다. 유효범위에 대해서는 뒤에서 살펴볼 것이다. 변수의 이름은 $, _, 혹은 특수 문자를 제외한 모든 문자로 시작할 수 있다. 다음 예제는 변수에 값을 대입한 예제다.

var a = 1;
alert(a+1);  //2

var a = 2;
alert(a+1);  //3

//은 주석(comment)으로 코드에 부가적인 설명을 쓰거나 사용하지 않는 코드를 비활성화시키기 위해서 사용한다. //뒤에 따라오는 내용은 해석되지 않는다.

세미콜론(;)은 하나의 구문이 끝났음을 명시적으로 나타내는 기호다. 다음처럼 한줄에 여러구문을 사용하고 싶을 때 세미콜론이 유용하다.

a = 1; alert(a+1);

JavaScript에서는 세미콜론을 생략할 수 있는데, 이 경우 줄바꿈을 명령의 끝으로 간주하게 된다.

위의 실습 결과는 각각 2와 3이 출력될 것이다. 변수 a에 담겨 있는 값이 1일 때는 a+1의 결과가 2가 된다. 두번째 결과가 3이 된 것은 a의 값이 2로 바뀌었고, 2+1의 결과인 3이 출력된 것이다.

다음 예제는 변수의 값이 꼭  숫자만 올 수 있는 것은 아니라는 것을 보여주기 위해서 만든 예제다.

var first = "coding";
alert(first+" everybody");

변수 a에 coding ,변수 b에 everybody를 활당하는 방법은 아래와 같다.

var a = 'coding', b = 'everybody';
alert(a);
alert(b);

 변수가 없다면

변수는 코드의 재활용성을 높여준다. 예를들어서 100에 10을 더하고, 10을 나눈 후에 다시 10을 빼고 거기에 10을 곱해야 한다고 치자. 그리고 각 단계마다 그 결과를 출력해야 한다면 코드는 아래와 같을 것이다.

alert(100+10);
alert((100+10)/10);
alert(((100+10)/10)-10);
alert((((100+10)/10)-10)*10);

그런데 계산해야 할 값을 100이 아니라 1000으로 바꿔야 한다면 위의 코드를 모두 수정해야 할 것이다. 변수를 적용해보자.

a = 100;
a = a + 10;
alert(a);
a = a / 10;
alert(a);
a = a - 10;
alert(a);
a = a * 10;      
alert(a);

위의 코드에서 첫번째 줄의 100을 다른 숫자로 바꾸면 나머지 로직에 대입되는 변수의 값이 모두 바뀐다. 수정해야 할 코드가 적다는 것은 그만큼 해야 할 일이 줄어든다는 의미고, 그 과정에서 버그가 발생할 가능성을 낮출 수 있다. 변수의 효용은 뒤에서 배우게 될 반복문, 조건문, 함수와 결합되면 더욱 더 중요해진다.

댓글

댓글 본문
작성자
비밀번호
  1. 녹색
    진짜 쉽네요.
    감사합니다.
  2. 완료!
    감사합니다. 완료!
  3. 솔군
    2016.10.06 강의 시청
  4. 에몽몽구
    var a = 'coding';
    var b = 'everybody';
    alert(a+"\n"+b);

    를 하시면 alert에 두줄로 coding과 everybody가 나타납니다.
    대화보기
    • 이해가 쏙쏙 됩니다! 감사합니다
    • 동찜
      감사합니다
    • 냐냥
      한달 지났으니 이미 답을 구하셨을 수도 있지만 뒤에 보실 분들과 스스로 검토를 위해 한글자 적어봅니다.
      작성하신 코드
      var a = alert('abcde');
      를 자세히 풀어보면 다음과 같습니다.

      우선 함수 alert에 문자열 abcde를 인수로 전달해줍니다.
      그럼 alert이 그걸 받아서 정해진 동작을 합니다. 이 경우 메시지박스를 만들어 거기에 인수로 받은 문자열을 출력하는 기능이 되죠.
      그리고 함수는 끝날때 특정한 값을 반환하도록 만들 수 있습니다.

      그 값을 a를 선언함과 동시에 a에 넣어주게 됩니다.

      alert의 경우에는 반환값이 없는 것 같군요.

      따라서 문자열이 메시지박스에 출력이 되고 a라는 변수가 선언은 되었지만 안에 아무것도 들어가지 않은 결과가 되는겁니다.
      대화보기
      • yihsang
        감사합니다.
      • Rhys Jung
        감사합니다.
      • 최동민
        자바스크립트에는 enum은 따로 없나보네요. ㅠㅠ 비슷하게 구현 할 방법이 있을까요? 검색해 봐도 딱히 이렇다 할 방법은 없어보이는데...
      • kswooo
        변수를 선언하는 'var'
        변수의 값을 지정하는 '=(대입연산자)만으로도도 자바스크립트의 명령이 실행이 되는 것인지 궁금합니다.

        예를 들어
        var a = alert('abcde');
        (var: 변수 선언, a: 변수, =: 대입연산자, alert('abcde'): 변수의 값)
        코드의 경우

        변수 a를 특정 변수 값 ( alert('abcde') ) 로 선언한 효과와 함께
        변수 값이 웹페이지 상에서 실제로 실행되는 결과까지 도출되었습니다.

        즉, 변수에 대입하고자 하는 변수 값을 선언(지정)하는 명령만 내렸을 뿐,
        선언된 변수 값이 '실제로 실행'되는 명령까지는 내리지 않았다고 스스로 판단하였는데
        < 선언(지정) + 실행 >의 명령이 동시에 내려지게 되는 것 같습니다.

        어떤 원리로 변수를 선언하는 과정에서
        해당 변수 값이 시행하는 명령까지 이루어진 것인지 궁금합니다.
      • joo0914krs
        감사합니다
      • JustStudy
        고맙습니다
      • complus4u@naver.com
        훌륭한 강의 감솨합니다.
      • Byeong Koo Kang
        좋은 강의 감사합니다
      • Ella Halevi
        존경하는 선생님 너무 감사해요. 수업이 정말 너무 재밌네요. 언젠가 꼭 보답하고 싶어요. 이런 좋은 수업을 수업료도 없이 들을수 있게 하시고. 청렴하시고 똑똑하시고 잘 가르치시고 정말 너무 존경합니다. 복마니 받으실거에요. 엘라
      • WayneKing
        스피드!!!!!!!!!!!!!!!!!!
      • 휘인찡사랑해요
        정말좋은 강의 감사합니다
      • 리치
        강의 감사합니다.
      • 엔트
        감사합니다
        재밌게 보고있어요!!!
      • 윤긍정
        좋은강의 감사합니다~!! 그럼 다음 편으로 ㄱㄱ~~!!
      • 가넷홍
        Egoing 님 존경합니다. 사랑해요.
      • 강구임돠
        중요한 내용 공유해주셔서 감사합니다..
      • YellowBall
        잘 들었습니다.
      • 늘생릭코네
        목소리가 좋아요^^
      • Akinaro
        앞강의에 설명이 있습죠,,
        대화보기
        • 민팀장
          참 좋아용~~
        • egoing
          노드제이에스라는 것으로 php랑 비슷한 역할을 하는데 언어가 자바스트립트인 것 입이다
          대화보기
          • 원숭이
            처음부터 이제까지 들어보면서 궁금한것이 있는데요. node.js << 이거는 jquery 라고 부르는 건가요?
          • 코딩 11
            잘보고갑니다
          • 규빈이아빠
            잘 봤습니다^^
          • bloom
            강의 잘보고 갑니다 ~ ㅎㅎ
          • 조신부리
            감사합니다
          • 엠제이
            변하는 것과 변하지 않는 것을 잘 구분하는 코딩..
            냄새가 나지 않는 코드~

            라인 바이 라인.. 의미를 알고 의도있는 코딩을 하는게 중요하다는 사실을 리마인딩하게 되네요.
          • 작성자
            좋은 강의네요
          • 젤리빈
            오오옹재밌엉
          • egoing
            alert(a+"역슬래쉬n"+b)
            역슬래쉬를 무바일에선 타이핑 할 수 없네요
            대화보기
            • 달팽이
              궁금한게 있어요..

              var a = 'coding', b = 'everybody';
              alert(a);
              alert(b);

              이렇게 하면 coding 나오고 이후 everybody가 나오는데
              한 화면에서

              coding
              everybody

              이런 화면으로 변수 2개를 화면에 동시에 확인될 수있나요?
              alert 는 하나의 변수만 확인되나요?
            • JQuery
              변수의 이름은 $, _, 혹은 특수 문자를 제외한 모든 문자로 시작할 수 있다 <--
              이 부분.. 자바스크립트의 변수이름은 _, $ 가능합니다.
              다만 관습적으로 jQuery 사용중에 사용한 변수가 있다면 $로 시작하는 명명법으로 하는걸로 압니다.
            • 나무마루
              감사합니다.
            • 코코딩
              음~~ 변수~~
            • manta
              "변수 a에 coding ,변수 b에 everybody를 활당하는 방법은 아래와 같다."에서 '활당'이 오자... '할당'으로 바꿔 주세요. 고맙습니다.^^
            • 장은수
              이런 무료강좌가 있는지 몰랐네요 최고!
            • egoing
              중요한 지적 해주셨습니다. 유효범위에 대해서는 함수에서 언급하도록 할께요.
              2013년 6월 25일 오후 6:47, Disqus <notifications@disqus.net>님의 말:</notifications@disqus.net>
              대화보기
              • daejin
                유효범위가 뒤에 어디쯤 있을까요? 궁금합니다.
                제가 사무실에서 코드검토를 해보면 많은 분들이 자바스크립트의 변수유효범위를 자바랑 혼돈하시는 분들이 많이 있습니다. 간략히 정리하면...
                위 강의에 있듯이 var를 선언하지 않으면 해당 변수는 전역으로 선언되는 것이나 동일합니다.
                그런데 var를 사용하면 var를 사용하는 그 이후가 변수의 유효범위가 아니라 함수단위 유효범위임을 명싱해야 합니다.
                즉 function를 하나 만들고 for문를 아래와 같이 사용한다고 가정하면
                function foo{
                ...
                복잡한 로직
                ...
                for( var i = 0; i < 10 ; i++ ){
                }
                }
                i의 변수의 범위는 for문 안에가 아니라, foo함수 전체입니다. 그래서 자바스크립트는 가능하면 변수의 선언을 가능하면 함수선언 상당에 하는 것이 혼돈의 여지를 많이 줄일 수 있습니다.
                function foo{
                var i ...
                복잡한 로직
                ...
                for( i = 0; i < 10 ; i++ ){
                }
                }
                혹은 클로저와 같은 기법으로 변수의 유효범위를 콘트롤하는 방법등이 있지만, 여기에 다 적기에는 지면이 부족한 듯하네요 ^^/
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기