글 작성자: juyoungit

 본 글에서 자바스크립트에 대한 개념의 모든 내용을 다루지 않습니다.

자바스크립트의 경우 이전에 C언어와 같은 프로그래밍언어를 1개 이상 이미 학습한 상태임을 가정하고

다루고 있으니 참고하시기 바랍니다.

 

 

이전에 살펴봤던 것처럼 자바스크립트는 현재 정말 많은 곳에 사용되는 프로그래밍 언어입니다. 

그리고 바로 이 자바스크립트로 작성된 각각의 명령어들을 우리는 자바스크립트문(JavaScript Statements)

이라고하고, 이 자바스크립트 문이 모여서 구성된 하나의 프로그램을 자바스크립트 프로그램 이라고 합니다.

 

자바스크립트 프로그램은 많은 자바스크립트 문을 포함하며 작성된 자바스크립트문은 작성된 순서대로

하나씩 수행됩니다.

 

실제로 자바스크립트 프로그램(및 자바스크립트문)은 종종 자바스크립트 코드 라고 부르기도 합니다.

 

이번에는 바로 이 자바스크립트 문에 대한 기본적인 내용들을 알아보도록 하겠습니다.

 

자바스크립트 문장의 구성

자바스크립트 문장의 구성요소는 다음과 같습니다.

  1. 값(value)

  2. 연산자(operator)

  3. 표현식(Expression)

  4. 키워드(keyword)

  5. 주석(comment)

아래의 자바스크립트문은 웹 브라우져 상에 "Welcome to JavaScript"를 출력합니다.

document.getElementById("demo").innerHTML = "Welcome to JavaScript!";
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Statements</h1>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Welcome to JavaScript!";
</script>

</body>
</html>

 

 

