변수와 자료형

oYJo·2024년 12월 27일
JavaScript

JavaScript

목록 보기
4/52
post-thumbnail

변수 선언 위치에 따른 구분

style 태그

<style>
  #typeBox{
  border: 2px solid black;
  width: 500px;
  height: 400px;
  }
</style>

script 태그

외부 js 파일과 연결하는 태그

<!-- external 방식 JS 파일 연결 -->
<script src="js/04_변수와자료형.js"></script>
var str = "JS 코드를 함수 내부가 아닌"
        + " JS파일 또는 script 태그 밑에 바로 작성하면"
        + "HTML 랜더링 시 바로 수행된다."
console.log(str);

// 변수 선언 위치에 따른 구분
var num1 = 10; // 전역변수
num2 =20; // 전역변수

var num1 = 20;


console.log("num1 : " + num1);
console.log("num2 : " + num2);

function test(){
    console.log(num2);

    var num3 = 3; // function의 지역변수
    num4 = 4; // 전역변수

    if(true){ // if문 무조건 수행
        var num5 = 5; // function 지역변수(괄호 밖에서도 사용했기 때문에)
        num6 = 6; // 전역변수
    }

    console.log("num5 : " + num5);
}

test();

//console.log("num3 : " + num3); // error(지역변수)
console.log("num4 : " + num4); // function 종료 후에도 사용 가능

// console.log("num5 : " + num5); // error(지역변수)
console.log("num6 : " + num6); //function 내부 if 문 종료 후에도 사용 가능

// 자료형 확인
function typeTest(){
    const typeBox = document.getElementById("typeBox");

    let temp; // 선언 후 값을 초기화하지 않았음 == undefined

    typeBox.innerHTML = "temp: " + temp;

    // string
    const name ="김민석";

    // typeof 변수명 : 해당 변수의 자료형을 검사하는 연산자
    typeBox.innerHTML += "<br>name : " + name + " / " + typeof name;

    const gender = 'm';
    typeBox.innerHTML += "<br> gender: " + gender + " / " + typeof gender;
    // 자바스크립트는 char 자료형이 존재하지 않는다.
    // "" '' 모두 string 리터럴 표기법

    // number
    const age =20;
    const height = 178.3;

    typeBox.innerHTML += "<br> age: " + age + " / " + typeof age;
    typeBox.innerHTML += "<br> height: " + height + " / " + typeof height;
    
    // boolean
    const isTrue =true;
    typeBox.innerHTML += "<br> isTrue: " + isTrue + " / " + typeof isTrue;

    // object

    // java ({사용})
    // int[] arr = {1,2,3,4,5}; 
    
    // javascript ([]사용)
    const arr = [10,30,50,70];
    typeBox.innerHTML += "<br> arr: " + arr + " / " + typeof arr;

    for(let i =0; i<arr.length; i++) {
        typeBox.innerHTML +="<br>arr[" + i +"] :" + arr[i] + " / " + typeof arr;
    }

    // 자바스크립트 객체는 K:V(Map 형식)
    const user = {"id":"user01", "pw":"pass01"};

    typeBox.innerHTML += "<br>user : " + user + " / " + typeof user;

    // 객체 내용 출력 방법1
    typeBox.innerHTML += "<br>user.id : " + user.id;
    typeBox.innerHTML += "<br>user.pw : " + user.pw;

    // 객체 내용 출력 방법2 (객체 전용 for문 for...in)
    for(let key in user){
        // user객체의 키(id, pw)를 반복할 때마다 하나씩 얻어와 key 변수에 저장
        typeBox.innerHTML += "<br>user[" + key + "] : " + user[key];
    }
 
    console.log(user); // 콘솔 출력 시 보기 더 좋음

    // function(함수도 자료형)

    // 1) 변수명 == 함수명
    const sumFn = function(n1, n2) { // 익명함수
        return n1 + n2
    }

    // 함수명만 작성한 경우 -> 함수에 작성된 코드가 출력됨
    typeBox.innerHTML += "<br>sumFn: " + sumFn + " / " + typeof sumFn;
    
    // 함수명() 괄호를 포함해 작성한 경우 -> 함수 호출(수행)
    typeBox.innerHTML += "<br>sumFn(10,20): " + sumFn(10,40);

    typeBox.innerHTML += "<br>tempFn(30,sumFn): " + tempFn(30, sumFn);
}
function tempFn(n3,fn){
    return n3+fn(10,20);
}

Java

<h4>Java</h4>
<pre>
	public class Student{

    	// 필드 (멤버변수)
    	private String name; // 인스턴스 변수
    	public static String schoolName; // 클래스 변수, static변수

    	// 메소드
    	public setName(String name <!-- 메소드 지역 변수 -->){
        	this.name = name;
        	int num = 10; // 메소드 지역 04_변수와자료형

        	if(){
            	int a = 20; // if 지역 변수
        	}
    	}
	}
</pre>

Javascript

<h4>Javascript</h4>
        
<pre>
    (JS 파일)
    var num1; // 전역변수 (선언된 후 같은 문서 내 어디서든 사용 가능)
    num2;     // 전역변수 (변수명 앞에 키워드가 없으면 전역변수가 된다.)

    function test() {

        var num3; // function 지역 변수 
        num4; // 전역변수 (변수명 앞에 아무 키워드도 없으면 전역변수가 된다.) 

        if(조건식){

        	var num5; // function 지역변수 (밖에다가 num5 선언해버림)
        	num6; // 전역변수 (변수명 앞에 아무 키워드도 없으면 전역변수가 된다.)

    	}

        num5;
    }
