자바스크립트: 연산자와 형변환

괴발개발·2025년 1월 10일

LG CNS AM Inspire Camp 1기

목록 보기
12/17
post-thumbnail

1. 연산자

<script>
	// 나눗셈, 나머지 연산자
	console.log(`7 / 5 = ${ 7 / 5 }`);	// 7 / 5 = 1.4
	console.log(`7 % 5 = ${ 7 % 5 }`);	// 7 % 5 = 2 <= 나머지
	
	// 나머지 연산의 부호는 왼쪽 피연자의 부호를 따름
	console.log(`7 % 5 = ${ 7 % 5 }`);		// 7 % 5 = 2
	console.log(`7 % -5 = ${ 7 % -5 }`);	// 7 % -5 = 2
	console.log(`-7 % 5 = ${ -7 % 5 }`);	// -7 % 5 = -2
	console.log(`-7 % -5 = ${ -7 % -5 }`);	// -7 % -5 = -2
	
	// 문자열 결합
	console.log("Hello, " + 'JavaScript' + `!!!!`);
	
	// 문자열의 일부를 선택 => 문자열[인덱스]
	//               0         1      
	//               012345678901234567
	const message = "Hello, JavaScript!";
	console.log(message[0]);	// H <= 첫번째 글자
	console.log(message[17]);	// !
	console.log(message[message.length - 1]);	// ! <= 마지막 글자
	console.log(message[18]);	// undefined
	
	// postfix 방식, prefix 방식
	let x = 100;
	console.log(x);	// 100
	if (x++ > 100) {
      console.log("100 초과");
    } else {
      console.log("100 이하");	// 100 이하
    }
	console.log(x);	// 101

	let y = 100;
	console.log(y);	// 100
	if (++y > 100) {
      console.log("100 초과");	// 100 초과
    } else {
      console.log("100 이하");
    }
	console.log(y);	// 101
</script>
<script>
	// 동등 연산자(equality operator), 일치 연산자(strict equality operator)
	let n = 100;
	let s = "100";
	
	console.log(n, s);					// 100 "100"
	console.log(typeof n, typeof s);	// number string

	if (n == s) {
      console.log("동등 연산자: 같다");	// 같다 <= 두 변수의 값을 비교
    } else {
      console.log("동등 연산자: 다르다");
    }
	
	if (n === s) {	// if (typeof n == typeof s && n == s)
      console.log("일치 연산자: 같다");
    } else {
      console.log("일치 연산자: 다르다"); // 다르다 <= 두 변수의 타입과 값을 함께 비교
    }

	
	// Object.is() 메소드
	console.log(-0 === +0);						// true
	console.log(Object.is(-0, +0));				// false
	
	console.log(typeof NaN);					// number
	console.log(Number.NaN === NaN);			// false
	console.log(Object.is(Number.NaN, NaN));	// true
	
	
	// 삼항 연산자 => (조건식) ? 참일 때 : 거짓일 때
	let x = 100;
	// if - else 구문으로 조건식을 구현
	if (x > 100) {
      console.log("100 초과");
    } else {
      console.log("100 이하");
    }
	// 동일한 로직을 삼항 연산자로 표현
	console.log(x > 100 ? "100 초과" : "100 이하");
</script>

2. 자료형 변환

  • 강제 자료형 변환: String(), Number(), Boolean()
<script>
  // 문자열로 변환
  console.log(String(52));
  console.log(String(true));
  // 숫자로 변환
  console.log(Number('52'));
  console.log(Number(true));	// 1
  console.log(Number(false));	// 0
  console.log(Number("숫자"));	// NaN
  // 숫자로 변환 가능 여부를 확인
  console.log(Number("52") == NaN);		  // false
  console.log(Number("오십이") == NaN);	// false
  console.log(NaN == NaN);				  // false
  console.log(isNaN(Number("52")));		  // false
  console.log(isNaN(Number("오십이")));	// true
  console.log(isNaN(NaN));				  // true
  // 불(boolean)으로 변환
  // 0, -0, null, false, NaN, undefined, '' => false
  // 그 외의 값은 true
</script>
  • 자동 자료형 변환
<script>
  // 숫자와 문자열에 + 연산자를 사용하면 숫자를 문자열로 자동 변환
  // + 연산자는 문자열 결합 연산자로 사용
  console.log(10 + 20);		// 30
  console.log("10" + 20);	// 1020
  console.log(10 + "20");	// 1020
  console.log("10" + "20");	// 1020

  // 숫자와 문자열에 + 가 아닌 다른 연산자를 사용하면 문자열을 숫자로 자동 변환
  console.log(20 - 10);		// 10
  console.log("20" - 10);	// 10
  console.log(20 - "10");	// 10
  console.log("20" - "10");	// 10

  console.log("20" * 10);	// 200
  console.log("20" / 10);	// 2
  console.log("20" % 10);	// 0

  // 부정 연산자를 두 번 사용하면 Boolean() 함수를 사용하는 것과 동일
  console.log(Boolean(0), !!0);
  console.log(Boolean(1), !!1);
</script>

0개의 댓글