article thumbnail image
Published 2022. 11. 6. 17:02

DAY 01 : JavaScript, 변수, 데이터타입, 형변환, ..

국비/JavaScript

자바 스크립트의 역사

 

- Netscape 

내비게이터 브라우저이다.

브랜든 아이크 (Brendan Eich) 영입으로 10일 만에 모카라는 언어로 내비게이터에 적용했다. (인터프리터 사용)

자바스크립트는 처음엔 모카라는 이름으로 나중에는 라이브 스크립트에서 자바스크립트로 이름이 변경되었다.

 

- jQuery

과거 브라우저 및 특정 브라우저 버전 등을 모두 사용할 수 있도록 해주는 라이브러리이다.

단점으로는 jQuery 문법을 따로 공부해야한다는 것이다.

 

- V8 자바 스크립트 엔진

2008년 구글에서 크롬의 베타전과 함께 v8엔진을 소개하였다.

 

- ECMA 

스크립트를 표준화

 

- 트랜스 컴파일러

BABEL : 과거 브라우저 및 특정 브라우저 버전 등을 모두 사용할 수 있도록 하는 라이브러리이다.

이 때문에 jQuery를 전만큼 사용하지 않게 되었다.

 

 

- 자바 스크립트 종류

순수 자바스크립트는 "바닐라"라고 한다.

react, vue, angular의 경우 SPA(Single Page Application 구현을 위한 라이브 러리이다.

node.js는 2009년 라이언 달이 발표한 자바스크립트 런타임 환경을 의미한다.

TypeScript는 자바 스크립트에 Type을 추가한 스크립트이며, 자바스크립트를 보안한 스크립트이자 프레임 워크이다.

 

- 자바스크립트

객체 기반의 스크립트 언어이다. 

대소문자를 구별한다.

세미콜론을 생략해도 상관없다.

 

 

- 자바스크립트의 출력

Web API Console API를 통해 브라우저 console 창에 출력된다.

  1. HTML 문서 내에서 <script> 태그 안에서 작성
  2. . js (자바스크립트 파일) 안에서 작성

 

- 자바 스크립트의 실행 순서

 인터프리터 방식임으로 위에서 아래로 실행된다.

 

   1) HTML 시작 -> <head>  ->  <script> 다운로드 / 실행 -> HTML 끝
         script 파일 다운로드가 늦을 경우, HTML이 실행되지 않은 상태에서 빈 화면이 보일 수 있음

    2) HTML 시작 -> <body> 끝에 <script> 다운로드/ 실행 -> HTML 끝

    3) HTML 시작 ->  <head>  ->  <script asyn> 다운로드 / 실행 -> HTML 끝
         HTML이 시작되고 script파일을 동시에 다운로드/실행 가능
        script파일이 여러 개 있을 경우 먼저 다운로드된  script파일을 실행하게 된다.
        
    4) HTML 시작 -> <head> ->  <script defer> 다운로드 / 실행 -> HTML 끝
        HTML이 시작되고 script파일을 동시에 다운로드/실행 가능
        script 실행은 페이지 구성이 끝날 때까지 제외
        script 순서에 따라 실행한다.

 

- 변수 (Variable)

데이터를 저장할 수 있는 메모리 공간이다.

값이 변경될 수 있다,

자바스크립트의 변수는 타입이 없다.

let 키워드를 사용하여 변수를 선언한다.

 

let 변수명;

 

✔️ var

유연한 변수 방식이다.

지역변수와 전역 변수의 구별이 없다. 

같은 이름의 변수를 선언할 수 있다.

하지만 호이스팅 때문에 잘 사용하지 않는다.

 

 

- 상수 ( const)

한번 선언된 상수는 다시 재정의할 수 없다,

값을 재할당 할 수 없다.

const 상수명 = 값;

 

 

✔️ 자바 스크립트에서 상수 사용을 권장하는 이유

  1. 해킹을 방지하기 위해서
  2. 개발자 실수를 방지하기 위해서 

 

 

 

변수와 상수 사용해보기!

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트</title>
    <script defer src="./1_변수.js"></script>
    <script defer src ="./2_상수.js"><script>
