자바 스크립트 자료형

Javascript 2023. 5. 4. 12:45

자료형이란 - 컴퓨터가 처리하는 자료에 형태

숫자형

1. 정수 - 소수점이 없는 숫자, 표현 방법에 따라 8진수, 10진수, 16진수

2. 실수 - 소수점이 있는 숫자, (! 자바스크립트에서는 정밀한 실수 계산을 못 함)

0.1 + 0.5

0.1 + 0.2

부동소수점 방식으로 숫자를 표현하는 이진법의 한계 때문에 발생하는 문제입니다.
부동소수점 방식은 소수점 위치가 고정되어 있지 않고, 이진법으로 숫자를 표현하기 때문에 무한 소수의 경우 근사값으로 표현되어 오차가 발생할 수 있습니다.

무한 소수(infinite decimal)란, 소수점 이하의 자리수가 무한히 반복되는 소수를 말합니다. 예를 들어, 1/3을 소수로 나타내면 0.3333...과 같이 소수점 이하가 무한히 반복됩니다. 이러한 소수는 유한한 자리수로 정확히 표현할 수 없기 때문에, 근사값으로 표현하거나, 무한 반복되는 자리수를 생략하여 유한한 자리수로 표현해야 합니다.

<!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>Document</title>
</head>
<body>
    <script>
        // 한줄
        /*여러줄 주석*/
        let result = (0.1 + 0.2).toFixed(1);
        console.log(result);
    </script>
</body>
</html>

toFixed 를 써서 소수 자리수까지 잘라내서 표현할 수있다.

문자형 - 홒따옴표, 쌍따옴표로 표기를 한다.

논리형 - true, false

undefine - 자료형이 정의되지 않았을 때 ex) let age;

null - 처음에 할당된 값이 더 이상 유효하지 않다는 의미

<!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>Document</title>
</head>
<body>
    <script>
        let first;
        console.log(first);
        let second = 100;
        console.log(second);
        second = null;
        console.log(second);
    </script>
</body>
</html>

배열 - 하나의 변수에 여러 값을 저장, 인덱스 0부터 시작, 표기는 대괄호 [ ] 로 사용한다.

<!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>Document</title>
</head>
<body>
    <script>
       let store = ["바지","상의",100, true];
       console.log(store);
       console.log(store[3]);
       console.log(store[2]);
       console.log(store[1]);
       console.log(store[100]);
    </script>
</body>
</html>

객체 - 여러 자료형을 중괄호 {}로 묶는 것 , 키(key), 값(value)을 한 쌍으로 여러 자료형을 저장한다.

객체 리터럴 - 오른쪽에 표기되는것

<!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>Document</title>
</head>
<body>
    <script>
        let student = {
            fistName : "홍아",
            lastName : "항아",
            age : 30,
            address : "부산"
        };
        console.log(typeof student);
        console.log(student.fistName);
    </script>
</body>
</html>

자바스크립트 자료형의 특징
느슨한 자료형 체크(weak datatype check) 자바스크립트는 미리 변수의 자료형을 지정하지 않음 변수를 지정하고 원하는 값을 할당만 하면 됨

함수 선언(함수정의)

function 예역어를 사용하고, {}안에 실행해야 할 명령어를 작성

함수 호출( 함수 실행)

함수 이름을 사용해서 함수를 실행

함수 선언은 어디에 두어야 할까.

addNumber();

function addNumber{
...
}

addNumber();

주의
함수 호출 시 HTML 요소 중 렌더링이 완료 되기 전에 호출하는 코드를 실행 한다면 요소를 찾을 수 없어 오류가 발생 합니다.

let 과 const

let - 프로그램 안에 값이 변할 수 있는 변수

const - 프로그램 안에서 값이 변하지 않는 변수

변수의 스코프

호이스팅 없음

호이스팅이란 해당 스코프의 최상단으로 함수,변수가 끌어올려진것 같은 현상을 말한다.

변수의 재선언 불가 - 같은 스코프 안에 같은 변수를 다시 선언할 수 없음.

매개변수(parameter) 와 인수(argument) 차이점

