웹 개발 공부 : Front-end/Javascript

Javascript #8 - 연산자

Developer KTU 2021. 1. 9. 23:19
반응형

★ 문자열 연산

console.log('my' + ' cat');
// 결과 : my cat

console.log('1' + 2);
// 2가 자동으로 문자열 2로 변환되어 계산됨
// 따라서 결과는 12 (타입은 string)

※ 다시 한번 언급하지만 string literals 기능은 매우 편리하다.

string literals를 사용하면 출력문안에 '나 "을 쓸때 탈출문자를 사용할 필요가 없으며, \n을 쓰지않고 그냥 평소 줄바꿈 하듯이 엔터키로 줄바꿈해도 적용된다.

console.log(`string literals : 1 + 2 = ${1 + 2}`);
console.log(`string literals : 
''''''
1 + 2 = ${1 + 2}`);

 

★ 정수 연산

정수연산은 이제 너무 익숙하니 ( +, -, /, %, *, **, +=, -=, *= 등등.. ) 이 부분에서 햇갈리는 부분만 정리하면,

let a = 3;
const x = ++a; // 먼저 a값에 1을 먼저 더한 후, 변수 x에 저장
console.log(`a = ${a}, x = ${x}`);
// 결과 : a = 4. x = 4


let b = 7;
const y = b++; // 먼저 b값을 변수 y에 저장한 후, 그 다음 b값에 1을 더함
console.log(`b = ${b}, y = ${y}`)
// 결과 : b = 7, y = 8

 

★ 비교 연산

<,<=,>,>= 이 있다. 너무 쉬운 부분이니 pass.

 

★ 논리 연산

// or, 기호 : ||
const a = false;
const b = 10 < 7;
const c = true;
console.log(`or = ${a || b || c}`);
//결과 : or = true
// or은 값에 하나라도 true값이 있으면 결과값도 무조건 true
// 이 말은 비교하는 값 중 하나라도 true 값이 있으면 비교를 멈춤


// and, 기호 : &&
console.log(`and = ${a && b && c}`);
//결과 : and = false
// and는 값에 하나라도 false값이 있으면 결과값도 무조건 false
// 이 말은 비교하는 값 중 하나라도 false 값이 있으면 비교를 멈춤
// and 연산자는 null체크도 가능하다. ( null이 기본적으로 false이기 때문 )


// not, 기호 : !
// 결과 값을 반대로
console.log(`not a = ${!a}`);
// 결과 : not a = true

위에도 언급했듯, and는 하나라도 false면 전체 결과가 false, or은 하나라도 true면 전체 결과도 true 이므로 값을 비교할 때, 시간이 오래 걸리는 함수가 가장 먼저오면 코드 수행시간 측면에서 손해이므로 심플한 변수값들을 앞에 두는 것이 효울적인 코드이다.

 

★ 이퀄 연산

const a = 5;
const b = '5';

// == : 타입을 고려하지 않고 비교
console.log(a == b)
// 결과 : true (a와 b는 타입은 다르지만 값이 5로 같으므로 서로 같다고 인식) 


// === : 타입을 고려하여 비교
console.log(a === b)
// 결과 : false (a와 b는 5로 같지만 타입이 서로 number와 string이므로 서로 다르다고 인식)
const intro1 = { name: 'KTU' };
const intro2 = { name: 'KTU' };
const intro3 = intro1;

console.log(intro1 == intro2) // 결과 : false
// 이유 : intro1와 intro2은 레퍼런스 값이 서로 다르기 때문에
console.log(intro1 === intro2) // 결과 : false
// 이유 : intro1와 intro2은 레퍼런스 값이 서로 다르기 때문에
console.log(intro1 === intro3) // 결과 : true
// 이유 : intro1와 intro2은 레퍼런스 값이 서로 같기 때문에
반응형