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. 용용
    190708 완료
  3. 줍줍
    19.07.08일완료
  4. 숩숩이
    19.07.08 완료
  5. Sumii
    20190630 완료
  6. 20190609완료
  7. 190515 완
  8. 2019.05.14
  9. 티모
    2019.05.09
  10. 2019.05.05 완료
  11. Math.pow(3,2); 라고 대문자로 써주셔야 합니다.
    대화보기
    • nenemthin
      math 앞에 대문자 Math 로하셈
      대화보기
      • slowbegin
        math.pow(3,2);를 크롬 콘솔창에 입력하였으나
        VM570:1 Uncaught ReferenceError: math is not defined
        at <anonymous>:1:13
        위의 오류가 뜹니다.
        어떻게 해야 egoing님께서 보여주신 예시의 결과물인
        9라는 결과값을 얻을 수 있을까요?
      • 미미
        콘솔창에 적어도 아무런 변화가없어요..ㅠㅠ
      • JS LANGUAGER
        좋은 강좌 감사합니다 ㅎㅎ
        열심히 배우고있어요
      • 초밥왕
        오 생각보다 재미있어요!! 굿굿굿
      • 이은지
        강의 너무 재밌어요! ㅠㅠ
      • 미완성
        20190108
      • 감사합니다.
      • 김주형
        아니왜 경고창이 안뜨는겁니까 ...
      • 민기삼촌
        좋은강의 고맙습니다.
      • 리젤린
        감사합니다 html css javascript순으로 배워가요
      • 질문
        잘 배우고 갑니다!
      • 김다빈
        재밌어용!
      • jnney91@gmail.com
        없습니다.
        대화보기
        • Young
          " " 와 ' ' 사용방식이나 상황이 차이나 있나요?
        • ㅎㅎ
          감사해욤욤~
        • 미스터리
          4자리수를 표현할때 두마디를 끊어야하는데 어떻게 끊어야 하죠?
        • Ra Yo
          감사합니다
        • parkhs5649@gmail.com
          감사합니다
          크롬 개발자 툴로 사용해보니
          한글도 1글자로 받아들이는것 같습니다.
        • mintblue2006@naver.com
          alert("coding everybody".length)문장에 세미콜론이 빠진 것 같습니다
        • 올리브
          20180410
        • 이햐
          쌩 초보 웹디도 이해가 잘 되게 쉽게 강의해 주셔서 감사합니다! 그리고 여담인데 필기체가 이쁘셔요 ㅎㅎ
        • 빙고
          오늘도 잘 보고 갑니다~
        • 김영민
          20180320
        • 권규형
          20180313
        • 안장호
          감사합니다~! ^^
        • 신동엽
          정답인지는 모르겠지만
          저라면 while 문을 통해 문자열에 끝에 도달할때까지 찾을거같아요 그럼 문자열 끝에 도달할때까지 모두 찾을 수 있겠죠...
          대화보기
          • DecoderK
            20180212 完
          • will
            느낌표 하고 탭키치면 됩니다! 생활코딩 아톰 강의에도 나와있어요
            대화보기
            • Seo Yun Seok Tudoistube
              감사합니다. Vue 문서에 Vue 를 공부를 하기 전에 문자열과 객체의 차이를 알아야 한다고 해서 보고 있습니다.
            • kimssu7a
              감사합니다.~
              Atom 에디터는 html만 써도 기본 문법 자동완성 되는 기능이 없나요? emmet은 이미 설치 했습니다.
            • 이근환
              감사합니다!
            • 김진홍
              감사합니다~~
            • 감사합니다
            • Jupi
              -정리-
              숫자(number)
              - 자바스크립트에서는 정수와 실수를 입력할때 구분하지 않는다
              - 곱하기기호 *(asterisk) 나누기기호 /(slash)
              - 숫자는 따옴표로 둘러 싸지 않는다

              문자열(string)
              - 따옴표로 무엇이든 둘러 싸게 하면 문자열로 인식(같은 따옴표 사용해야함)
              - 역슬래쉬n : 줄바꿈
              - typeof __ : __에 어떠한 데이터를 넣으면 데이터타입이 무엇인지 출력한다
              - 문자열뒤에 명령어를 쓸 수 있다. ex) "code".length
            • 박인호
              12-05
              수강완료.
            • 단이
              -
            • 프론트개발자가 되자
              잘 보고갑니다. 통과~~
            • 고스트프리
              완료헀습니다.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기