매개변수
- 함수를 실행하기 위해 필요하다고 지정하는 값
- 함수를 선언할 때 함수 이름 옆의 괄호 안에 매개변수 이름을 넣음
function addNumber(a, b){
let sum = a +b;
return sum;
}
인수 (argument)
- 함수를 실행하기 위해 필요하다고 지정하는 값
-함수를 실행할 때 매개변수로 넘겨 주는 값
addNumber(19, 10);

익명 함수

이름이 없는 함수
함수 자체가 식(Expression) 이기 때문에 함수를 변수에 할당하거나 함수의 매개변수로
사용 할 수도 있음 (일급 객체)

<!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>Document</title>
</head>

<body>
    <script>
        let add = function (a, b) {
            return a + b;
        }
        console.log(add); // add는 함수 자체가 식(표현식)이다.
        console.log(add(10, 10));  // 함수 호출은 괄호 + 모양 맞추기
        console.log(add(20, 10));
        console.log(add(30, 10));
        console.log(add(15, 10));
    </script>
</body>
</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>Document</title>
</head>

<body>
    <script>
        // 즉시 실행 함수
        let result2 = (function(){
            return 10 + 10;
        })();
        // console.log(result2);
        // 즉시 함수가 실행 되었기 때문에 result2 함수식이 아니라 변수에 값이 담긴 상태
    </script>
</body>
</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>Document</title>
</head>

<body>
    <script>
        // 즉시 실행 함수 : 매개변수와 
        // 인수를 사용하는 코드를 작성하시오.
        
        const result = (function(a,b){
            return a + b
        }
            )(100,200);
        console.log(result);

    
    </script>
</body>
</html>

화살표 함수

ES6 이후 버전에서 -> 표기법을 사용해서 함수 선언을 간단하게 작성

<!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>Document</title>
</head>
<body>
    <script>
        const hi = function(){
            return "반가워";
        }
        console.log(hi);
        console.log(hi());
        console.log("---------------");
        const hi2 = () => {return "야 반가워"};
        console.log(hi2);
        console.log(hi2());
        console.log("-------------");
        /*
        화살표 함수를 사용할 때 리턴 키워드에 생략 여부
        const hi2 = () => {return "야 반가워"}
        const hi2 = () => "야 반가워";
        let sum = (a ,b) => {return a + b}
        let sum = (a ,b) =>  a + b
        */

        const hi3 = () => {return "안녕하세요"};
        const hi4 = () => "안녕하세요";
        console.log(hi3());
        console.log(hi4());
        let sum = (a, b) => {return 20 + 10}
        console.log(sum());
        let sum2 = (a, b) => a + b;
        console.log(sum2());
    </script>
</body>
</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>Document</title>
    <style>
        .container{
            position: relative;
            width: 200px;
            height: 300px;
        }
        .btn{
            position: absolute;
            bottom: 10px;
            left: 80px;
            background-color: rgba(255, 255, 255, 0.5);
            border: 100px;
            color: #000;
            font-size: 16px;;
        }

    </style>
</head>
<body>

    <div class="container">
        <img src="https://picsum.photos/id/237/200/300" alt="">
        <button onclick="showDetail()" class="btn">상세보기열기</button>
        <br>
        <div id="desc" style="display: none;">
            <h1>귀염뽀짝 강아지</h1>
            <div>귀염 귀염</div>
            <button onclick="hideDetail()">상세보기닫기</button>    
        </div>
    </div>
        <script>
            // 함수 1
            function showDetail(){
                document.querySelector("#desc").style.display = "block";
                document.querySelector(".btn").style.display = "none";
            }
            // 함수 2
            function hideDetail(){
                document.querySelector("#desc").style.display = "none";
                document.querySelector(".btn").style.display = "block";
            }

        </script>

</body>
</html>

'Javascript' 카테고리의 다른 글

JQuery (0)	2023.05.08
반복문 리스트, 토글 기능, 제이쿼리 (0)	2023.05.08
2023-05-08 복습 (0)	2023.05.08
자바스크립트 객체 (0)	2023.05.04
자바스크립트 규칙 (0)	2023.05.04

ABOUT ME

림이의 개발일지 림이의 개발일지

'Javascript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'Javascript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바