</pre>

<script>
  console.log("[script 태그 내부]")
  console.log("num1 : " + num1);
  console.log("num2 : " + num2);
</script>

변수 선언 방식

var : 변수, 변수명 중복 O(덮어쓰기), 함수 레벨 scope
let : 변수, 변수명 중복 X, 블록 레벨{} scope
const : 상수, 변수명 중복 X, 블록 레벨{} scope

1순위 : const
(JS는 특정 요소를 선택해서 사용하는 경우가 많아서 상수에 고정시켜둠)
2순위 : let
3순위 : var (EX6 이후부터 사용 빈도가 적어짐)

자바스크립트의 자료형

자바스크립트는 변수 선언 시 별도의 자료형을 지정하지 않음
→ 변수에 대입되는 값(리터럴)에 의해 자료형이 결정됨

  • string (문자열)
  • number (숫자) → 정수 / 실수 모두 포함
  • boolean (논리값)
  • object (객체) → 배열(Array), 자바스크립트 객체{k:v, k:v}
  • function (함수)
  • undefined (정의되지 않은 변수) → 변수가 선언만되고, 값이 대입되지 않은 경우

(참고)
null (참조하는 게 없음)
→ document.getElementById("오타") → 가장 흔한 경우
→ id가 일치하는 경우가 없어서 참조할 수 없다
(null은 타입보다는 값(리터럴)의 개념)

<h1>자바스크립트의 자료형</h1>

<button onclick="typeTest()">자료형 확인</button>

<div id="typeBox"></div>

원시타입과 참조타입

  • 원시타입 : 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장
    → 숫자(Number), Boolean, null, undefined, 문자열(string)

  • 참조타입 : 메모리의 위치(주소)에 대한 간접적인 참조를 통해 메모리에 접근

전체코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04_변수와자료형</title>

    <!-- external 방식 JS 파일 연결 -->
    <script src="js/04_변수와자료형.js"></script>

    <style>
        #typeBox{
            border: 2px solid black;
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
        <h1>변수 선언 위치에 따른 구분</h1>

        <h4>Java</h4>
        <pre>
            public class Student{

                // 필드 (멤버변수)
                private String name; // 인스턴스 변수
                public static String schoolName; // 클래스 변수, static변수

                // 메소드
                public setName(String name <!-- 메소드 지역 변수 -->){
                    this.name = name;
                    int num = 10; // 메소드 지역 04_변수와자료형
                    
                    if(){
                        int a = 20; // if 지역 변수
                    }
                }
            }
        </pre>

        <hr>

        <h4>Javascript</h4>
        
        <pre>
            (JS 파일)
            var num1; // 전역변수 (선언된 후 같은 문서 내 어디서든 사용 가능)
            num2;     // 전역변수 (변수명 앞에 키워드가 없으면 전역변수가 된다.)

            function test() {

                var num3; // function 지역 변수 
                num4; // 전역변수 (변수명 앞에 아무 키워드도 없으면 전역변수가 된다.) 

                if(조건식){

                    var num5; // function 지역변수 (밖에다가 num5 선언해버림)
                    num6; // 전역변수 (변수명 앞에 아무 키워드도 없으면 전역변수가 된다.)

                }

                num5;


            }
        </pre>

        <script>
            console.log("[script 태그 내부]")
            console.log("num1 : " + num1);
            console.log("num2 : " + num2);
        </script>

        <hr>

        <h1>변수 선언 방식</h1>
        <pre>
            var : 변수, 변수명 중복 O(덮어쓰기), 함수 레벨 scope
            let : 변수, 변수명 중복 X, 블록 레벨{} scope
            const : 상수, 변수명 중복 X, 블록 레벨{} scope

            1순위 : const
                    (JS는 특정 요소를 선택해서 사용하는 경우가 많아서 상수에 고정시켜둠)

            2순위 : let

            3순위 : var (EX6 이후부터 사용 빈도가 적어짐)

        </pre>

        <hr>

        <h1>자바스크립트의 자료형</h1>

        <pre>
            자바스크립트는 변수 선언 시 별도의 자료형을 지정하지 않음
            -> 변수에 대입되는 값(리터럴)에 의해 자료형이 결정됨

            - string (문자열)
            - number (숫자) -> 정수 / 실수 모두 포함
            - boolean (논리값)
            - object (객체) -> 배열(Array), 자바스크립트 객체{k:v, k:v}
            - function (함수)
            - undefined (정의되지 않은 변수) -> 변수가 선언만되고, 값이 대입되지 않은 경우 

            (참고)
            - null (참조하는 게 없음) -> document.getElementById("오타") -> 가장 흔한 경우 
                                        -> id가 일치하는 경우가 없어서 참조할 수 없다.
             (null은 타입보다는 값(리터럴)의 개념)
        </pre>

        <button onclick="typeTest()">자료형 확인</button>
        
        <div id="typeBox"></div>

        <h1>원시타입과 참조타입</h1>
        <pre>
            * 원시타입 : 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장
                -> 숫자(Number), Boolean, null, undefined, 문자열(string)

            * 참조타입 : 메모리의 위치(주소)에 대한 간접적인 참조를 통해 메모리에 접근
        </pre>



</body>
</html>
profile
oYJo
Hello! My Name is oYJo
이전 포스트

요소접근방법

다음 포스트

간이계산기 ver 1

0개의 댓글