본문 바로가기
기타/javascript

자바스크립트 기본

by BsDev. 2018. 3. 12.
AlgorithmQuizToday I Learned작성 규칙분류코틀린 시작하기javascript Basic

javascript Basic

자바스크립트 기본 문법에 대해서 학습한다.

Byeongsoon Jang<byeongsoon@wisoft.io>

출력

자바스크립트는 html 내부에서 <script>로 시작하고 </script>로 끝난다. 이 script태그 사이에 자바스크립트를 입력하면된다.

basic.js
<!DOCTYPE html>
<html>
  <head>
    <script>
      let name = "jang";
      alert(name);
    </script>
  </head>
  <body>

  </body>
</html>

이렇게하면 웹브라우저 경고창으로 jang라는 화면이 출력된다.

문자열

javascript에서 문자열은 큰 따옴표("")나 작은 따옴표('')로 감싸 표현한다.

작은 따옴표 내에서 큰 따옴표, 큰 따옴표 내에서 작은 따옴표는 사용할 수 있지만 같은 따옴표 내에서는 그대로 사용할 수 없다.(만약 꼭 필요하다면 역슬래시로 이스케이핑해야함)

string.js
let name = "jang";
let address = 'Daejeon';

// 올바른 사용의 예
alert('Hello "World"');

// 잘못된 사용의 예
alert('Hello 'World'')
Table 1. 이스케이프 문자

이스케이프 문자

설명

\t

수평 탭

\n

줄바꿈

\'

작은 따옴표

\"

큰 따옴표

\\

역슬래시

변수

javascript는 변수를 선언할 때 따로 자료형을 선언하지 않는다. 문자열, 숫자, 불리안, 함수, 객체의 자료형이 존재하고 자료형이 결정되지 않은 undefined까지 6개가 존재한다.

value.js
let string = "This is String";
let number = 1234;
let booleadType = true;
let functionVar = function(){};
let objectVar = {};

자료형 검사

자료형 검사는 typeof()로 한다.

let name = "jang";
alert(typeof(name));

위와 같이 하면 string이라는 문구가 웹브라우저 경고창에 출력된다.

배열

배열은 여러개의 변수를 한번에 저장하는 것이다. javascript에서는 서로 다른 자료형의 변수들도 같이 저장할 수 있다.

array.js
let array = [2, "jang", false, {}, [2,12], function(){}];

//array에 접근하기 위해서는 인덱스를 사용한다. 인덱스는 0부터 시작

alert(array[0]);
alert(array[1]);
alert(array[2]);
alert(array[3]);
alert(array[4]);
alert(array[5]);

숫자와 문자열 자료형 변환

자동 형변환

javascript에서 자동으로 자료형을 변환하는 경우에 숫자와 문자열을 더할 때 숫자보다 문자열이 우선시 된다.

alert('100 + 20');    // 100 + 20
alert('100' + 20);    // 10020
alert('100' + '20');  // 10020

더하기를 제외한 사칙연산은 숫자가 우선된다.

alert('100 * 20');    // 100 * 20
alert('100' * 20);    // 2000
alert('100' * '20');  // 2000

강제 형변환

  • Number() : 다른 자료형을 숫자로 바꾼다.

  • String() : 다른 자료형을 문자열로 바꾼다.

일치 연산자

javascript는 자동 형변환이 잘 일어난다는 특징 때문에 아래의 네 가지 코드가 모두 true를 반환한다.

alert('' == false);     // true
alert('' == 0);         // true
alert(0 == false);      // true
alert('100' == 100);    // true

정확하게 일치/불일치를 확인하고 싶다면

연산자

설명

===

양 변의 자료형과 같이 일치한다.

!==

양 변의 자료형 또는 값이 다르다.

일치 연산자를 사용하면 된다.

'기타 > javascript' 카테고리의 다른 글

Flow Control  (0) 2018.03.12