</head>
<body>
    
</body>
</html>

html이 있어야 console.log로 찍은 결과를 볼수 있기 때문에 스크립트태그로 js 파일을 연동해서 확인한다.

변수.js 하고 그다음에는 주석처리 후 상수.js 를 확인 하였다.

 

 

변수.js

var num;  
num = 10;

console.log(num);

str = '안녕';
console.log(str);
var str = '반가워';
console.log(str);

console.log('------------------------')

{
    console.log(num)
    var num2 = 20;
    console.log(num2);
    var num = 30;
    console.log(num)
}

console.log('------------------------')

console.log (num2);
console.log (num);

console.log('------------------------')

let val = 10;
console.log(val);

// let val = 20;
{
    console.log(val);
    let val2 = 20;
    console.log(val2);
}

위 코드의 결과

 

상수.js

//const str ;
//str = '김사과';

// 상수의 경우 바로 초기화를 해주어야하기 때문에 위에 같은 상황은 불가능하다.

const str = '김사과';   

console.log(str);

//str = '반하나';
// 상수는 값을 재할당할 수 없기 때문에 불가능

const obj = {id: 'apple', name:'김사과'};
obj.id = 'banana';
obj.name = '반하나';
console.log(obj.id);
console.log(obj.name);

위 코드의 결과

 

 

- 자바 스크립트의 데이터 타입

프로그램에서 다룰 수 있는 값의 종류이다.

자바스크립트는 선언 시 타입을 정하지 않기 때문에 많은 문제가 발생한다.

자바 스크립트의 타입 유연성을 해결하기 위해 타입 스크립트가 탄생했다.

 

타입 의미
number 정수와 실수를 따로 구분하지 않는다.
모든 수를 실수 하나로만 표현한다.
string ' ' 또는 " " 또는 ` `로 둘러싸인 문자의 집합
boolean 참(true)과 거짓(false)으로 표현되는 값이다.
거짓으로 판정 : false, 0 , ' ', " ", null, undefined 
undefined / null undefined : 타입이 정해지지 않은 경우를 의미한다.
ex) 선언은 하고 값을 대입하지 않은경우
     let num;

null : null 을 저장한 값, 값이 없다.
ex) let num = null;
symbol 유일하고 변경 불가능한 기본값을 만든다.
객체 속성의 key로 사용된다.

            const sym1 = Symbol('Apple');
            const sym2 = Symbol('Apple');

            sym1 === sym2        // 형과 값이 같은지 비교
            sym1 == sym2        // 값이 같은지 비교

-> 둘다 다르다고 결과값이 나오며, 심볼형을 사용하면 고유한 헥사값에 저장되기 때문
Object 어떤 속성을 하나의 변수에 저장할 수 있게 해주는 집합
key value pair 구조로 저장

 let user = {'userid' : 'apple', 'name':'김사과', 'age': 20};
                 ----------   ----------
                   key          value

 

✔️ 자바스크립트의 변수는 타입이 고정되어 있지 않으며 같은 변수에 다른 타입의 값을 대입할 수 있다.

 

 

 

 

데이터 타입 확인해보기!

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트</title>
    <!-- <script defer src="./1_변수.js"></script> -->
    <!-- <script defer src="./2_상수.js"></script> -->
    <script defer src="./3_데이터타입.js"></script>
    <!-- <script src="./4_타입변화.js"></script> -->
</head>
<body>
    
</body>
</html>

 

 

데이터타입.js

 

number 형

//  number형
const num1 = 10;
const num2  = 11.11;
const num3 = 10e6;

console.log(num1);
console.log(num2);
console.log(num3);

console.log('------------------');

console.log(typeof num1);
console.log(typeof(num2));
console.log(typeof(num3));

console.log('--------------------')

위 코드의 결과

 

string 형

// string 형
const num4 = 10;
const num5 = 5;
const str1 = 'Hello JavaScript';
const str2 = 'Hello world!';
const str3 = '10';

