JavaScript

숫자와 문자

프로그래밍 입문자에게 가장 익숙한 데이터 형(data type)은 숫자와 문자일 것이다. 이번 시간에는 실제로 가장 많이 사용되는 데이터 형인 문자와 숫자를 프로그래밍에서는 어떻게 표현하고 연산하는지 알아보자.

숫자

자바스크립트에서는 큰따옴표나 작은따옴표가 붙지 않은 숫자는 숫자로 인식한다.

alert(1+1);

결과 : 2

alert(1.2 + 1.3);

결과 : 2.5

곱하기를 할 때는 *(에스터리스크, Asterisk, 키보드 자판 상으로 숫자 8 위)를 사용한다.

alert(2 * 5);

결과 : 10

나누기를 할 때는 /(슬래쉬, slash, 키보드 자판 상으로 오른쪽 shift 키 왼쪽)를 사용한다.

alert(6 / 2)

자바스크립트에서는 사칙연산 보다 좀 더 복잡한 연산도 지원한다. 좀 더 자세한 내용은 자바스크립트 사전을 참고한다.

Math.pow(3,2);       // 9,   3의 2승 
Math.round(10.6);    // 11,  10.6을 반올림
Math.ceil(10.2);     // 11,  10.2를 올림
Math.floor(10.6);    // 10,  10.6을 내림
Math.sqrt(9);        // 3,   3의 제곱근
Math.random();       // 0부터 1.0 사이의 랜덤한 숫자

문자

문자는 "(큰 따옴표) 혹은 '(작은 따옴표) 중의 하나로 감싸야 한다. 큰 따옴표로 시작하면 큰 따옴표로 끝나야하고, 작은 따옴표로 시작하면 작은 따옴표로 끝나야 한다. String이라고 한다.

alert("coding everybody");
alert('coding everybody');

숫자를 따옴표로 감싸면 문자가 된다. 아래는 문자다. typeof는 값의 데이터 형을 알려주는 기능이다.

alert(typeof "1")

결과 : string

아래와 같이 따옴표 없는 숫자는 number가 출력된다.

alert(typeof 1)

결과 : number

만약 문자열 안에 작은 따옴표나 큰따옴표를 넣고 싶다면 어떻게 해야할까?

