[Javascript]변수의 타입

JS는 타입을 Java처럼 쓸려고 하는데 더욱 간편화 한 것이다.

 

JS는 var로 변수명을 통합해서 썼었다.

ex) var Tiger = 10

 

하지만 1년 전에 let으로 대신 쓰기 시작했다.

JS는 문자열과 문자의 경계가 사라져서 ' ' 안에 문자열을 입력해줘도 된다.

 

const는 상수만 입력할 수 있다.

//Ex01
console.log(10)
 
//Ex02 : 35 변수의 타입
var Tiger = 10
console.log(Tiger);
 
//var 대신 요즘은 let을 써준다. 문자열과 문자의 경계가 없어져서 ''를 써줘도된다.
let lion = '사자'
console.log(lion);
 
//상수
const monkey = 20
console.log(monkey);

 

console.log(typeof(변수명)) 을 입력하면 변수의 타입을 출력해준다.

JS에서 쓰이는 7가지 타입을 알아보겠다.

let a = 10
//typeof(변수명)을 입력하면 그 변수의 타입을 알 수 있다.
console.log(typeof(a))
 
let b = '호랑이'
console.log(typeof(b))
 
let c = true
console.log(typeof(c))
 
//js에서 문법에 배열 객체이다.
let d = []
console.log(typeof(d))
 
//js의 핵심객체로 배열일때는 []쓰고, 객체시 {}를 쓴다.
let e = {}
console.log(typeof(e))
 
//function 타입
let f = function(){}
console.log(typeof(f))
 
//쓸수 없는 타입, 타입으로 쓸려고는 했지만 위의 6개중에서 쓸수는 없었다.
let g = undefined
console.log(typeof(g));

JS에는 double 타입 float 타입이 전혀 존재하지 않는다. 숫자 뒤에 f를 붙이게 되면 에러가 뜬다.

 

let a = {
    b : {
        c : {
            d : 10
        }
    }
}
 
console.log(a.b.c.d);
//이런식으로 데이터가 들어있는 형식을 JSON 형식이라고 한다.
//객체안에 숫자도 있고 객체도있고 문자도 있고 다 들어있는 형식

객체 안에 숫자, 객체, 문자가 다 들어있는 형식을 JSON형식이라고 한다.

구글링을 해보면 더 자세히 알 수 있다.

 

let a = 10
a = '호랑이'   //js에서만 되는데 동적타입 변경이라고한다. 중간중간에 계속 원하는 값으로 변경 가능하다.
console.log(typeof a);
 
 
let a = 20
console.log(typeof a);
//한번 정의되었다가 변경된 타입은 typeof를 사용하면 에러가 난다.

JS에서는 변수의 타입을 자유롭게 바꿀 수 있다.

하지만 한번 변수의 타입을 바꾸면 typeof를 사용해 타입을 찾아볼 때 오류가 난다.

 

var a = 10
if(true){
    var a = 20
    console.log(a);     //20
    
}
console.log(a);         //20
//스코프안에 들어가서 변경된 값을 그대로 유지시킨다.
 
let b = 10
if(true){
    let b = 20
    console.log(b);     //20
    
}
console.log(b);         //10
//let을 사용하면 if문안에서 사용된 let은 안에서만 사용된다.

var는 스코프 안에서 변경된 값을 그대로 유지시켜 가져온다.

let은 스코프 안에서의 값은 스코프 안에서만 유지된다.

 

let s = '호랑이'
s += '사자'
 
console.log(s);
 
s += '\n코끼리'
console.log(s);
 
for(let a = 0; a < 10; a++){
    console.log(a);
}

첫 번째 실행 결과는 호랑이사자로 출력되고 \n을 붙여주면 한 줄을 띄워준다.

for문은 java와 똑같이 쓰인다.

 

let str = ''
for(let b = 0; b < 10; b++){
    for(let c = 0; c < 10; c++){
        str += '* '
    }
    str += '\n'
}
console.log(str);

이중 배열을 가지고 네모를 만드는 코드이다.

 

let a = 10
let b = '20'
console.log(a+10);
console.log(b+10);
 
//형변환 하는것은 어느 언어든지 필수이다.
let c = String(a)   //숫자를 문자열로 변경 (내장함수)
let d = Number(b)   //문자를 숫자로 변경 (내장함수)
 
console.log(typeof c);
console.log(typeof d);
 
