JS ( 변수, 자료형 )

DeadWhale·2022년 5월 11일

JS

목록 보기

3/12

변수 범위

(변수타입) 변수명 ;
[변수타입을 생략하면 그냥 전역변수로 설정된다.]

var num1 ;  // 전역변수(선언된 후 같은 문서내에 어디에서든지 사용 가능.)
num2;       // 전역변수(먼 근본 없는 놈이야,  변수명 앞에 아무런 키워드가 없으면 전역변수가 된다.)

function test(){
  var num3; // 이 test함수 내에서만 사용 가능하다.
  num4      // 전역변수( 변수 앞에 아무런 키워드가 없으면 전역변수가 된다.)

    if(조건){
        var num5;// 사용된 function 지역변수. ( 진짜 근본없는 언어네)
        num6     // 전역변수( 변수 앞에 아무런 키워드가 없으면 전역변수가 된다.)
    }
}

변수의 종류

Var

변수
ES5이전에 주로 사용되던 변수 (좀..개념없다)
변수명의 중복 허용 (먼저 선언된 변수를 덮어쓴다.)

let

변수
변수명 중복 불가
블럭 {} 레벨 scope : 블럭안에서만 사용 가능하다.

const

상수(자바에서 final)
변수명 중복 불가
블럭 {} 레벨 scope

각 변수별 사용 빈도

1위 : const
2위 : let
3위 : var (구시대의 유물)

js는 보통 특정 요소를 선택해 사용하는 경우가 많아서
변수를 고정 시켜놓는다

JS의 자료형

JS는 자료형을 따로 선언하지는 않지만 존재한다.

변수에 대입되는 값에 맞쳐 자동으로 자료형이 세팅된다.

String (문자열)

number(숫자) : 정수/실수 모두 포함 (SQL과 같은 타입)

boolean(True/false) : 결과에 따라 반환함

object(객체) ->배열(Array): 그냥 배열을 의미함.

JS객체{K:V , k:v} : Map과 비슷한 모습 여러개의 k:v가 들어갈수 있다.(map+배열 느낌?)

function(함수) : JS는 변수에 함수 자체를 저장할 수 있다.

undifined(정의되지 않는 변수) : 선언만되고 어떤자료도 들어가지 않는 상태.

object(배열)

배열 이 접근하는 것 처럼 접근해야한다 ( 반복문 )

//js 에서 배열 ( 대괄호 사용 필요)
const arr = [10,30,70,50];
typeBox.innerHTML +="<br>arr:"+arr+"/"+typeof arr;
    
for(let i=0; i<arr.length;i++){
typeBox.innerHTML +="<br>arr["+i+"] : "+arr[i];
}

JS객체(K:V , k:V)

두가지 방법이 있다.

//자바스크립트 객채 K:V (map형식)으로 작성
const user = {"id":"user01","pw":"pass01"};
typeBox.innerHTML += "<br>user : "+user+"/"+typeof user;
//단순 js 객체는 toString 오버라이딩이 안된거처럼 조회가 안된다.

//1번 방법 하나씩 조회
typeBox.innerHTML += "<br>user.id : "+user.id+"/"+typeof user.id;
typeBox.innerHTML += "<br>user.pw : "+user.pw+"/"+typeof user.pw;

//2번 방법 (객체 전용 for문 (for...in ) )
for(let key in user){
//user 객체의 key (id,pw)를 반복 할 때 마다 하나씩 얻어와 key 변수에 저장
    typeBox.innerHTML += "<br>user["+key+"] : " + user[key];
}

//가장 쉬운건 콘솔로 그냥 보는거
console.log(user);

function(함수)

const sumFn = function(n1,n2){//이름이 없는 함수== 익명함수.
	return n1+n2;
}

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

//2번 함수를 매개변수로 전달
typeBox.innerHTML += "<br>tempFn(30,sumFn) : "+tempFn(30,sumFn)
}

function tempFn(n3,fn){
return n3 +fn(10,20);
}