데이터 형변환

1.형변환

문자열과 숫자의 +연산

문자열과 숫자가 연산하면 str화된다

<button onclick="testPlus();">문자열과 숫자의 +연산</button>
<script>
  function testPlus(){
    var test1 = 7 + 7;          // 14
    var test2 = 7 + '7';        // 77
    var test3 = '7' + 7;        // 77
    var test4 = '7' + '7';      // 77
    var test5 = 7 + 7 + '7';    // 147
    var test6 = 7 + '7' + 7;    // 777
    var test7 = '7' + 7 + 7;    // 777

    console.log(test1);
    console.log(test2);
    console.log(test3);
    console.log(test4);
    console.log(test5);
    console.log(test6);
    console.log(test7);
    // 자바와 문자열+string의 로직 동일
		// 콘솔창 결과에서 글씨색이
    // 숫자나 불린값의 살짝 푸른빛
    // str은 검은색

		// 강제 형변환 : Number(), parseInt(), parseFloat()...
    console.log(test2 + 1);                 // 771
    console.log(Number(test2) + 1);        // 78 // 문자이기에 형변환 필요
    console.log(parseInt(test2) + 2);       // 79
    console.log(parseFloat(test2) + 3);     // 80
  }
</script>

2.강제 형변환

강제 형변환 : Number(), parseInt(), parseFloat()...

// 강제 형변환 : Number(), parseInt(), parseFloat()...
    console.log(test2 + 1);
    console.log(Number (test2) + 1);        // 78 // 문자기에 형변환 필요
    console.log(parseInt(test2) + 2);       // 79
    console.log(parseFloat(test2) + 3);     // 80

C.연산자

다른 연산자들은 자바와 비슷한게 많음

자바와는 다른 연산자

===와 !==

=== : 값과 자료형 둘 다 일치하는지 비교 !== : 값과 자료형 둘 다 일치하지 않는지 확인할 때 사용

<button onclick="opTest();">확인하기</button>
<script>
    function opTest(){
        var check1 = 1;
        var check2 = '1';

        console.log('check1 == 1 :' + (check1 == 1));       // check1 == 1 :true
        console.log('check1 == "1" :'  + (check1 == '1'));  // check1 == "1" :true
        console.log('check2 == 1 : ' + (check2 == 1));      // check2 == 1 :true
        console.log('check2 == "1" : ' + (check2 == '1'));  // check2 == "1" :true
        // 값을 비교할 때, 위처럼 숫자로 변환 가능한 문자를 숫자랑 비교하면 true로 인지해줌
        // 어느정도 허용적인거지 나중에 철저히 해야 에러발생x // 애매해서 안하는걸 추천
        // JS에서는 비교를 순수 값으로 함. 주소값으로 비교하지 않음
}        
</script>

==과 === 차이

== 연산자를 이용하여 서로 다른 유형의 두 변수의 [값] 비교

==='는 엄격한 비교를 하는 것으로 알려져 있다 ([값 & 자료형] -> true)

// == 비교
console.log('check1 == 1 :' + (check1 == 1));       // check1 == 1 :true
console.log('check1 == "1" :'  + (check1 == '1'));  // check1 == "1" :true
console.log('check2 == 1 : ' + (check2 == 1));      // check2 == 1 :true
console.log('check2 == "1" : ' + (check2 == '1'));  // check2 == "1" :true
// 값을 비교할 때, 위처럼 숫자로 변환 가능한 문자를 숫자랑 비교하면 true로 인지해줌
// 어느정도 허용적인거지 나중에 철저히 해야 에러발생x // 애매해서 안하는걸 추천
// JS에서는 비교를 순수 값으로 함. 주소값으로 비교하지 않음

// === 비교 
console.log('check1 === 1 :' + (check1 === 1));       // check1 == 1 :true
console.log('check1 === "1" :'  + (check1 === '1'));  // check1 == "1" :false
console.log('check2 === 1 : ' + (check2 === 1));      // check2 == 1 :false
console.log('check2 === "1" : ' + (check2 === '1'));  // check2 == "1" :true

추가자료

https://velog.io/@filoscoder/-와-의-차이-oak1091tes

변수와 자료형

1.변수 선언

1)지역변수 & 전역변수

