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. Jupi
    -정리-
    변수(variable)는 값을 담는 상자
    - 값을 다시 지정하면 값이 바뀐다.
    - 어떠한 데이터도 담을수 있다.(예외존재 https://www.w3schools.com......asp)
    - 코딩을 할 시에 '변할 수 있는 영역'과 '변하지 않는 영역'을 구분하는 것이 유리하다.
  3. 박인호
    12-05
    수강완료.
  4. 단이
    -
  5. 뉴비
    잘 보고 있습니다. 감사합니다.
    //위에 오타났습니다. "활당"
  6. 프론트개발자가 되자
    통과
  7. 이병학
    다음으로 ....
  8. GoldPenguin
    완료했습니다.
  9. 수복
    수업 잘 들었습니다.
  10. 이성준
    잘봤씁니다
  11. 오빠는다르다
    감사합니다~!!!
  12. ES6 이 발표되면서 변수를 let 상수를 const로 선언하는 것도 가능해졌다고 배웠습니다! 단 제가 개발자 툴로 테스트해보니 let으로 한 번 선언한 변수는 var로 다시 변경이 안되더군요. 참고하시면 좋을 것 같습니다. ^^
    ex) let a = 1;
    console.log(a); // result: 1 --> var와 똑같은 결과
  13. 아이노바
    가슴으로 말합니다. 너무 감사합니다.
  14. yousick
    잘들었습니다. 감사합니다.
  15. ㄹㄹㄹ
    귀여우세욤
    대화보기
    • 은하수
      강의 잘보고 들었습니다. 감사합니다.
    • 신시내티
      변수와 상수를 구분해서 만들라는 조언 꼭 기억하겠습니다!! 감사합니다.
    • Yoonho Aaron Kim
      좋은 강의 잘 보고 있습니다.
      "변수의 이름은 $, _, 혹은 특수 문자를 제외한 모든 문자로 시작할 수 있다."
      아마 다들 아시겠지만, 변수 이름은 숫자로도 시작할 수 없습니다.
    • 2017-07-20
      정성스러운 강의, 감사합니다!
    • Seo Yun Seok Tudoistube
      얼른얼른 빨리 다 보고 싶지만, 쉬운게 모여서 모르는게 되어서 마음을 다스리며 봅니다. 감사합니다^_____^
    • Je-Hyeong Kim
      이고잉님 항상 감사합니다. :D
    • sssjunn
      감사합니다
    • Jinuine
      고생하셨습니다
    • 고베베
      변수변수,,, 어디서나 나오는 변수 잘 이해해야겠습니다 감사합니다!!
    • 김웅진
      감사합니다! 20170422
    • 장석규
      2017/04/18 완료
    • 이_리나
      고맙습니다. 20170418
    • koyouhan1991@gmail.com
      완료했습니다.
      고맙습니다.
    • 최규선
      2017/03/31 수강완료~~
    • 이승우
      20170328완료
    • SangHyeok Kim
      2017/03/24 수강완료
    • 임성민
      수강완료!
    • 김세창
      수강완료~!
    • 유효범위가 궁금해져요
    • 주니꾸기
      헉... 님최고 !!
      대화보기
      • 연금이
        2017.01.10 수강완료.
        JavaScript는 변수선언을 "Var"를 통해서 한다.
        타 언어는 명시적, 한정적 변수에 대한 타입명을 지정 or 선택가능한 점과 차이발생
      • 으노
        2016.12.29 수강완료.
        변수는 코드의 재활용성을 높이기 위해 쓴다.
      • 폭스킴
        좋은 팁 감사합니다. ^^
        대화보기
        • 임지호
          변수 : 값을 담는 그릇(값을 유지할 필요가 있을 때)
          var로 시작해서 변수 선언.
          다른 값을 담을 수도 있다. 그럴 때는 다시 var 쓸 필요 없다.
          변수에는 숫자, 문자 등등 어떤 것도 담길 수 있다.
          그것들을 사용해서 연산, 결합 등 할 수 있다
          변수 2개를 동시에 선언할 때는 var a = 1, b = 2의 형태로 var는 한 번만 쓰고 ,로 연결하면 된다.
          변수는 코드의 재활용성을 높이기 위해서 쓴다.
          이것은 코딩을 할 때 대단히 중요한 특성이다.
        • 히스토
          팁) 동영상 전체화면 해놓고 f12를 눌러도 개발자도구를 사용할 수 있네요~
        • 녹색
          진짜 쉽네요.
          감사합니다.
        • 완료!
          감사합니다. 완료!
        • 솔군
          2016.10.06 강의 시청
        • 에몽몽구
          var a = 'coding';
          var b = 'everybody';
          alert(a+"\n"+b);

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

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

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

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

            따라서 문자열이 메시지박스에 출력이 되고 a라는 변수가 선언은 되었지만 안에 아무것도 들어가지 않은 결과가 되는겁니다.
            대화보기
            • yihsang
              감사합니다.
            • Rhys Jung
              감사합니다.
            • 최동민
              자바스크립트에는 enum은 따로 없나보네요. ㅠㅠ 비슷하게 구현 할 방법이 있을까요? 검색해 봐도 딱히 이렇다 할 방법은 없어보이는데...
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기