JavaScript Assignment
JavaScript에서 변수에 값을 할당하는 것은 가장 기본적인 연산 중 하나입니다. 이를 위해 = 연산자를 사용합니다.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The Assignment (=) Operator</h2>
<p> x = 5, y = 2 일 때 x + y 의 값은?</p>
<p id="demo1"></p>
<script>
// Assign the value 5 to x
let x = 5;
// Assign the value 2 to y
let y = 2;
// Assign the value x + y to z
let z = x + y;
// Display z
document.getElementById("demo1").innerHTML = "x + y = " + z;
</script>
</body>
</html>JavaScript Operators
The Assignment (=) Operator
x = 5, y = 2 일 때 x + y 의 값은?
// 여러 변수 동시에 값을 할당하는 것도 지원
let a = 5, b = 6, c = 7;
// 연속적인 할당도 가능, 모든 변수의 값은 5
let a = b = c = 5;
JavaScript Arithmetic Operators(산술 연산자)
더하기 (+), 빼기(-), 곱하기(*), 나누기(/), 나머지연산자(%), 증가 연산자(++), 감소 연산자(--), 지수 연산자(**)
let result = 10 + 5; // 결과는 15
let result = 10 - 5; // 결과는 5
let result = 10 * 5; // 결과는 50
let result = 10 / 5; // 결과는 2
let result = 10 % 3; // 결과는 1
let counter = 0;
counter++; // counter는 이제 1
let counter = 0;
counter--; // counter는 이제 -1
let result = 10 ** 2; // 결과는 100, 첫 번째 숫자를 두 번째 숫자의 지수로 제곱복합 할당 연산자
let x = 10;
x += 5; // x = x + 5; 와 동일, 결과는 x = 15
x -= 3; // x = x - 3; 와 동일, 결과는 x = 12
x *= 2; // x = x * 2; 와 동일, 결과는 x = 24
x /= 4; // x = x / 4; 와 동일, 결과는 x = 6
x %= 2; // x = x % 2; 와 동일, 결과는 x = 0
JavaScript Comparison Operators(비교 연산자)
JavaScript에서 비교 연산자는 주로 조건문에서 사용되며,
두 값의 비교 결과에 따라 Boolean 값을 반환합니다(true 또는 false)
// 등호 (==): 두 값이 동일한지 확인합니다. 타입 변환이 발생할 수 있습니다.
console.log(5 == '5'); // 결과는 true
// 부등호 (!=): 두 값이 다른지 확인합니다. 타입 변환이 발생할 수 있습니다.
console.log(5 != '5'); // 결과는 false
// 일치 연산자 (===): 두 값이 동일하며, 타입까지 일치하는지 확인합니다.
// 타입 변환이 발생하지 않습니다.
console.log(5 === '5'); // 결과는 false
// 불일치 연산자 (!==): 두 값이 다르거나, 또는 타입이 다른지 확인합니다.
// 타입 변환이 발생하지 않습니다.
console.log(5 !== '5'); // 결과는 true
// 크다 (>): 왼쪽 값이 오른쪽 값보다 큰지 확인합니다.
console.log(5 > 3); // 결과는 true
// 작다 (<): 왼쪽 값이 오른쪽 값보다 작은지 확인합니다.
console.log(5 < 3); // 결과는 false
// 크거나 같다 (>=): 왼쪽 값이 오른쪽 값보다 크거나 같은지 확인합니다.
console.log(5 >= 3); // 결과는 true
// 작거나 같다 (<=): 왼쪽 값이 오른쪽 값보다 작거나 같은지 확인합니다.
console.log(5 <= 3); // 결과는 false
// 삼항 연산자
// 조건식 ? true 일때 값 : flase 일때 값
let age = 15;
let type = age >= 18 ? 'Adult' : 'Minor';
console.log(type); // 출력: "Minor"
JavaScript String Comparison(문자열 비교)
JavaScript에서 문자열 비교는 대개 사전 순서(사전식 정렬 순서 또는 렉시코그래픽 순서)에 따라 이루어집니다.
이는 사람이 사전에서 단어를 찾는 방식과 유사하게 동작합니다.
문자열 비교는 각 문자의 Unicode 값에 기반하여 수행됩니다.
console.log('apple' < 'banana');
// 결과는 true, 왜냐하면 'apple'이 'banana'보다 사전 순서에서 앞서기 때문입니다.
console.log('apple' == 'Apple');
// 결과는 false, 왜냐하면 대소문자가 다르기 때문입니다.
console.log('apple' === 'apple');
// 결과는 true, 왜냐하면 두 문자열이 동일하기 때문입니다.
console.log('apple' > 'Apple');
// 결과는 true, 왜냐하면 소문자가 대문자보다 더 높은 Unicode 값을 가지기 때문입니다.
Adding Strings and Numbers
숫자 더하기: 두 숫자를 더하면, 당연히 그 두 수의 합계가 반환됩니다.
문자열 연결: 두 문자열을 더하면, 두 문자열이 연결됩니다.
문제는 숫자와 문자열을 함께 더하려고 하면 어떻게 될까입니다.
이 경우 JavaScript는 자동으로 숫자를 문자열로 변환하고, 두 문자열을 연결합니다. 이를 "타입 강제"라고 합니다.
또한, 더하기 연산자를 사용할 때 주의해야 할 한 가지는, 다른 산술 연산자들과 다르게 더하기 연산자는 왼쪽에서 오른쪽으로 순차적으로 계산되지 않을 수 있다는 점입니다. JavaScript는 왼쪽에서 오른쪽으로 연산을 수행하므로, 문자열과 숫자가 혼합된 경우 결과는 예상과 다를 수 있습니다.
console.log(5 + 5 + '5'); // 출력: "105"
console.log('5' + 5 + 5); // 출력: "555"첫 번째 예제에서, 숫자 5와 5를 더한 결과를 문자열 '5'와 연결하므로, 결과는 '105'입니다.
두 번째 예제에서는 문자열 '5'를 숫자 5와 연결한 결과를 다시 숫자 5와 연결하므로, 결과는 '555'입니다.
따라서, JavaScript에서 문자열과 숫자를 더할 때는 이러한 특징을 이해하고 있어야 합니다.
JavaScript Logical Operators(논리 연산자)
JavaScript에서 논리 연산자는 주로 조건문에서 사용되며,
주어진 하나 이상의 논리적인 표현식을 기반으로 Boolean 값을 반환합니다 (true 또는 false).
// JavaScript에서 논리 연산자는 주로 조건문에서 사용되며,
// 주어진 하나 이상의 논리적인 표현식을 기반으로 Boolean 값을 반환합니다 (true 또는 false).
console.log(true && true); // 결과는 true
console.log(true && false); // 결과는 false
// 논리 OR (||): 이 연산자는 두 피연산자 중 하나라도 참일 경우 true를 반환합니다.
console.log(true || false); // 결과는 true
console.log(false || false); // 결과는 false
// 논리 NOT (!): 이 연산자는 피연산자의 논리 값을 반전시킵니다.
// 즉, true를 false로, false를 true로 바꿉니다.
console.log(!true); // 결과는 false
console.log(!false); // 결과는 true논리 연산자는 종종 여러 조건을 결합하여 복잡한 논리 테스트를 수행하는 데 사용됩니다.
예를 들어, 사용자가 입력한 암호가 길이 조건을 만족하고 특수 문자를 포함하는지 확인하려면
논리 AND 연산자를 사용할 수 있습니다.
let password = 'my$ecretP@ssword';
let isValid = password.length >= 8 && password.includes('$') && password.includes('@');
console.log(isValid); // 결과는 true
JavaScript Type Operators
JavaScript에서는 데이터 타입을 다루기 위해 두 가지 주요 연산자를 사용합니다:
typeof 연산자와 instanceof 연산자.
typeof 연산자
이 연산자는 피연산자의 데이터 타입을 문자열 형태로 반환합니다.
이는 변수의 데이터 타입을 확인하거나 조건문에서 특정 데이터 타입에 따른 다른 동작을 수행할 때 유용합니다.
console.log(typeof 'Hello'); // 출력: "string"
console.log(typeof 3.14); // 출력: "number"
console.log(typeof true); // 출력: "boolean"
console.log(typeof undefined); // 출력: "undefined"
console.log(typeof {name: 'John', age: 23}); // 출력: "object"
console.log(typeof null); // 출력: "object" (JavaScript의 알려진 버그)
console.log(typeof function() {}); // 출력: "function"instanceof
연산자: 이 연산자는 특정 객체가 특정 클래스의 인스턴스인지 여부를 확인하는 데 사용됩니다.
이 연산자는 주로 객체 지향 프로그래밍에서 사용되며,
왼쪽 피연산자가 오른쪽 피연산자의 인스턴스일 경우 true를 반환합니다.
let date = new Date();
console.log(date instanceof Date); // 출력: true
console.log(date instanceof Object); // 출력: true (Date는 Object의 하위 클래스이므로)
console.log(date instanceof Array); // 출력: false
JavaScript Bitwise Operators
비트 연산자(Bitwise operators)는 피연산자를 32비트의 이진수로 간주하고,
비트 수준에서 동작하는 연산자입니다.
// 비트 AND (&): 각 비트를 AND 연산합니다. 두 비트가 모두 1일 경우에만 결과 비트가 1입니다.
console.log(5 & 1); // 출력: 1 (101 & 001 = 001)
// 비트 OR (|): 각 비트를 OR 연산합니다. 두 비트 중 하나라도 1일 경우 결과 비트가 1입니다.
console.log(5 | 1); // 출력: 5 (101 | 001 = 101)
// 비트 XOR (^): 각 비트를 XOR 연산합니다. 두 비트가 서로 다를 경우 결과 비트가 1입니다.
console.log(5 ^ 1); // 출력: 4 (101 ^ 001 = 100)
// 비트 NOT (~): 비트를 반전시킵니다. 0은 1로, 1은 0으로 바뀝니다.
console.log(~5); // 출력: -6 (~101 = 010)
// 왼쪽 시프트 (<<): 이진수를 왼쪽으로 이동시킵니다. 오른쪽에는 0이 채워집니다.
console.log(5 << 1); // 출력: 10 (101 << 1 = 1010)
// 오른쪽 시프트 (>>): 이진수를 오른쪽으로 이동시킵니다. 왼쪽에는 가장 높은 비트가 채워집니다.
console.log(5 >> 1); // 출력: 2 (101 >> 1 = 010)
// 부호 없는 오른쪽 시프트 (>>>): 이진수를 오른쪽으로 이동시킵니다. 왼쪽에는 0이 채워집니다.
console.log(5 >>> 1); // 출력: 2 (101 >>> 1 = 010)비트 연산자는 웹개발에서는 그리 자주 사용되지 않지만, 특정 알고리즘 구현이나 저수준 작업을 수행할 때 유용하게 쓰입니다.
또한 이런 연산들은 일반적으로 매우 빠른 계산 속도를 가지고 있습니다.
'FRONTEND > JAVASCRIPT' 카테고리의 다른 글
| JavaScript 튜토리얼 - JavaScript Data Types (0) | 2023.08.16 |
|---|---|
| JavaScript 튜토리얼 - JavaScript Const (0) | 2023.07.28 |
| JavaScript 튜토리얼 - JavaScript Let (0) | 2023.07.24 |
| JavaScript 튜토리얼 - JavaScript Variables (0) | 2023.07.21 |
| JavaScript 튜토리얼 - JavaScript Syntax (0) | 2023.07.19 |