[JAVA SCRIPT] Java Script 변수 타입

2019.07.29(월)

React 시작 전 필요한 JS 문법 익히기

Java Script 변수 타입

 

• Ex01

// Ex01
// 웹 에서는 alert 라는 메시지 창을 띄우는 것이 있는데 console은 디버깅 창에서 볼 때 사용한다.
console.log(1); 
console.log('문자열'); 
console.log('호랑이'+100); // 자바에서 사용하는 문법인데, 결과적으로 문자열, 이 방법 비추천
console.log('호랑이', 100); // 이 방법을 사용하는 것을 권장한다. ','로 연결

// 순서를 따질 때 앞에 숫자를 붙이고 내가 원하는 문자열을 작성하며 실행 순서를 구분할 때 사용한다.
console.log(1, '내가원하는문자열1'); 
console.log(2, '내가원하는문자열2');

Ex01 실행결과

• Ex02

// Ex02
// JS는 자료형이 없다. var을 사용하면 자동으로 숫자 타입으로 변환 시켜 준다.
// 변수 선언은 var, let, const이다.
// 아래 3개의 예약어를 제외하고는 볼 일이 없다.
// 작년 부터는 var을 사용하지 않고 let을 많이 사용하며 그것보다 const를 많이 사용한다.
// const는 값을 변경 시킬 수 없다. c를 상수화 시킨다는 의미이다.
var a = 10;
let b = 20;
const c = 30;

a = 40;
b = 50;
// c = 60; // c는 상수이기 때문에 값을 변경 할 수가 없다.

console.log(a);
console.log(b);
// console.log(c); // 출력시 에러 발생

// int 라는 타입이 존재하지 않는다.
//int a = 20;

Ex02 실행결과

• Ex03

// Ex03

let a = 10;
console.log(a);
// typeof는 변수 a의 타입이 출력된다.
console.log(a, typeof(a));
console.log('--------------');
// 동일한 변수 이름으로 여러번 사용이 가능하다.
// 새로 선언한 순간, 이전에 선언한 변수가 바뀜
a = '호랑이';
console.log(a);
console.log(a, typeof(a));

Ex03 실행결과

• Ex04

// Ex04
// 어떤 타입으로 해석하는가에 대한 예제

console.log(typeof(10));
console.log(typeof("문자열"));
console.log(typeof(true));

let a;
console.log(typeof(a)); // undefined : 해석을 할 수 없다는 의미, 초기값이 없으므로 해석 불가

let b = new Date(); // 현재 시간 출력
console.log(b);
console.log(typeof(b)); // object type

let c = []; // 배열 문법, js는 배열을 object type으로 해석한다. 즉, 객체를 만들어 버린다는 의미
console.log(typeof(c)); // object type

// {}가 나오면 object 즉, {}가 나오면 무조건 객체다.
let d = {};
console.log(typeof(d)); // object type
 
console.log('-----------------------');

// 이 문법 눈에 익히면 js 잘 할 수 있다.
// a,b 두 개만 사용하지만 b : '호랑이' 뒤에 ,를 붙이는 것이 일반적이다. 다음 추가를 위해
let apple = {
    a : 10,     // a=10 이라는 오류가 많이 난다. 주의
    b : '호랑이',
    c : true,
    d : {       // 객체 안에 또 다른 객체. 자주 나오는 모양이다. 다시 재진입이 가능하다는 소리다.
        e : 20,
    },
    f : function() { // 객체 안에 함수
        console.log(30);
    },
};

console.log(apple.a);
console.log(apple.b);
console.log(apple.c);
console.log(apple.d); // d만 호출 할 경우 객체의 모든 요소가 출력된다.
console.log(apple.d.e);
console.log(apple.f()); // 우리가 알고 있는 함수 사용법과 동일하다.

Ex04 실행결과

• Ex05

// Ex05
// 숫자->문자열, 문자열->숫자로 변환

let a = 10;
console.log(a+10);
console.log('-----------------');

// 숫자를 문자열로 바꿀 때 String을 사용한다.
console.log(typeof(a));
let b = String(a); 
console.log(typeof(b));
console.log(b+10);
console.log(typeof(b+10));
console.log('-----------------');

// 문자열을 숫자로 바꿀 때 Number를 사용한다.
console.log(typeof(b));
let c = Number(b);
console.log(typeof(c));

