[ JavaScript 총정리 1 ] 시작하기, Variable types

Yura·2022년 3월 15일

JavaScript_Basic

목록 보기

17/28

Js 파일 연결하기

Index.html 파일의 <head> 영역에 다음과 같이 js 파일을 연결해준다.

    <script defer src="function.js"></script>

옵션 : async / defer

사용자가 html 파일을 다운로드 받았을 때 브라우저가 HTML을 한줄씩 읽으며 CSS와 병합하여 DOM 요소로 변환하게 된다. 이 때 <script> 태그가 보이면 html 읽기를 멈추고, Js를 서버에서 다운받아 실행한 다음 다시 html 읽기를 시작한다. 만약 Js파일이 엄청 크다면 실행되는 시간이 오래걸려 사용자가 화면을 보는데 시간이 오래 걸리게 된다.

이 때문에 <body> 태그 맨 마지막에 넣어 DOM 구성이 끝난 다음 Js를 실행하게 하는 경우도 있다. 하지만 만약 페이지가 Js 의존도가 높다면, 사용자가 의미있는 컨텐츠를 보기 위해서 똑같이 로딩 시간이 오래 걸리게 된다.

async : 병렬로 Js를 다운받자라고 명령! 다운이 끝나면 html parsing을 멈추고 js를 실행한 후 다시 html을 parsing 한다. 여전히 시간이 조금 더 걸린다는 단점이 있음.

defer : 병렬로 Js를 다운받는 점은 같지만, html parsing을 끝까지 완료한 후에 Js를 실행한다.

'use strict';

JavaScript는 Brendon Eich 가 굉장히 빠른 시간에 만들어낸 유연한 언어이다. 때문에 호출을 하고 변수 선언을 해도 정상적으로 작동이 되는 등 실수에 대한 에러를 잡아주지 않는다. 이를 해결하기 위해 'use strict'; 를 문서 처음에 작성하여 에러를 엄격히 잡아주도록 하자..!

Variable

Variable(변수)는 let과 const를 사용하며, let은 값의 재할당이 가능하고 const는 처음부터 상수(변경할 수 없는 값)만 사용 가능하다. (const = immutable data types)

var는 어디에 선언했는가와 상관없이 맨 위로 끌어올려지는 var hoising 이 작동되기 때문에 사용하지 말 것! 지역변수, 전역변수에 상관없이 작동한다.

Variable type

Primitive type : number / string / boolean / null / undefined / symbol

    let name = 'yura';
    let age = 20;

0bject type : box container

    let yura = {
  					name = 'yura',
  					age = 20, 
  				}

function

    let class = function(){
  					console.log('print');
  				};

Variable - Primitive type

number (숫자)

Infinity (무한의 숫자)
-Infinity
NaN (not a number)

<script>
    const infinity = 1 / 0;
    const negativeInfinity = -1 / 0;
    const nAn = 'not a number' / 2;
  
    console.log(infinity);  //infinity 
    console.log(negativeInfinity);  //-Infinity 
    console.log(nAn);  //NaN
</script>

string (문자)

<script>
    const char = 'c';
    const brendan = 'brendan';
    const greeting = 'hello ' + brendan;
    console.log(`value: ${greeting}, type:${typeof greeting}`);  //value: hello brendan type: string
  
    const helloBob = `hi ${brendan}!`;
    console.log(`value: ${helloBob}, type: ${typeof helloBob}`);  //value: hi brendan type: string 
</script>

boolean (참/거짓)

false : 0 / null / undefined / NaN / ''

<script>
    const canRead = true;
    const test = 3 < 1; //flase
    console.log(`value: ${canRead}, type: ${typeof canRead}`); //value: true, type: boolean 
    console.log(`value: ${test}, type: ${typeof test}`);  //value: flase, type: boolean 
</script>

null

<script>
    let nothing = null;
    console.log(`value: ${nothing}, type: ${nothing}`); //value: null, type: null 
</script>

undefined

<script>
    let x = undefined; //let x; 와 같음 
    console.log(`value: ${x}, type: ${x}`); //value: undefined, typd: undefined
</script>

symbol

<script>
    const symbol1 = Symbol('id');
    const symbol2 = Symbol('id');
    console.log(symbol1 === symbol2); //false : 두 변수는 레포가 다르니까 
  
    const gSymbol1 = Symbol.for('id');
    const gSymbol2 = Symbol.for('id');
    console.log(gSymbol1 === gSymbol2); //true
    console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`);  //value: id, type: symbol
</script>