//문자열앞에 +를 붙히면 숫자로 형변환이 된다.
let e = +'30'
console.log(typeof e);
 
let f = '1234'
g = +f      //문자열을 숫자로 변환
console.log(typeof g);
 
 
let n1 = '1000'
let n2 = '2000'
console.log(+n1 + +n2);     //3000
console.log(+n1 + n2);      //10002000
 
console.log(parseInt(n1) + 10)  //Number와 기능은 같지만 parseInt는 숫자가 아닌것을 제거한다.

JS에서 형 변환은 내장 함수를 사용해서 변환시킬 수 있다.

숫자를 문자열 형식으로 저장했을 경우 앞에 +만 붙여도 숫자 형식으로 변환시킬 수 있다.

 

 

let a = 10
console.log(2 ** 3);            //2의 3승을 의미한다.
console.log(2 ** 3 ** 2);       //2의 3승의 2승을 의미한다. -> 2의 9승이다. 
console.log((2 ** 3) ** 2);     //8의 2승을 의미 
 
console.log(Math.pow(2, 3));    //2의 3승을 의미

**을 이용해서 숫자의 제곱 값을 구할 수 있다.

 

let n = new Date()
console.log(n.getFullYear())    //2020
console.log(n.getMonth() + 1)   //+1을 해줘야 해당 달이 나온다.
console.log(n.getDay());        //1(월요일)
console.log(n.getDate())        //오늘 날짜가 나온다.
console.log(n.getHours())       //시간
console.log(n.getMinutes())     //분
console.log(n.getSeconds())     //초

Date라는 함수를 사용해서 년부터 초까지 모두 구할 수 있다.

Month는 1을 더해줘야지 오늘의 달이 나온다.

 

let start = new Date().getTime()
console.log(start);             //현재가지고 있는 숫자를 리턴한다.
 
for (var i = 0; new Date() < start + 1000; i++) { }
console.log(i);                 //1초 동안 돌아간 for문의 횟수를 보여준다.(컴퓨터의 성능)

getTime으로 현재 가지고 있는 숫자를 리턴한다.

for문을 이용해서 반복 횟수를 가지고 컴퓨터의 성능을 가늠해볼 수 있다.

 

let a = 123
let b = '123'
 
console.log(a == b);    //값이 같습니까??
console.log(a === b);   //타입까지 같습니까??

==은 값을 비교하는 것이고 ===는 값뿐이 아니라 타입까지 같아야 true가 나온다.

 

 

가장 중요한 코드

//*1번 : 함수만드는 모양 (호이스팅이 된다.)
//f1()
function f1() {              
    console.log('함수 1번 콜');
}
f1()
//함수를 밑에가 아니라 위로 올려도 가능한게 호이스팅이다.
 
 
//*2번 : 함수만드는 모양 (호이스팅이 안된다.)
let f2 = function() {        
    console.log('함수 2번 콜')
}
f2()
//f2()를 위에 올리면 오류가난다.
 
 
//*3번 : 람다식처럼 사용가능하다.
let f3 = () => {            
    console.log('함수 3번 콜')
}
f3();                   //뒤의 익명함수와 구분짓기위해서 세미콜론을 붙혀준다.(없을시 오류)
 
//*iif2
//* 4번 : 익명함수, 즉시실행함수(만들자마자 실행)
(function() {                
    console.log('함수 4번 콜')
})();                   //뒤에 또 익명함수가 있기때문에 구분을 위해서 붙혀준다.
 
 
//* 5번 : 람다식으로 익명메소드 호출. 
//* 실전에서 많이 쓰이는 메소드
(() => {            
    console.log('함수 5번 콜')
})();
 
//*6번 : 인수가 있는 람다익명메소드
((num) => {            
    console.log(num + '메소드 출력')
})(6);
 
 
//* 7번 : 6번 중괄호 생략, 한줄일 경우에만 가능
((num) => console.log(num + '메소드 출력'))(7)

JS에서 가장 중요한 것은 함수이다.

함수를 만드는 7가지 방법은 꼭 알아둬야 한다.

JS에서 세미콜론(;)을 안 붙인다고 했지만 22번째 줄과 28,35,40번 줄에 세미콜론(;)을 붙여주는 이유는 () 다음에 바로 ()가 나오게 되면 return을 해준다는 의미로 받아들이기 때문에 함수가 끝났다는 것을 구분 짓기 위해서 세미콜론(;)을 붙인다.

 

