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. 최선화
    감사합니다~~^6^
  2. Simon Lee
    Math.sqrt(9); // 3, 3의 제곱근 => 9의 제곱근으로 수정해야 될 것 같습니다.
  3. 김응진
    코딩을 그대로 하고 크롬으로 켯는데 alert가 안떠요 크롬 설정 문제일까요?ㅠ
  4. 감사합니다~
  5. 완료!
    감사합니다. 완료!
  6. ㅇㅇ
    일본어 키보드로 작업하시나봐요?
  7. 감사합니다!
  8. 자바스크립트에서 소숫점 계산시 2진수로 연산해 소숫점 자리에서 연산시 오류가 발생합니다. 따라서 소숫점 연산을 하실때에는 alert(((-1.1)*10+(2.4)*10)/10);으로 10진수로 변환후 사용해야 합니다...
    대화보기
    • 수 연산을 이것저것 넣어보다가 alert(-1.1+2.4);를 넣어봤는데
      1.2999999999999998가 나왔어요 이건 왜 그런건가요?
    • yihsang
      감사합니다.
    • kimhomework
      감사합니다.
    • joo0914krs
      감사합니다
    • 이제는 좀 정확하게
      디자인만 신경쓰다가 코딩이란걸 해봐야 겠다고 생각해서
      이것 저것 배우고 있는데요.
      늘 넘지못하던 변수 지역변수 기타등등...
      이 강의를 들으면 피상적으로만 알고 있던 개념들을 좀더 정확하게
      접근할 수 있을것 같습니다.
      감사합니다.
    • 학교 강의만으론 부족했는데 감사합니다
    • 달고뉴
      html 자동완성기능은 emmet으로는 안돼고
      SublimeCodeIntel 이라는 패키지를 설치하니까 잘 되네요!
      그 전에 서브라임 패키지 컨트롤을 설치해야 합니다.
    • JustStudy
      고맙습니다
    • 너무 쉽게 잘 설명해 주셔서 감사합니다.
    • 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을 입력하시고
          탭키 말고 엔터를 쳐보세요.
          그럼 독타입까지 셋팅된답니다.
          대화보기
          • 야다
            "coding everybody".length
            문자열에 직접 .length 를 붙이는건 생소했는데 이렇게 될 수 도있구나 확실히 알고가네요^_^
          • 설명 너무 잘하시네요.
            학원에서도 이렇게 안가르치던데요.
          • Kim Daehoon
            감사합니다 :)
          • sara
            감사합니다 !
            항상 잘 듣고 있습니다 !
          • 고맙습니다! :D
          • haangoon
            좋은 강의 잘 보고 있습니다 감사합니다(__)
          • Bae_God
            cool
          • 윤긍정
            감사합니다!
          • 토마
            항상 좋은 강의 감사드립니다.
          • 고백
            이고잉님 사랑합니다!!!
          • 빗살무늬고백
            자바스크립트 포기하고 손 놓고 있다가 다시 공부하는 중인데 확실히 학원에서 진도 나가기 급급해서 듣는 수업보다 훨씬 좋은거같아요 ㅎㅎㅎ감사합니다!!!!!!
          • egoing
            자바스크립트는 없습니다.
            대화보기
            • 마르티엘
              수업 잘 듣고 있습니다. 감사합니다.

              근데 궁금한게 있는데 문자를 쓸때 작은따옴표랑 큰따옴표 같이 사용할수 있다고 했는데 그냥 하나로 통일해서 쓰라고 말씀해 주시면 오히려 안 헷갈릴거 같은데 두개의 차이점이 따로 있는 건가요? 그런 걸 좀 자세히 설명해 주시면 좋았을 것 같습니다.
            • hamell
              알아듣기 쉬운 설명 감사합니다 ^^
            • 이기자
              좋아요 감사합니다.
            • 자몽남
              설명 정말 잘해주시네요 굿
            • 보순
              계속해서 잘보고 있습니다.
            • 동슈
              정말 멋잇으세요 감동
            • YellowBall
              잘 들었습니다.
            • 이희은
              수업이 너무 재밌어요
              시간가는줄 모르겠네요!
            • Hyungju Moon
              감사합니다
            • 늘생릭코네
              시청요^^
            • 가까
              감사합니다. 잘 보고 갑니다~
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기