별도로 예시를 제시하지는 않지만 기억해야할 것

  1. 문장의 끝은 세미콜론( : )을 이용해서 표시합니다.

  2. 공백을 무시합니다. -> 의도적으로 공백을 추가함으로서 소스의 가독성 향상을 기대할 수 있음

  3. 가독성의 극대화를 위해 각 코드라인은 80자를 넘기지 않도록 합니다.

  4. 자바스크립트문이 한줄에 맞지 않아 개행을 해야하는 경우 연산자를 기준으로 개행할 것을 권장합니다.

  5. 중괄호( { ... } )를 사용해서 코드를 그룹화 할 수 있습니다. (자바스크립트 함수에서 다음사항을 발견할 수 있습니다.

  6. 자바스크립트의 키워드는 예약어로서 변수명으로 사용할 수 없습니다.

 

 

자바스크립트 문법(Syntax) 관련해서 기억해야할 것

고정값과 변수값의 두 가지 유형의 값을 정의합니다. 여기서 고정값을 리터럴, 변수 값을 variables 라고 합니다.
고정값 수를 사용하는 경우 별도의 처리없이 수를 작성해주면 됩니다.

고정값 문자열을 사용할 때 큰 따옴표와 작은 따옴표를 구분하지 않습니다.(단, 쌍을 이룰 때 같은 문자를 사용합니다.)
자바스크립트는 var 키워드를 사용하여 변수를 저장합니다.

산술연산자(+, -, *, /)를 사용해서 기본적인 산술연산을 수행할 수 있습니다.

대입연산자(=)를 사용해서 변수에 값을 할당합니다.

문자열을 ( + ) 연산자를 이용해서 연결할 수 있습니다.

주석을 사용할 때 (' // ') 또는 ('/* */')를 사용합니다.

 

 

자바스크립트 식별자 (Identifiers)

자바스크립트 내에서 모든 변수들은 고유한 이름을 가져야 합니다. 그리고 이 고유한 이름을 식별자라고 합니다.

자바스크립트에서 식별자는 변수의 이름을 지정하는 데 사용합니다. 변수명에 대한 규칙은

다른 프로그래밍 언어들과 동일한 규칙을 사용합니다.

일반적으로 식별자를 구성할 때에는 다음의 규칙을 사용합니다.

  • 이름은 문자, 숫자, 밑줄 및 달러 기호를 포함 할 수 있습니다.
  • 이름은 문자로 시작해야합니다
  • 이름은 $와 _로 시작할 수도 있습니다 (그러나이 자습서에서는 사용하지 않습니다)
  • 이름은 대소 문자를 구분합니다 (y와 Y는 다른 변수입니다)
  • 예약어 (예 : JavaScript 키워드)는 이름으로 사용할 수 없습니다

 

자바스크립트는 대소문자를 구분합니다.

모든 자바스크립트 식별자는 대소문자를 구분합니다.

즉, 변수 js_study와 js_Study는 서로 다른 변수로서 구분됩니다.

다음사항은 오직 식별자에 대해서만 적용되며 키워드와 같은 항목에는 적용되지 않습니다.

 

자바스크립트는 유니코드(UniCode)를 사용합니다.

유니코드는 거의 모든 문자를 다룰 수 있습니다.

 

자바스크립트 변수는 타입(type)을 별도로 구분하지 않습니다.

자바스크립트 변수는 타 프로그래밍 언어와 달리 타입을 지정하고 변수를 선언할 필요가 없습니다.

내부적으로 변수의 형태를 판단하여 자동으로 타입을 결정하게 됩니다.

 

변수 선언하기

자바스크립트에서는 var 키워드를 사용해서 변수를 선언합니다.

var test1;

작성자가 변수의 타입을 지정해줄 필요가 없기 때문에 var 키워드와 변수명(식별자)을 입력해주면 됩니다.

그 이외에 변수에 값을 할당하거나 선언 후 초기화 하는 등의 구문은 타 프로그래밍 언어들과 동일합니다.

 

또한 많은 수의 변수를 한 줄에 선언할 때 다음과 같이 쉼표를 사용해서 작성할 수 있습니다.

var fruit="Melon", color="Blue", number=13;

 

값을 초기화 하지 않은 변수를 사용하는 경우

우리는 변수를 선언만 하고 초기화 하지 않는 경우가 있습니다.

자바스크립트는 선언만 초기화하지 않은 변수에 대해서 "undefined"라는 값을 가집니다.

var fruit; // 값과 타입 모두 undefined

위와 같이 선언된 경우 변수 fruit의 값과 타입은 모두 undefiend 값을 갖습니다.

fruit = undefined;

그래서 다음과 같이 코드를 작성하는 경우 이는 변수 fruit이 가지는 값과 타입을 완전히 초기화 하는 용도로

사용할 수 있습니다.

 

 

하지만 빈 값의 경우 undefined와 관련성이 없습니다

아래의 코드와 같이 빈 문자열의 경우에는 유효한 값과 타입이 존재합니다.

var fruit = "";

변수 fruit을 다음과 같이 선언한 경우 값은 "", 타입은 "string"에 해당합니다.

 

 

 

변수를 재선언 하는 경우

var fruit = "Melon";
var fruit;

다음과 같이 이미 선언하고 값까지 초기화한 변수를 다시 선언하는 경우에도 fruit 변수는 여전히 Melon값을 가집니다.

기존에 가지고 있는 변수의 값을 유지하며 값을 손실이 발생하지 않습니다.

 

 

숫자에 따옴표를 씌우는 경우

다음과 같이 하나의 숫자에 따옴표를 씌워진 경우 나머지 뒤에 있는 숫자들도 문자열로 인식하고 연결됩니다.

var result = "3" + 4 + 5;

위의 코드에서 변수 result는 문자열 "345"를 변수값으로 갖습니다. 가장 앞에 위치한 수 3이 따옴표에 의해서 문자로 인식되었기 때문에 나머지 뒤에 오는 수들도 또한 문자열로 처리되고 연결되어 345라는 문자열 값을 결과로 가지게 되는 것입니다.

 

하지만 다음과 같이 코드를 살짝 바꿔주면 결과가 달라집니다.

var result = 3 + 4 + "5";

첫번쨰 코드와 달리 위의 코드에서는 변수 result는 문자열 "75"를 변수값으로 갖습니다.

위의 코드에서는 따옴표로 씌워진 수가 연산식의 가장 뒤에 오기 때문에 이전의 3+4는 단순히 산술연산의 결과로

7이라는 결과를 얻습니다. 그리고 그 뒤에 오는 "5"에 의하여 두 수가 서로 문자열로 연결되어 "75"라는 문자열이 완성됩니다.

 

 

식별자에 달러기호('$')

자바스크립트에서는 달러기호($)를 문자로 취급하기 때문에 해당기호가 변수명에 사용되는 것이 가능합니다.

즉, 다음과 같은 코드작성이 가능합니다.

var $$$ = "Hello World";
var $ = 3;
var $myMoney = 7;

 

 

산술연산자(지수화)

다음과 같이 두 개의( '' * " ) 연산자를 연결하면 지수승으로 계산합니다.

var x = 5;
var z = x ** 2;

 

위와 같이 코드를 작성한 경우 변수 z에 할당되는 값은 5의 제곱으로 25가 됩니다.

** 연산자의 피연산자 중에서 첫번째 피 연사자가 지수연산을 수행할 대상,

두번째 피 연산자가 제곱할 수가 됩니다.

즉, x ** y는 다음과 같은 결과를 생성합니다. Math.pow(x, y) 

 

 

자바스크립트 데이터 형식(Type)

자바스크립트 상에서 다음과 같은 코드를 작성한 경우

var mix = 13 + "Melon";
var mix = "13" + "Melon";

위에서 첫번째 코드는 두번째 코드처럼 처리합니다.

즉 숫자와 문자열을 대상으로 산술연산이 이뤄질 때 자바스크립트는 숫자를 문자열로 취급합니다.

 

 

문자열에 따옴표를 사용할 때

이전에 언급했던 것처럼 자바스크립트는 문자열에 따옴표를 사용할 때 큰 따옴표와 작은 따옴표를

모두 사용하는 것이 가능합니다. 단, 문자열을 둘러싼 두 따옴표가 일치해야하며

문자열을 둘러싼 두 따옴표가 일치한다면 다음과 같이 문자열 안에 다른 종류의 따옴표를 사용할 수 있습니다.

var answer1 = "Hello World!";          
var answer2 = "Hello 'World!'";   
var answer3 = 'Hello "World!"';

즉, 위의 코드에서 두번 째, 세번째 라인의 코드는 오류를 일으키지 않고 정상적으로 처리됩니다.

 

 

 

 

연산자 유형(typeof)

자바스크립트 상에서 typeof 연산자를 사용하여 자바스크립트 변수의 유형을 찾을 수 있습니다.

typeof 연산자는 변수 또는 식의 타입을 반환합니다.

typeof ""             // "string" 을 반환
typeof "John"         // "string" 을 반환
typeof "John Doe"     // "string" 을 반환
typeof 0              // "number" 를 반환
typeof 314            // "number" 를 반환
typeof 3.14           // "number" 를 반환
typeof (3)            // "number" 를 반환
typeof (3 + 4)        // "number" 를 반환

 

 

 

null vs undefined

null과 undefined는 서로 같은 것 같으면서도 많이 다릅니다. 

둘의 차이점을 정확하게 활용할 수 있는 것이 대단히 중요합니다.

자바스크립트에서 null은 "아무것도 없음"을 의미합니다.

null 역시 변수를 초기화 하는 목적으로 사용할 수 있습니다.

var person = {firstName:"길동", lastName:"홍", age:30, eyeColor:"black"};
person = null;

위의 코드와 같이 변수를 null로 초기화 하면 값은 null, 타입은 person으로 유지됩니다.

 

var person = {firstName:"길동", lastName:"홍", age:30, eyeColor:"black"};
person = undefined;

 

또한 위의 코드와 같이 변수를 undefined로 초기화하면 값과 타입이 모두 undefined로 초기화 됩니다.

 

typeof undefined           // undefined
typeof null                // object

null === undefined         // false
null == undefined          // true

다음에 대한 결과를 확인해보면 둘의 차이를 보다 확실하게 이해할 수 있을 것입니다.

 

 

'Web Basic > JavaScript' 카테고리의 다른 글

자바스크립트 문자열(String)  (0) 2020.07.27
자바스크립트 이벤트(Event)  (0) 2020.07.27
자바스크립트 객체(Object)  (2) 2020.07.27
자바스크립트 함수(Function)  (2) 2020.07.27
JavaScript 개요  (0) 2020.07.27

티스토리툴바