//1. 인수전달 x 리턴 x
function f1(){}
 
//2. 인수전달 o 리턴 x 
function f2(num){}
 
//3. 인수전달 x, 리턴 o
function f3(){ return 100 }
 
//4. 인수전달 o, 리턴 o
function f4(n){ return n*10 }
 
f1()        //리턴이 없으므로 나올게 없으니 출력코드 x
f2(10)
console.log(f3())
console.log(f4(20))

인수 전달과 리턴의 유무에 따라 정의했다. 리턴 값이 있으면 괄호 안에 값을 넣어줘야 오류가 발생하지 않는다.

 

//JS는 함수에 살고 함수에 죽는다 // 클래스 만들기
function tiger(){
    this.num = 10
    this.f1 = function(){
        console.log(2)
        
        this.f2 = () => {
            console.log(5)       
        }
    }
}
let t1 = new tiger()
t1.num
t1.f1()
t1.f2()
 
 
//함수일수도 있지만 까딱하면 클래스다.
function lion(n, s){
    this.n = n
    this.s = s
    this.f1 = function(){
        console.log(this.n, this.s)
        
    }
    this.f2 = ()=>{
        console.log(this.s, this.n)
        
    }
 
}
let t2 = new lion(10, '호랑이')
t2.f1()
t2.f2()

배열을 만드는 법이다. 첫 번째는 for문을 이용해서 배열을 출력하였다.

forEach문을 사용해서 배열을 출력할 수 있다.

for in 문장을 사용할 때는 key는 배열의 번호를 뜻하고 in뒤의 변수는 배열을 뜻한다.

 

 
function f1(){
    console.log(1)
    //내부함수는 외부에서 call 할 수 없다.
    function f2() {
        console.log(2)
    };f2()
    console.log(3)
}
f1()
 
 
//내부함수를 사용할때에는 만들어놓은 함수를 return하는 목적으로 많이 쓴다.
let f3 = function(){
    console.log(1); 
   let f4 = function(){
        console.log(2) 
    }; return f4
}
 
let f5 = f3()
f5()
 
//f01함수가 함수를 한번더 리턴해준다.()가 여러개여도 적용된다.(리턴이 여러개이면)
f3()()

내부 함수는 외부에서 호출을 할 수 없다는 것을 보여준다.

내부 함수의 return 값이 있다면 f3()()와 같이 ()를 사용해서 리턴 시켜줄 수 있다.

 

let f1 = (num) => {
    console.log(num)
 
    let f2 = (str) =>{
        console.log('호랑이')
    }; return f2 //반드시 f2()로 작성하면 안된다.
}
f1(30)('호랑이')
 
 
//살짝 변형
//f2를 없애고 return으로 한번에 다 보내준다.
let f3 = (num) => {
    console.log(num)
 
    return (str) => {
        console.log('호랑이')
    };  //반드시 f2()로 작성하면 안된다.
}
f3(30)('호랑이')
 
//괄호를 없앴다.
let f4 = (num) => {
    console.log(num)
 
    return (str) => console.log('호랑이')
}
f4(30)('호랑이')

첫 번째에 return f2에 ()를 붙여주게 되면 return 하는 동시에 바로 return 해주기 때문에 아래의 f1()()의 두 번째 ()에서 오류가 나게 된다.

나머지는 람다식으로 변형을 해준 것을 표현한 것이다.

 

//익명객체를 만들어서 즉시실행 하겠다.
(() => {
    console.log(1);
})();
//전체 람다식 문장을 ()로 묶고, ()로 실행한 것
 
(() => {
    console.log(1)
    return () => {
        console.log(2)
    }
})()()
//앞의 람다식이 익명객체이기 때문에 앞에 ;를 붙혀줘야한다.

익명 객체를 만들어서 함수를 즉시 실행시켜주는 코드이다.

전체를 람다식으로 묶어주고 마지막에 ()로 익명객체를 실행시켜주었다.

밑에는 람다식으로 묶어준 전체를 실행시켜주고 안에 리턴 값을 한 번 더 실행시켜주기 때문에 ()가 두 번 연속으로 들어갔다.

 

 

 

*배우면서 메모해둔 것을 정리한 것이기 때문에 설명이 어색하거나 틀린 부분이 있을 수도 있습니다.