alert('egoing's javascript')

웹브라우저에서 실행했다면 아무것도 실행되지 않을 것이고, 크롬 개발자 도구와 같은 콘솔에서 실행했다면 아래와 같은 에러 메시지가 출력 될 것이다.

브라우저에서 실습을 하고 있다면 오류 메시지를 표시하지 않기 때문에 불편할 것이다. 구글 크롬 브라우저에서는 Ctrl+Shift+J (윈도우), 커멘트+Alt+J (OSX) 키를 누르면 웹페이지에서 발생한 에러를 보여준다. 파이어폭스에서는 윈도우 기준 Ctrl+Shift+K를 누르면 오류가 표시될 것이다. IE(IE9,10)에서는 F12를 누른 후에 개발자 도구에서 콘솔탭을 누르면 에러 메시지를 확인할 수 있다.

위의 내용은 문법(Syntax) 에러(Error)가 발생했다는 뜻이다. 작은따옴표는 문자열의 구간을 컴퓨터에게 알려주는 기호인데, 기호가 문자 자체로 사용됐기 때문에 컴퓨터 입장에서는 어디서부터 어디까지가 문자열인지 파악 할 수 없게 된 것이다.

아래와 같이 코드를 변경하면 작은따옴표를 문자열 안에 포함시킬 수 있다.

alert('egoing\'s javascript')

\를 ' 앞에 위치시키면 ' 를 문자열의 시작과 끝을 구분하는 구분자가 아니라 단순히 문자로 해석하도록 강제 할 수 있다. 이러한 기법을 이스케이프(escape)라고 한다.

여러줄의 표시

여러줄을 표시하기 위해서는 아래와 같이 한다. \n는 줄바꿈을 의미하는 특수한 문자다.

alert("안녕하세요.\n생활코딩의 세계에 오신 것을 환영합니다"); 

문자연산

문자와 문자를 더할 때는 아래와 같이 한다.

alert("coding"+" everybody");

결과 : coding everybody

문자의 길이를 구할 때는 문자 뒤에 .length를 붙인다.

alert("coding everybody".length)

결과 : 16

그 외에 문자를 이용한 작업 방법은 자바스크립트 사전을 참고한다.

댓글

댓글 본문
작성자
비밀번호
  1. 노상현
    감사합니다
  2. Jinuine
    감사합니다~
  3. koyouhan1991@gmail.com
    고맙습니다.
  4. 이리
    감사합니다 20170403
  5. Daniel Kim
    2017/4/2 잘봤습니다!
  6. 플룻머신
    복습중
  7. 최규선
    2017/03/31 수강완료.
    감사합니다.
  8. 이승우
    2017/03/27 완료
  9. SangHyeok Kim
    2017/03/24 수강완료
  10. html:5 하시고 tab하셔야합니다
    대화보기
    • 이승우
      2017/03/23 1/4 완료
    • 임성민
      수강 완료했습니다.
    • 김세창
      수강완료~!
    • 웅정
      아마 html파일로 저장을 안하고 바로 하셔서 그럴거에요. 한번 먼저 undefined인 문서를 html문서로 저장하시고 시도해 보세요.
      대화보기
      • 궁금궁금~
        서브라임텍스트3를 깔앗는데 html 치고 텝누르니깐 걍 옆으로만 가지는데 3랑 2랑 뭔가 변했나요??아님
        설정해줘야 하는게 잇나요?
      • 배워시
        용기도 주어가며
      • 광뀨
        완료
      • 감사합니다
      • 정신훈
        감사합니다.
      • 밍구
        감사히 잘 봤습니다. 질문이 있습니다 ^ㅁ^
        -console 을 사용하는 목적에는 무엇이 있나요? 수업에서는 에러를 모니터링하기 위함인가요?
        -내가 아닌 다른 사람이 만든 웹페이지(코드 수정할 권한 없음) 도 console 을 통해 (일시적으로라도)제어할 수 있는 건가요?
      • 연금이
        2017.01.10 수강완료.

        기본적인 문법지식은 타 프로그래밍과 비슷하여 내용을 훍고 있습니다.
      • 으노
        2016.12.29 수강완료.
        자바에 대해서 한번 배우고 자바스크립트를 보는 중인데, 차곡 차곡 쌓이는 기분이네요!
      • 임지호
        javascript의 데이터형식에는 크게 숫자와 문자가 있다.
        숫자는 또 크게 정수와 실수로 나뉘고 숫자끼리는 사칙연산이 가능하다(+,*,/,-)
        사칙연산 뿐 아니라 Math같은 함수를 쓰면 제곱, 제곱근, 난수 등 복잡한 계산도 가능하다.
        문자는 ""나 ''사이에 기록되어야 한다.
        간혹 ''사이에 '를 써야 하는 경우 \' 이와 같은 모습으로 기록을 해주어야 컴퓨터가 문자로서 '를 인지한다.
        \를 이스케이프라 한다.
        숫자도 ""나 ''사이에 기록되면 문자로 인식된다.
        문자들을 결합하면 결합한 문자들이 이어서 나온다.
        문자를 여러줄 쓰고 싶으면 \n이라고 쓰면 된다.(Enter와 같은 역할)
        문자에서도 .length나 .indexof같은 명령을 쓰면 여러 가지 복잡한 기능을 수행할 수 있다.
      • 최선화
        감사합니다~~^6^
      • Simon Lee
        Math.sqrt(9); // 3, 3의 제곱근 => 9의 제곱근으로 수정해야 될 것 같습니다.
      • 김응진
        코딩을 그대로 하고 크롬으로 켯는데 alert가 안떠요 크롬 설정 문제일까요?ㅠ
      • 감사합니다~
      • 완료!
        감사합니다. 완료!
      • ㅇㅇ
        일본어 키보드로 작업하시나봐요?
      • 감사합니다!
      • 자바스크립트에서 소숫점 계산시 2진수로 연산해 소숫점 자리에서 연산시 오류가 발생합니다. 따라서 소숫점 연산을 하실때에는 alert(((-1.1)*10+(2.4)*10)/10);으로 10진수로 변환후 사용해야 합니다...
        대화보기
        • 수 연산을 이것저것 넣어보다가 alert(-1.1+2.4);를 넣어봤는데
          1.2999999999999998가 나왔어요 이건 왜 그런건가요?
        • yihsang
          감사합니다.
        • kimhomework
          감사합니다.
        • joo0914krs
          감사합니다
        • 이제는 좀 정확하게
          디자인만 신경쓰다가 코딩이란걸 해봐야 겠다고 생각해서
          이것 저것 배우고 있는데요.
          늘 넘지못하던 변수 지역변수 기타등등...
          이 강의를 들으면 피상적으로만 알고 있던 개념들을 좀더 정확하게
          접근할 수 있을것 같습니다.
          감사합니다.
        • 학교 강의만으론 부족했는데 감사합니다
        • 달고뉴
          html 자동완성기능은 emmet으로는 안돼고
          SublimeCodeIntel 이라는 패키지를 설치하니까 잘 되네요!
          그 전에 서브라임 패키지 컨트롤을 설치해야 합니다.
        • JustStudy
          고맙습니다
        • lina
          너무 쉽게 잘 설명해 주셔서 감사합니다.
        • Jang Taekwan
          감사합니다.
        • Byeong Koo Kang
          좋은 강의 감사합니다!
        • Ella Halevi
          정말 감사드립니다. 수업 잘 듣고있어여
          תודה רבה על השיעור. פשוט מקסים. אין כמוך.
        • 이웃집토토로
          온라인이시네요ㅎㅎ

          정수1과 소수1.1
          정수1과 실수1.1
          정수1과 숫자1.1
          정수1과 정수가 아닌 1.1

          모두 다 맞는 말이지만... 뉘앙스 차이가 있으니까요..
          (당연히 저도 중요하다곤 생각한하는데... )
          실수라고 하시는걸 들어보니 .. 아 실수계산도 되긴하나보다 했는데
          다음 파트 강의에서 실수계산은 빠져있어서 직접 찾아봤거든요ㅎㅎ

          근데 잘 안되었어요........ 다음 파트 강의에서 실수끼리 연산을 안해서
          그냥 Math.sqrt(2)*Math.sqrt(2)를 적었는데 2.000000000004 이렇게 나오더라구요..
          그래서 아... 실수 계산은 안되는건가??? 한참 고민했었거든요..
          근데 그냥 근사값끼리 곱해서 그렇게 되었다는걸 이해하고는 댓글을 적었습니다...
          (어떻게 해야 2가 나올지.... 혹시 힌트주시면 ....ㅎㅎ)
          대화보기
          • egoing
            토토로님 지적질이라뇨. 이렇게 귀한 피드백들은 아주 소중합니다. 제가 수학에 어두워서 그런데요. 1.1은 소수이면서 실수인데 이것을 실수라고 하는 것에 어떤 문제가 있는지 부연 설명을 더해주시면 더 좋을 것 같아요~
            대화보기
            • 이웃집토토로
              [정정]
              절대로 지적질하려는건 아니고 나중에 강의 업데이트하시게 되면
              참고하시면 좋을 것 같아서 적습니다.

              첫번째 9분 20초랑 그전 부분에서 1.1이 '실수'라고 하셨는데
              원래 숫자체계대로 말하면 1.1은 소수이고 , 아마 선생님께서
              실수범위에서 사칙연산이 된다는걸 말씀시려고 한 것 같습니다.
            • pillage
              자바에 비하면 데이터 타입이 좀 헐렁한 느낌이네요 ㅎㅎ
            • 엔트
              좋은 강의 감사합니다!!!
              정말 쉽게 배우고있어요
              갓브레스유~
            • 고고
              자바랑 문법이 비슷해서 쉽네요
              근데 자바스크립트는 char 데이터타입은 없는건가요?
              String을 작은따옴표로도 표현한다니....
            • QuiDam
              파일이름으로 저장을하고
              html을 입력하시고
              탭키 말고 엔터를 쳐보세요.
              그럼 독타입까지 셋팅된답니다.
              대화보기
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기