Ex05 실행결과

• Ex06

// Ex06
// Date() 객체 이용하기

let n = new Date();

// 년 
console.log(n.getFullYear());
// 월 : 이번달 -1 값이 나오기 때문에 +1 해주어야 한다. 
console.log(n.getMonth()+1);
// 일 
console.log(n.getDate());
// 시 
console.log(n.getHours());
// 분 
console.log(n.getMinutes());
// 초 
console.log(n.getSeconds());
// 요일 : 0은 일요일
console.log(n.getDay());
let m;
if (n.getDay() == 0) {
    m = "일요일";
} else if (n.getDay() == 1) {
    m = "월요일";
} else if (n.getDay() == 2) {
    m = "화요일";
} else if (n.getDay() == 3) {
    m = "수요일";
} else if (n.getDay() == 4) {
    m = "목요일"
} else if (n.getDay() == 5) {
    m = "금요일"
} else if (n.getDay() == 6) {
    m = "토요일"
}

console.log(n.getFullYear(), '년', n.getMonth()+1, '월', 
        n.getDate(), '일', n.getHours(), '시', n.getMinutes(), '분', n.getSeconds(), '초', m);

Ex06 실행결과

• Ex07

// Ex07

let obj = {
    a : 10,
    b : "문자열",
    c : true,
};

// 객체에 접근하는 방법은 아래 두 가지 방법이 있다.
// 둘 다 알고 있어야 한다.
console.log(obj.a, obj.b, obj.c);   // 이 방법을 자주 사용한다.
console.log(obj['a'], obj['b'], obj['c']);
console.log('----------------');

for(let item in obj) {
    console.log(item); // 키 값 출력
    console.log(obj[item]); // 실제 값 출력
    console.log('----------------');
}

Ex07 실행결과

• Ex08

// Ex08

// 배열 객체
// js에서 배열은 서로 다른 타입을 넣을 수 있다., 온갖 객체를 다 넣을 수 있다.
// 사용 할 때 아래와 같이 잡동사니로 사용한다.
// 객체와 다르게 첨자 번호를 사용한다.
let ar = [10, '문자열', true, {}]; 

// <for를 이용한 출력>
// 1번 방법(일반적으로 사용하는 방법)
for(let i = 0 ; i < ar.length ; ++i) {
    console.log(i, ar[i]);
}console.log('------------------');

//2번 방법
for (let item in ar) {
    console.log(item);  // 인덱스 값
    console.log(ar[item]);  // 실제 데이터 값
}console.log('------------------');

//3번 방법
// 람다식 사용 가능, 살찐 화살표
// v : value, k : key
ar.forEach((v, k) => {  
    console.log(k, v);
}); 

Ex08 실행결과

• Ex09

// Ex09

let a = 10;
let b = '20';
console.log(a==b);  // a와 b비교

// true가 나오는데 ==은 가지고 있는 값이 같습니까? 이다.
// 그래서 보통 ==을 사용하지 않는다.
let a1 = 10;
let b1 = '10';
console.log(a1==b1);

// ===은 값도 같고 type도 같냐는 의미로 보통 ===을 사용한다.
let a2 = 10;
let b2 = '10';
console.log(a===b);

Ex09 실행결과

• Ex10

// Ex10

// 자바에서 사용하는 삼항연산이 가능하다.
console.log(3 > 2 ? '호랑이' : '코끼리');
console.log('--------');

let ar = [10, 20, 30];

ar.push(100);   // push가 사용 가능하다. 알고가자
for (let item in ar) {
    console.log(ar[item]);
}
console.log('--------');

ar.pop();   // pop도 사용 가능하다. 알고가자
for (let item in ar) {
    console.log(ar[item]);
}

Ex10 실행결과

• 별 그리기 예제

별 그리기 공식

// 별그리기

let str="";
let ii,jj;
for(let i = -2 ; i <= 2 ; ++i) {
    ii=Math.abs(i);
    for(let j = -2 ; j <= 2 ; ++j) {
        jj=Math.abs(j);
        if((ii+jj) <= 2) {
            str+="*";
        } else {
            str+=" ";
        }
    }
    str+='\n';
}
console.log(str);

별그리기 실행 결과