기타 연산자

2022. 12. 28. 17:29Javascript/TCP school

문자열 결합 연산자

덧셈(+) 연산자

1. 피연산자가 둘 다 숫자이면, 산술 연산인 덧셈을 수행합니다.

2. 피연산자가 하나라도 문자열이면, 문자열 결합을 수행합니다.

var x = 3 + 4;                   // 피연산자가 둘 다 숫자이면 덧셈 연산을 수행함.

var y = "좋은 " + "하루 되세요!" // 피연산자가 둘 다 문자열이면 문자열 결합 연산을 수행함.

var z = 12 + "월"                // 피연산자가 하나라도 문자열이면 문자열 결합 연산을 수행함.

삼항 연산자(ternary operator)

유일히, 피연산자를 세 개나 가지는 조건 연산자

 

삼항 연산자의 문법은 다음과 같습니다.

표현식 ? 반환값1 : 반환값2

물음표(?) 앞의 표현식에 따라 결괏값이 참이면 반환값1을 반환하고, 결괏값이 거짓이면 반환값2를 반환

var x = 3, y = 5;

var result = (x > y) ? x : y   // x가 더 크면 x를, 그렇지 않으면 y를 반환함.

document.write("둘 중에 더 큰 수는 " + result + "입니다.");

짧은 if / else 문 대신 사용할 수 있으며, 코드를 간결하게 만든다.


쉼표 연산자

쉼표 연산자를 for 문에서 사용하면, 루프마다 여러 변수를 동시에 갱신할 수 있음

// 루프마다 i의 값은 1씩 증가하고, 동시에 j의 값은 1씩 감소함.

for (var i = 0, j = 9; i <= j; i++, j--) {

    document.write("i의 값은 " + i + "이고, j의 값은 " + j + "입니다.<br>");

}

delete 연산자

피연산자인 객체, 객체의 프로퍼티(property) 또는 배열의 요소(element) 등을 삭제

성공적으로 삭제되었을 경우에는 참(true)을 반환

삭제하지 못했을 경우에는 거짓(false)을 반환

 

피연산자가 단 하나뿐인 단항 연산자

피연산자의 결합 방향은 오른쪽에서 왼쪽

var arr = [1, 2, 3];          // 배열 생성

delete arr[2];                // 배열의 원소 중 인덱스가 2인 요소를 삭제함.

document.write(arr + "<br>"); // [1, 2, ]

// 배열에 빈자리가 생긴 것으로 undefined 값으로 직접 설정된 것은 아님.

document.write(arr[2] + "<br>");

// 배열의 요소를 삭제하는 것이지 배열의 길이까지 줄이는 것은 아님.

document.write(arr.length);
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>JavaScript Operators</title>
</head>

<body>

	<h1>delete 연산자</h1>

	<script>
		var arr = [1, 2, 3]; // 배열 생성
		delete arr[2]; // 배열의 원소 중 인덱스가 2인 요소를 삭제함.
		document.write(arr + "<br>"); // 1, 2,
		// 배열에 빈자리가 생긴 것으로 undefined 값으로 직접 설정된 것은 아님.
		document.write(arr[2] + "<br>"); // undefined
		// 배열의 요소를 삭제하는 것이지 배열의 크기까지 줄이는 것은 아님.
		document.write(arr.length); // 3
	</script>
	
</body>

</html>

 

 


 

JavaScript Operators

delete 연산자


typeof 연산자

피연산자의 타입을 반환

피연산자가 단 하나뿐인 단항 연산자

피연산자의 결합 방향은 오른쪽에서 왼쪽

typeof 연산자의 결괏값
숫자, NaN "number"
문자열 "string"
true, false "boolean"
null "object"
undefined "undefined"
함수 "function"
함수가 아닌 객체 "object"
typeof "문자열"   // string

typeof 10         // number

typeof NaN        // number

typeof false      // boolean

typeof undefined  // undefined

typeof new Date() // object

typeof null       // object

instanceof 연산자

피연산자인 객체가 특정 객체의 인스턴스인지 아닌지를 확인

피연산자가 특정 객체의 인스턴스이면 참(true)을 반환하고, 특정 객체의 인스턴스가 아니면 거짓(false)을 반환

두 개의 피연산자를 가지는 이항 연산자
피연산자들의 결합 방향은 왼쪽에서 오른쪽
var str = new String("이것은 문자열입니다.");

str instanceof Object;  // true
str instanceof String;  // true
str instanceof Array;   // false
str instanceof Number;  // false
str instanceof Boolean; // false

코딩연습 ▶

 

인스턴스와 객체에 대한 더 자세한 사항은 자바스크립트 객체의 개념 수업에서 확인

자바스크립트 객체의 개념 수업 확인 =>


void 연산자

피연산자로 어떤 타입의 값이 오던지 상관없이 언제나 undefined 값만을 반환

피연산자가 단 하나뿐인 단항 연산자

피연산자의 결합 방향은 오른쪽에서 왼쪽

피연산자의 결합 방향은 오른쪽에서 왼쪽

<a href="javascript:void(0)">이 링크는 동작하지 않습니다.</a> 

<a href="javascript:void(document.body.style.backgroundColor='yellow')">
    이 링크도 동작하지 않지만, HTML 문서의 배경색을 바꿔줍니다.
</a>
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>JavaScript Operators</title>
</head>

<body>

	<h1>void 연산자</h1>

	<a href="javascript:void(0)">이 링크는 동작하지 않습니다.</a><br><br>
	<a href="javascript:void(document.body.style.backgroundColor='yellow')">
		이 링크도 동작하지 않지만, HTML 문서의 배경색을 바꿔줍니다.
	</a>
	
</body>

</html>​

JavaScript Operators

void 연산자

이 링크는 동작하지 않습니다.

이 링크도 동작하지 않지만, HTML 문서의 배경색을 바꿔줍니다.

정의되지 않은 원시 타입의 값을 얻기 위해 void(0)과 같은 형태로 종종 사용됨

 

참고

http://www.tcpschool.com/javascript/js_operator_etc

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

'Javascript > TCP school' 카테고리의 다른 글

반복문  (0) 2022.12.30
조건문  (0) 2022.12.29
비트 연산자  (0) 2022.12.28
논리 연산자  (0) 2022.12.28
비교 연산자  (0) 2022.12.28