07-05 회고록

🌈형 변환

• 명시적 형 변환
• 암시적 형 변환

데이터 → 문자   /   데이터 → 숫자   /   데이터 → 불리언

 

데이터  →  문자  

const YEAR = 2023; console.log( typeof String(YEAR) ); // 명시적 형 변환

console.log( YEAR + ' '); // 암시적 형 변환

문자형으로 변환 

명시적 형 변환은 typeof String을 붙여 명시적으로 문자형으로 바꾼다고 보여줍니다.

 

암시적 형 변환은 '  ' 공백 문자를 이용하여 암시적으로 형 변환을 합니다.

 

데이터  →  숫자

// string
let num = '250';

console.log(typeof(num));      //문자 
console.log(Number(num));      //숫자 - 명시적 형 변환

console.log(+num);             //숫자 - 암시적 형 변환
console.log(num * 1);          //숫자 - 암시적 형 변환
console.log(num / 1);          //숫자 - 암시적 형 변환

숫자형으로 변환

let num = '250'; 에서  ''를 이용하여 정의된 문자형을 숫자형으로 변환하는 코드입니다.

(Number(num));을 이용해 명시적 형 변환을 합니다.

+ , * , / 를 통해 암시적으로 형 변환을 하기도 합니다.

 

숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려고 하면, 그 결과는 NaN이 됩니다.

 

전달받은 값                            형 변환 후

undefined	NaN
null	0
true and false	1 과 0
string	문자열의 처음과 끝 공백이 제거됩니다. 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽습니다. 변환에 실패하면 NaN이 됩니다.

데이터  → 불리언

// null, undefined, 0, NaN, ''              //false
// 위에 나열한 것 이외의 것들 

    console.log( Boolean(friend) );         //false
    console.log( Boolean(bankbook) );       //false
    console.log( Boolean(0) );              //false
    console.log( Boolean(NaN) );            //false
    console.log( Boolean('') );             //false
    console.log( Boolean(1) );              //true

                                    // 명시적 형 변환

    console.log('암시적 형 변환 : ' + !!false);
    
                                    // 암시적 형 변환

불린형으로 변환

Boolean을 사용하여 명시적 형 변환을 할수 있습니다.

 

!!를 이용해 암시적 형변환도 가능합니다.

 

! : 부정 연산 : 기존 값을 뒤집음

!! : 부정의 부정 → 긍정 (기존값 그대로 나옴)

 

 

+Plus)  Numeric String → Number

let width = '105.3px';
console.log( Number(width) );

let w = window.parseFloat(width);
  // parseFloat 이라는 윈도우 기능,
  // 윈도우 기능이기 때문에 window 글자 생략 가능
console.log( w );       // 105.3 출력

let w = parseInt(width);
console.log( w );     // 105 출력

parseFloat() : 문자열(px) 제외시키고 숫자값만 소수형으로 뽑아내는 방법

parseInt() : 문자열(px) 제외시키고 숫자값만 정수형으로 뽑아내는 방법

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/parseInt

parseInt() - JavaScript | MDN

---

🌈연산자

기본 연산자와 수학

• 단항 unary ( 피연산자가 하나인 경우 )
• 이항 binary 
• 피연산자 ( = 인수, 연산자가 연산을 수행하는 대상 )

// 연산자(演算子): 연산을 표시하기 위한 기호
// 피연산자(被演算子): 처리 대상

    const a = '10';
    const b = '30';

// 단항 연산자

    let unary = +a;

// 이항 연산자

    let binary = a + b;

// 삼항 연산자

    // a === 10, true, false 로 피연산자가 3개
    // a === 10 이라는 조건이 성립하면 true, 성립하지 않으면 false 를 반환
    let ternary = a === 10 ? true : false;

    // Math.random() > 0.5, big, small 로 피연산자가 3개
    // 랜덤 숫자를 뽑아서 그 수가 0.5보다 크면 big, 작으면 small 반환
    let ternary = Math.random() > 0.5 ? 'big' : 'small'

 

// 산술 연산자: 덧셈
let addition = 1 + 2;

// 산술 연산자: 뺄셈
let subtraction = 10 - 2;

// 산술 연산자: 곱셈
let multiplication = 30 * 2;

// 산술 연산자: 나눗셈
let division = 14 / 2;

// 산술 연산자: 나머지
let remainder = 10 % 3;
console.log(remainder); //1

ex) 짝수, 홀수를 구별할 때 사용
if(a % 2 === 0){
        console.log('짝수');
    }

// 산술 연산자: 거듭 제곱
alert( 2 ** 2 ); // 4  (2 * 2)
alert( 2 ** 3 ); // 8  (2 * 2 * 2)
alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2)

let power = 2 ** 53 - 1;
let power = Math.pow(2,53) - 1;

산술 연산자에서 나머지 연산자는 %를 사용하여 나눈값의 나머지를 구할 수 있습니다.

 