console.log(num4 + num5);
console.log(num4 + str1);
console.log(str1 + " " + str2);
console.log(`자바스크립트에서는 문자열을 
쌍따옴표 또는 따옴표로 둘러싸인
문자의 집합을 의미한다.`);

console.log(`str1 : ${str1}, str2 : ${str2}`);

console.log(num4 + str3);
console.log(num4 - str3);   // 자동형변환
console.log(num4 * str3);   // 자동형변환
console.log(num4 / str3);   // 자동형변환

위 코드의 결과

 

논리형

// 논리형
const b1 = true;
const b2 = false;
const b3 = (10 > 5);
const b4 = (10 < 3);

console.log(b1)
console.log(b2)
console.log(b3)
console.log(b4)

위 코드의 결과

 

 

undefined , null

// undefined, null
let num;
console.log(num);
console.log(typeof num)

let obj1 = {};
console.log(obj1);
console.log(typeof obj1)

let obj2 = null;
console.log(obj2);
console.log(typeof obj2);

위 코드의 결과

 

심볼형, 객체형

// 심볼형
const sym1 = Symbol('apple');
const sym2 = Symbol('apple');

console.log(sym1);
console.log(sym2);

console.log(sym1 === sym2);
console.log(sym1 == sym2);

const sym3 = Symbol('banana');
const sym4 = sym3;
console.log(sym3 == sym4);

// 객체형
const apple = {
    'name' : "김사과",
    'age' : 20,
    'address' : '서울 서초구 역삼동'
};

console.log(apple);
console.log(apple.name);
console.log(apple.age);
console.log(apple.address);

apple.age = 21;

console.log(`2022년 김사과의 나이는 ${apple.age}살 입니다.`)

 

위 코드의 결과

 

 - 자동 타입 변환

특정 타입의 값이 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용한다. 

            const a = '10';
            const b = '20';
            let result = a+b;   // 1020
            result = a - b;     // -10
            result = a * b;     // 200
            ...
            const c = '삼십;
            result = c - a;     //NaN



    ✔ NaN (Not a Number) 
        정의되지 않은 값이나 표현할 수 없는 값이라는 의미이다
        숫자로 변환할 수 없는 연산을 시도했을 경우   
    


- 타입 변환 함수
   강제로 타입을 변환

            const a = '10';
            const b = '20';
            let result = a+b;   // 1020
            result = Number(a) + Number(b);

 

 

함수 의미
Number() 문자를 숫자로 변환
String() 숫자나 불린등을 문자형으로 변환
Boolean() 문자나 숫자등을 불린형을 변환

            boolean('kim')      // true
            boolean(null)       // false
Object() 모든 자료형을 객체형으로 변환
            let str = 'a';
            result = Object(str);       // {a}
ParseInt() 문자를 int형으로 변환
ParseFloat() 문자를 float형으로 변환




 

타입 변환 함수 사용해보기!

// 자동형변환
const a = 10 + '문자열';
console.log(a);

const b = '3' * '5';
console.log(b);

const c = 1-'문자열';
console.log(c);

// 타입변환 함수
const num1 = '10';
const num2 = '5';

console.log(`현재 num1의 타입 : ${typeof num1}`)
console.log(`num1 + num2 = ${num1+num2}`)
console.log(typeof(num1+num2))
console.log(`Number(num1) +  Number(num2) = ${Number(num1) + Number(num2)}`)
console.log(`parseInt(num1) + parseInt(num2) = ${parseInt(num1) + parseInt(num2)}`)
console.log(`boolean(num1) : ${Boolean(num1)} `)
console.log(`Object(num1) : ${Object(num1)} `)

위 코드의 결과

 

저작자표시

'국비 > JavaScript' 카테고리의 다른 글

DAY 04 : history 객체, navigator객체, DOM, 노드, 정규 표현식  (0) 2022.11.14
DAY 03 - 1 : 화살표 함수, 객체, 상속  (0) 2022.11.14
DAY 02 -2 : 배열, 향상된 for문, 호이스팅, 함수  (0) 2022.11.14
DAY 02 - 1 : 대화상자, 연산자, 제어문(조건문, 반복문)  (0) 2022.11.07
복사했습니다!

티스토리툴바