2022. 12. 28. 17:29ㆍJavascript/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>
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>
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 |