2023- 05 - 13 형 변환 (데이터타입 변환), 연산자

 

오늘 할일

자바스크립트 1주차 강의 듣기.

개인과제 복습하기.

 

오늘 배운 것

 

1. 형변환  2.연산자

 

형 변환 : 형태를 바꾼다. 문자열을 숫자열로, 숫자열을 문자열로 등등.

 

1. 암시적 형 변환 : 개발자가 의도하지 않았고, 자동적으로 바뀌는 형 변환

2. 명시적 형 변환 : 개발자가 의도한 형 변환

 

 

암시적 형변환

(1) 문자열과 다른 데이터타입(숫자열, null, 객체, underined 등)이 더하기되면 문자열이 된다.

 

let result = 1+"2";
console.log(result); // 12
console.log(typeof result); // string 

(숫자열 + 문자열 = 문자열(string))


let result = "1" + true;
console.log(result);        // 1true
console.log(typeof result);  // string

(문자열 + 불리언 = 문자열(string))

 

 

(2) 빼기, 곱하기, 나누기는 항상 숫자열로 변환된다. (문자열끼리 해도 숫자열이 된다.)

 

let result = 1 - "3";
console.log(result);   // -2 
console.log(typeof result); // number

(숫자열 - 문자열 = 숫자열(number))


let result = "4" * "4";
console.log(result);  // 16
console.log(typeof result); // number

(문자열 * 문자열 = 숫자열(number))

 

 

 명시적 형 변환

 

(변환시킬 타입(변환할 타입))    ->여기서 변환시킬 타입 앞글자는 대문자로 써야함. (String, Number, Boolean)

 

1. Boolean 형변환

 

boolean 값이 false로 나오는 경우

console.log(Boolean(0));            => 숫자열 0을 boolean타입으로 변환시킨다.

console.log(Boolean(""));           => 값이 없는 문자열("")을 boolean타입으로 변환시킨다.

console.log(Boolean(null));          => null을 boolean타입으로 변환시킨다.

console.log(Boolean(undefined));     => undefined을 boolean타입으로 변환시킨다.

console.log(Boolean(NaN));           => NaN을 boolean타입으로 변환시킨다.


// false 라는 불리언 값으로 나옴.

boolean 값이 true로 나오는 경우

console.log(Boolean("false"));         => 값이 있는 문자열 "false"을 boolean 타입으로 변환시킨다
console.log(Boolean());                => 빈 객체를 boolean타입을 변환시킨다.

// true 라는 불리언 값으로 나옴

2. 문자열 형변환

let result = String(123)
console.log(result);
console.log(typeof result);         => 123, string
 

let result = String(true)
console.log(result);
console.log(typeof result);        => true, string


let result = String(null)
console.log(result);
console.log(typeof result);         => null, string


let result = String(undefined)
console.log(result);
console.log(typeof result);        => undefined, string

 

여기서 123, true, null, undefined는 다 문자열(string)타입으로 출력된다.

 

 

3. 숫자열 형변환

let result = Number("abc")
console.log(result)
console.log(typeof result) // NaN, number

(result만 출력하면 NaN이지만 typeof하면 문자열"abc"가 숫자열로 변형됨)


let result = Number("123")
console.log(result)
console.log(typeof result)  //123, number

 

 

연산자

1. 더하기 연산자 (문자열 우선시)

 console.log(1 + 1);   // 2
console.log(1 + "1");  // 11

2. 빼기 연산자 (숫자열 우선시)

console.log(1 - "2");     // -1
console.log(1 - 2);    // -1

3. 곱하기 연산자 (숫자열 우선시)

 console.log(2 * 3);    // 6
 console.log("2" * 3);   // 6

4. 나누기 연산자 (숫자열 우선시)

console.log("4" / 2);    // 2
console.log(4 / 2);      // 2

5. 나누기 연산자(/) vs 나머지 (나누고 나서 몫을 뺀 나머지) 연산자(%)

console.log(5 / 2);   // 2.5
console.log(5 % 2);   // 1 (5를 2로 나누고 남은 나머지값 1)

6. 할당 연산자 (assignment) = 

6-1. 등호 연산자 (=)

   let x = 10;          // 등호 "=" 연산자가 곧 할당 연산자.
   console.log(x);    // 10

6-2. 더하기 등호연산자 (+=)

 let x = 10;
 x += 5;               
console.log(x);   // 15

 
6-3. 빼기 등호연산자 (-=)

let x = 15;
x -= 5;    
console.log(x);  // 10

6-4. 곱하기 등호연산자 (*=)

   let a = 10;  
   a *= 2;
   console.log(a); // 20

비교 연산자 (결과값의 참과 거짓에 따라 true또는 false를 반환하는 연산자)

1. 일치 연산자 (===) : 데이터타입까지 일치한 연산자 and

console.log(2 === 2);  // true
console.log("2" === 2);  // false

2. 불일치 연산자 (!==) : 거꾸로. 데이터타입까지 일치해야 false를 반환하는 연산자. 불일치하면 true를 반환함.

console.log(2 !== 2);  // false
console.log("2" !== 2);  // true

3. 작다 연산자 (<) , 작거나 같다 연산자 (<=)

console.log(2 < 3);   // true
console.log(2 <= 3);  // true
console.log(3 <= 3);  // true
console.log(4 <= 3);  // false

4. 논리 연산자


 4-1. 논리곱 연산자 (&&) : 모두 true일 때만 true 반환. &&는 and(둘다)의 의미

 

조건1 && 조건2 = 조건1, 조건2 둘다 만족시켜야만 true

console.log(true && true);  // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false);  // false

 
 4-2. 논리합 연산자 (||) : 두 값중 하나라도 true인 경우 true 반환. ||는 or(또는)의 의미

 

조건1 || 조건2 = 조건1, 조건2 중 하나라도 만족시키면 true

console.log(true || true);   // true
console.log(true || false);   // true
console.log(false || true);   // true
console.log(false || false);  // false

4-3. 논리부정 연산자 (!) : true값을 false로 바꿈. 사용빈도가 가장 높다!

   console.log(!true);  // false
   
   let a = true;
   console.log(!a);  // false

 5. 삼항 연산자 (활용빈도 상당히 높다) 조건에 따라 값을 선택한다.

 

조건  ?  조건이true인 경우  :  조건이 false인 경우

let a = 10;
let result = (a > 5) ? "크다" : "작다";
console.log(result);

// "크다"

 
위에서
삼항 (항이 3개: 첫번째항 : (a > 5), 두번째항 "크다", 세번째항 "작다"
첫번째 항이 조건이고, 조건이 true이면 result값에 두번째항 "크다"를 할당, false면 result값에 세번째항 "작다"를 할당

 

연습문제: 3항 연산자를 이용해서 y가 10보다 작은경우 작다를, 10보다 큰경우 크다를 출력해주세요.

let y = 20;
let answer = (y < 10) ? "크다" : "작다"; 
console.log(answer);
 
// "작다"

06. 타입 연산자 (typeof)

console.log(typeof "5"); // string 문자열 타입 
console.log(typeof 5);  // number 숫자열 타입