// 대부분의 연산자는 기본 값으로만 작동합니다.
    let onlyWorkDefaultValues = [1,2,3] + [4,5,6];
    
    console.log( typeof onlyWorkDefaultValues );        // string

    // [1,2,3,4,5,6] 을 예상했겠지만 그렇게 나오지 않고 type 도 문자열로 나옴
    // 두 개의 배열을 합쳐주려면 배열의 메써드를 사용해야함 -> concat

    let first_array = [1,2,3];
    let second_array = [4,5,6];

    const new_array = first_array.concat(second_array);

    console.log(new_array);

    // 조금 old 해서 새로 나온 것을 써볼 것임

		// -> 구성되어 있는 것들을 하나하나 펼쳐 주는 것 : spread syntax

    console.log( [... first_array, ...second_array] );
    // 결과값 : [1,2,3,4,5,6]

    function sum (a,b,c, ...children){
        children
    }

    sum(1,2,3,4,5,6,7,)
    // a 에 1, b 에 2, c 에 3으로 들어 간 다음 나머지값들은 children 에 들어가 다른 또 하나의 배열을 이루게 됨

 

연산자, 연산자 우선순위 

단항(+,-) > 거듭제곱(**) > 곱셈(*) > 나눗셈(/) > 덧셈(+) > 뺄셈(-) > 할당(=)

 

증가 감소 연산자(++, --)

++counter : 전위형 (선증가, prefix form) → 증가가 된 값을 반환합니다.

counter++ : 후위형 (후증가, postfix form) → 증가가 되지 않은 기존값을 반환합니다.

 

// 선,후 증감 연산자
// ++, --
let counter = 0;

++counter    // 선증가, 1
counter++    // 후증가, 0
counter      // 1

 

for(let i = 0; i < 10;){
  console.log(i++);
}

i++ → 결과 : 0 ~ 9

++i → 결과 : 1 ~ 9

선증가 : 처음 시작할 때 먼저 계산이 된 값으로 시작 → 1부터 시작

후증가 : 처음 시작할 때 계산 전 값으로 시작 → 0부터 시작

 

 

깜짝퀴즈!

1번

let count = 10;
let total = (count % 4) * (count /= 2) + count ** 3;

Hint : 할당연산자 : = 값을 반환 / 모든 연산 식들은 값을 내뱉는다.

정답은 마지막에 공개합니다~

 

 

 

---

 

🌈비교 연산자

null 은 undefined 는 비교 하지 못합니다.

const number = [10,-4,6,101,-90,10_000];


// ~ 보다 큼 또는 작음 → boolean

    let lessThen = number[0] < number[3];
    console.log( lessThen );

    let greaterThen = number[0] < number[1];
    console.log( greaterThen );

// ~ 보다 크거나 작음 또는 같음 → boolean

    let lessThenAndEqual = number[4] <= number[1];

    let greaterThenAndEqual = number[5] >= number[0];

// 동등(등급이나 정도가 같다) → boolean (타입 체크 x)

    let equal = number[0] == number[1];
    console.log('equal : ',equal)           // false

		
// 다름(같지 않음) → boolean (타입 체크 x)

    let inequal = number[2] != number[3];
    console.log('inequal : ',inequal)       // true


// 동일(똑같다) → boolean (타입도 같아야 함)
		// 일치
    let same = number[3] === number[4];
    console.log('same : ',same)             // false

		// 불일치
		let inequal = number[2] !== number[3]; // true

 

동등 (비교) 연산자 : == ( type 을 비교하지 않기 때문에 잘 안씀) [ “1” == 1 // true 같은 경우를 피하기 위해]

일치 연산자 : === → 엄격한 동등 연산자. 자료형 ( type ) 도 비교하기 때문에 자료형이 다르면 false 반환한다.

부동 연산자 : !=

불일치 연산자 !== : 부동 연산자 !=의 엄격한 버전

---

간단한 총정리 TIME~

데이터 타입은 총 8가지

각종 자료형은 생성자 방식과 문자 리터럴 방식으로 만들 수 있는데, 대부분 문자 리터럴 방식을 사용한다.

typeof를 이용해 자료형을 체크할 수 있다.

객체 안에 있는 함수는 메서드라고 한다.

함수는 재사용을 위해 만드는 것!

형변환 - 불린이 제일 중요

연산자로써의 작동을 해야할 때 불린으로 사용하기 때문에

 

연산자

단항, 이항, 삼항 연산자는 피연산자의 갯수에 따라 결정됨

배열 합치려고 할 때 사용한 spread syntax ( operator ) 중요!

선증가, 후증가의 차이 구분하기

연산자의 우선순위

 === 아니면 ! == 을 주로 사용할 것임 강한 비교만

 

---

let count = 10;
let total = (count % 4) * (count /= 2) + count ** 3;

1010이라고 처음에 했었지만 제대로 당했다

1. 순서체크
   • 괄호가 되어있는 곳부터 계산
2. count % 4 -> 10 % 4 = 2
3. count /= 2
   • 여기 주의 해야함!!!!!!!
   • /가 우선순위로 계산해서 5지만 =가 붙어있어서 count에 5가 쓰여짐
4. count ** 3
   • 10에 3제곱이 아닌 3번에서 count에 5가 쓰여졌으니 5의 3제곱
5. 2 * 5 + 125 = 135가 정답

💯한줄평

앞으로의 데이터 타입에서 형변환과 spread syntax가 아주 중요할것 같은 느낌이 들어 조금 더 공부가 필요 할 것으로 보인다.