Search

반응형

'Software/JavaScript'에 해당되는 글 38건

  1. 2022.05.24 [자바스크립트] 리터럴(literal) 쉽게 이해하기 편. with javascript 1
  2. 2022.04.25 [초보코딩]자바스크립트 사용하기 편. -Javascript
반응형

안녕하세요. 신기한 연구소입니다.

자바스크립트(javascript)를 공부하면 초반에 만나게 되는 용어가 있습니다.

바로 리터럴인데요. (literal)

책의 설명을 읽어도 처음에는 이해가 잘 안 가더군요.

정확히 무엇을 가지고 리터럴이라고 하는지 쉽게 이해가 되도록 설명해보겠습니다.

 

흰 티에 청바지를 입은 어떤 사람(변수)이 있습니다.

직업이 무엇인지 추측이 가나요? 학생인가? 명확하지 않습니다. 

그냥 어떤 사람입니다. (undefined)

이제 그 사람이 피팅룸에 들어가서 경찰 제복을 입고 나왔습니다.

직업이 무엇인지 추측이 됩니다. 경찰이겠지요.

경찰 제복, 경찰근무복을 입고 있으면 경찰임을 알게 되고,

축구선수 복장을 하고 있으면 축구선수임을 알게 됩니다.

어떤 옷을 입냐에 따라 직업을 판단할 수 있게 되었습니다.

이때 종류별 옷이 바로 리터럴입니다.

경찰 리터럴은 경찰제복, 경찰 근무복이 되겠지요.

군인들이 입는 군복은 경찰 리터럴이 아닙니다.

군인 리터럴이겠지요.

 

리터럴 기준에서 변수를 본다면

리터럴은 변수의 형(type)을 정하는 능력이 있습니다.

 

위키백과를 보면 '컴퓨터 과학 분야에서 리터럴이란 소스 코드의 고정된 값을 대표하는 용어'라고 되어 있습니다.

고정된 값을 대표한다는 의미는 변수의 형(type)을 의미한다고 볼 수 있습니다.

자바스크립트에서 리터럴의 종류는 어떤 것이 있을까요?

 

배열 리터럴, 불리언 리터럴, 숫자 리터럴, 부동 소수점 리터럴, 문자열 리터럴, 정규식 리터럴, 객체 리터럴이 있습니다.

 

var myVar;

 

자바스크립트 변수가 여기 있습니다.

여러분이 보기에 myVar는 어떤 형(타입) 같나요?

정답은 알 수 없습니다.

값이 할당되어 초기화가 되면 어떤 형(타입)인지 확실해질 겁니다.

만약 불리언 타입으로 지정하고 싶다고 가정해 봅니다.

 

myVar = 'boolean';

 

문자열 'boolean' 값을 myVar에 할당했습니다.

불리언 타입으로 지정하고 싶었지만 초기화 값으로 문자열 리터럴을 사용했네요.

그럼 myVar는 문자열 리터럴을 사용했기에 불리언 타입이 될 수 없습니다.

정말 불리언 타입으로 만들고 싶었다면...

불리언 리터럴인 true나 false로 초기화(할당)했어야 하거든요.

 

배열 리터럴에 대해 잠깐 살펴보겠습니다.

 

var myArr;

 

우선 myArr를 선언했습니다. 당연히 값이 할당이 안되었기에 형(타입)을 알 수 없습니다.

Arr이라는 이름에 걸맞게 배열로 초기화해보겠습니다.

배열로 초기화하기 위해서는 배열 리터럴을 사용해야 합니다.

우선 자바스크립트에서 배열은 [ ]를 사용합니다.

그리고 [ 와 ] 사이에 , (컴마)를 기준으로 값을 할당하면 됩니다.

값은 문자열, 숫자 등 원하는 값을 넣으면 됩니다.

 

myArr = ['a', 'b', 'c'];

 

할당을 했습니다. 그런데 값을 보니 문자(열)로 초기화를 했군요.

그럼 문자열 리터럴로 myArr은 문자형이 된 걸까요?

아닙니다. 문자들은 , (컴마)로 구분되고 [ ] 안에 갇혀 있습니다.

[ ]와 , (컴마)가 바로 배열 리터럴의 핵심입니다.

이런 형식으로 초기화를 하는 값을 배열 리터럴이라고 합니다.

 

