자바스크립트 연산자 종류 및 각 연산자의 예제를 정리해 보았습니다.
자바스크립트 산술연산자
자바스크립트 연산자 첫번째는, 산술 연산자 입니다. 산술 연산자는 우리가 흔히 아는 덧셈, 뺄셈, 곱셈 등의 사칙연산과 나머지 연산자 등을 말합니다.
<body>
<script>
// 덧셈
console.log( 1 +4 );
// 뺼셈
console.log( 1 - 4 );
// 곱셈
console.log( 3 * 8 );
// 나눗셈
console.log( 9 / 3 );
// 숫자+문자
console.log( 3 + "학기" );
const 홀수짝수체크 = (number) =>{
//2로 나누어 나머지가 0이면 짝수, 1이면 홀수
if ( number % 2 === 0 ){
console.log( "짝수" );
}else{
console.log( "홀수");
}
}
홀수짝수체크( 2 );
홀수짝수체크( 103 );
</script>
</body>
각 연산자에 맞게 아래와 같이 계산이 됩니다.
자바스크립트 증감 연산자
증감연산자는 숫자를 점차적으로 증가시키거나 감소시키는 연산자입니다. 자기 자신의 값을 변경시킵니다.
<body>
<script>
let num = 9;
num++;
console.log( num ); // 10출력
num--;
console.log( num ); // 다시 9 출력
</script>
</body>
자바스크립트의 비교 연산자
비교 연산자는 크거나 작음 혹은 같거나 같지 않음의 조합으로 값을 비교할 때 사용하는 연산자 입니다.
<body>
<script>
const value1 = 10;
const value2 = 20;
console.log(value1 > value2); // false
console.log(value1 < value2); //true
console.log(value1 === value2); //false
console.log(value1 !== value2); //true
</script>
</body>
자바스크립트 논리 연산자
논리 연산자는 true, false 해당 결과값에 대한 AND, OR, NOT 연산을 제공하는 연산자입니다.
<body>
<script>
const value1 = 10;
const value2 = 20;
const valTrue = value1 < value2;
const valFalse = value1 > value2;
// true && false = false
console.log(valTrue && valFalse);
// true || false = true
console.log(valTrue || valFalse);
// ! true && false = ftrue
console.log(!( valTrue && valFalse) );
</script>
</body>
true && false 연산의 결과는 false, true || false 연산의 결과는 true, true && false의 연산의 결과는 false이나 !(Not) 연산자로 인해 반대 true를 리턴하게 됩니다.
자바스크립트의 삼항연산자
삼항연산자는 조건에 따라 분기 처리를 가지는 연산을 수행하며, 3개의 피연산자를 갖게 됩니다.
삼항 연산자의 경우 ( 조건 ? 참인 경우 실행 코드 : 거짓인 경우 실행 코드 ) 의 형태로 작성되는데, 조건의 결과가 true 일 때에는 ? 다음의 코드 결과가 리턴되고, 조건의 결과가 false 일 때에는 : 다음의 코드 결과를 리턴합니다.
<body>
<script>
//결과는 거짓이므로 : 다음의 코드 결과를 반환함
const result = ( 100 > 200 ? "자바" : "스크립트");
console.log( result ); // 스크립트
</script>
</body>
자바스크립트의 Null 연산자(Nullish)
Nullish 연산자는 입력받은 피연산자 중 Null 혹은 undefined를 체크하여 정상적으로 할당된 값을 발견한 경우 해당 값을 리턴합니다.
삼항연산자는 물음표를 하나 쓰는 반면, 널리쉬 연산자는 물음표를 2개 사용합니다.
<body>
<script>
const uValue = undefined;
const nValue = null;
const normal = 300;
const nValue2 = null;
// undefined 이나 null 아닌 값을 만나면 해당 값을 리턴
console.log( uValue ?? nValue ?? normal ?? nValue2 );
</script>
</body>
순차적으로 연산을 하다가 undefined 이나 null 아닌 값을 만나면 해당 값을 리턴하고 종료됩니다.
자바스크립트 대입연산자
대입연산자는 대입연산자와, 산술연산자와 논리연산자 등의 조합으로 이루어진 연산자들의 조합으로 이루어진 연산자를 말합니다.
<body>
<script>
let numb = 10;
numb += 2;
console.log( numb );
numb *= 3;
console.log( numb );
</script>
</body>
자바스크립트 전개 구문
전개 구문이란, 반복 가능한 객체(Iterative)에 적용할 수 있는 것으로, 배열이나 객체, 문자열의 요소에 사용할 수 있습니다.
<body>
<script>
// 문자열의 경우
const string1 = "sapui5 자바스크립트";
console.log(...string1);
//배열의 경우
const array1 = [3, 4, 8, 12, 54, 20];
console.log(...array1);
const objTemp1 = [
{
name: "영수",
age: 30,
job: "student",
},
{
name: "철수",
age: 20,
job: "typewriter",
},
];
console.log(...objTemp1);
</script>
</body>
이상으로 자바스크립트 연산자 종류 에 대해서 알아보았습니다. 웹 개발시에는 자주 사용하지 않는 비트연산자 등 더 자세한 사항을 알고자 한다면 모질라 MDN 이 문서를 확인해 보시기 바랍니다.
본문 내용 중 undefined, null에 관련된 자세한 사항은 이 글을 참고해 보시기 바랍니다.