지역변수 : 함수 내부에서 'var 변수명;'
전역변수 : 함수 내부에서 '변수명;'
전역변수 : 함수 밖에서 '변수명;' 혹은 'var 변수명;'

// 함수 외부
str1 = "전역변수";
var str2 = "var전역변수";

// 함수 내부
var str1 = "지역변수1"
var str3 = "지역변수2"

console.log('str1 : ' + str1);              /* 지역 변수 */
console.log('this.str1 : ' + this.str1);    /* 함수 안에 있는 전역변수 */
console.log('window.str1 : ' + window.str1);/* 전역변수 : 함수 내부에서는 전역변수를 this.나 window.을 찍어서 구분해줘야한다 */
// 자바 때, 매개변수도 지역변수. 구분을 위해서 this썼었음
// js도 위처럼 this나 window 써서 구분해줌

console.log('str2 : ' + str2);               // var전역변수
console.log('this.str2 : ' + this.str2);     // var전역변수
console.log('window.str2 : ' + window.str2); // var전역변수

console.log('str3 : ' + str3);               // 지역변수
console.log('this.str3 : ' + this.str3);     // undefined : 없다는 얘기 // 지역변수인데 전역변수 구분용 접두어를 붙여놨으니 undefined
console.log('window.str3 : ' + window.str3); // undefined  : js에서는 정의가 안된 데이터 '취급'함

 - 지역변수 : 함수 내부에서 'var 변수명;'으로 선언하면 지역변수가 됨

 - 전역변수 : 

함수 내부에서 '변수명; '으로 선언하거나 함수 밖에서 '변수명;' 혹은 'var 변수명;'으로 선언하면 전역변수가 됨

2)우선권 : 전역과 지역변수의 우선권

전역변수와 지역변수가 동일한 이름인 경우,

함수 내부에서 변수 명을 호출하면 지역변수가 우선권을 가짐

window. this. : 전역변수와 지역변수 구분하는 코드

전역 변수 사용 시 'window. 변수 명;' 혹은 'this.변수 명;'으로 표현하여 지역변수와 구분

전역변수는 해당 window내에서 어디든 사용할 수 있으며, 지역변수는 해당 함수 내에서만 사용 가능

window.onload = function()

페이지가 로드되면 자동으로 실행하는 함수

한 페이지에서 하나의 onload함수만 기술 가능 페이지가 로드가 되면 한번에 여러개 실행되고 싶으면 한번에 하나만 가능해서 단점으로 생각해서 제이쿼리에서 여러개 실행가능하게 만들어둠

window.onload = function(){

추가자료

https://itworldyo.tistory.com/101

2.자료형

JS에서는 자료형 별로 변수 타입이 지정되지 않고,

리터럴에 의해서 자료형 결정

JS 데이터 타입

string

number

boolean

Array(object)

Object(object)

function

<h3>자료형</h3>
<p>자바스크립트에서는 자료형 별로 변수 타입이 지정되지 않고 리터럴에 의해서 자료형 결정</p>
<button onclick="typeTest();">자료형 테스트</button>
<script>
  function typeTest(){
    var name = "강건강";                     // 문자열
    var age = 20;                           // 숫자
    var check = true;                       // 논리값        
    var hobby = ['축구', '야구', '농구'];    // 배열
    var user = {                             // 객체   
        name: '강건강',
        age: 20,
        id: 'user01'              
    };
    var testFunction = function(num1, num2){
        var sum = num1 + num2;
        alert(sum);
    };
    
    // 콘솔창에서 '값' 확인
    console.log(name);
    console.log(age);
    console.log(check);
	  console.log(hobby);     // (3) ['축구', '야구', '농구']
    console.log(user);      // {name: '강건강', age: 20, id: 'user01'}
    console.log(testFunction); // ƒ (num1, num2){
                               //                var sum = num1 + num2;     
                               //                 alert(sum);
                               //               }
    // 콘솔창에서 '타입' 확인
		console.log(typeof(name));  // string
    console.log(typeof(age));   // number
    console.log(typeof(check)); // boolean
    console.log(typeof(hobby)); // object   // array
    console.log(typeof(user));  // object
    console.log(typeof(testFunction));  // function
    // typeof연산자 : 값의 자료형을 확인하는 연산자
  }
</script>