myArr = ['a', , 'c];

 

이 또한 배열 리터럴로 초기화를 해서 myArr를 배열 타입으로 만들었습니다.

그런데 중간이 비어있군요.

배열 초기화 시 빈 형태의 값을 넣을 수 있습니다.

그럼 myArr[0], myArr[1], myArr[2]는 어떤 값이 나올까요?

배열 []의 숫자는 배열 인덱스(index)라고 하고 해당 위치를 말합니다.

첫 번째 인덱스는 0으로 1씩 증가하게 됩니다.

myArr[0]은 배열의 첫 번째 값으로 'a'입니다.

myArr[1]은 배열의 두 번째 값인데 비어 있기에 변수 선언 때처럼 undefined값이 들어갑니다.

myArr[2]은 배열의 세 번째 값으로 'c'입니다.

myArr[3]은 존재하지 않기에 오류가 납니다.

 

지금까지 리터럴이 무엇인지에 대해 알아봤습니다.

이해가 되셨나요?

누군가 리터럴에 대해 묻거나 이해하기 힘들어한다면

여러분이 도와주시면 됩니다.

 

다음 포스팅에서는 각 리터럴의 범위에 대해 자세히 알아보겠습니다.

어떤 값을 넣어야 해당 리터럴이 되는지 같이 살펴보도록 해요.

 

반응형
반응형

안녕하세요. 신기한 연구소입니다.

자바스크립트는 보통 HTML 내에서 사용하는데요.

그렇다면 HTML 내에서 어떻게 사용할까요?

바로 <script> 요소를 사용하는 것입니다.

공식 HTML 명세에 추가된 <script>는 여섯 가지 속성이 있는데

같이 살펴보겠습니다.

 

src

HTML 내에 직접 스크립트를 작성하지 않고. js 별도의 스크립트 파일로 저장한 뒤 그 경로를 지정할 때 사용합니다.

type

language 속성을 지정할 때 사용하는데 보통 text/javascript를 사용합니다.

하지만 생략해도 되는데 이유는 기본값이 바로 text/javascript이기 때문입니다.

 

async 

외부 스크립트 파일을 불려올 때 유용합니다. 하지만 자원 내려받기, 다른 스크립트 불러오기 등 다른 작업을 방해하지 않는 선에서 즉시 스크립트를 내려받도록 합니다. 즉 파싱 중에도 스크립트를 실행하게 됩니다.

 

defer

src를 사용해서 외부 스크립트 파일을 불러올 때 유효하고 브라우저가 페이지를 파싱하고 나면 실행하게 합니다.

 

charset 

코드의 문자셋을 지정하지만 브라우저는 보통 무시하므로 사용하지 않아도 됩니다.

 

language

 대부분 브라우저에서 무시하기 때문에 사용하지 않습니다.

 

자바스크립트는 HTML 문서 내에서 사용하거나 외부 js 파일을 불러와서 사용하는 두가지 방법이 있습니다.

 

내부 HTML에서 사용하는 예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <head>
        <script>
            var a = 1//전역 지역의 전역변수
 
            function funcA() {  //전역 지역의 전역 함수
                a = 3;
                console.log(a);
                return 2;
            }
            
            function funcB() {  //전역 지역의 전역 함수
                var b = 4;    
                console.log(funcA());
                console.log(b);
                console.log(a);
                return 2;
            }
        </script>
    </head>
    <body>
       Hello~
    </body>
</html>
cs

 

외부 js 파일 불러오는 예시

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
        <script src="./jsbook/logi.js"></script>
 
    </head>
    <body>
       Hello~
    </body>
</html>
cs

 

js 파일을 작성할 때 주의점은 js파일 내에서는 <script></script> 를 넣으면 안 됩니다.

오직 HTML 파일에서만 <script> 요소를 사용해야 합니다.

이 src는 막강한 기능이 있는데 바로 같은 서버에 위치한 js 파일뿐만 아니라

다른 도메인에 있는 js 파일도 가져올 수 있다는 겁니다.

<script src=’http://www.aaa.com/abc/sample.js’></script>

하지만 외부에 있기에 신뢰할 수 있는 경우에만 사용해야 합니다.

스크립트 순서대로 해석을 한다는 점을 꼭 기억해야 합니다.

반응형