JavaScript 연산자 및 표현식

소개

"JavaScript 연산자와 표현식" 실습에 오신 것을 환영합니다. 이 실습에서는 JavaScript 프로그래밍의 기본 구성 요소인 연산자와 표현식에 대해 배우게 됩니다. 연산자는 값 (피연산자) 에 대한 연산을 수행하는 데 사용되는 특수 기호이며, 표현식은 값으로 해석되는 모든 코드 단위입니다.

덧셈, 뺄셈, 곱셈, 나눗셈과 같은 기본적인 산술 연산자로 시작합니다. 그런 다음 덧셈 연산자를 사용하여 문자열을 결합하는 방법, 즉 연결 (concatenation) 이라고 하는 프로세스에 대해 알아봅니다. 마지막으로 편리한 증감 연산자 (increment operator) 에 대해 배웁니다. 이 실습이 끝나면 JavaScript 에서 기본적인 데이터 조작을 수행할 수 있게 될 것입니다.

숫자에 덧셈 연산자 사용하기

이 단계에서는 덧셈 연산자 (+) 를 사용하여 숫자에 대한 덧셈을 수행하는 방법을 배웁니다. 이는 가장 일반적인 산술 연산 중 하나입니다.

실습 환경은 이미 ~/project 디렉터리 내에 index.html 파일과 script.js 파일을 갖추고 설정되어 있습니다. 모든 JavaScript 코드는 script.js 파일에 작성할 것입니다.

먼저 화면 왼쪽의 파일 탐색기에서 script.js 파일을 찾으십시오. 해당 파일을 클릭하여 편집기에서 엽니다.

이제 script.js에 다음 코드를 추가합니다. 이 코드는 두 개의 숫자 변수를 선언하고, 두 숫자를 더한 다음, console.log()를 사용하여 결과를 브라우저의 개발자 콘솔에 출력합니다.

// Step 1: Addition
let num1 = 10;
let num2 = 5;
let sum = num1 + num2;
console.log("The sum is:", sum);

코드를 추가한 후 Ctrl+S를 눌러 파일을 저장합니다.

출력을 보려면 인터페이스 상단의 Web 8080 탭으로 이동하십시오. 그런 다음 F12를 누르거나 페이지에서 마우스 오른쪽 버튼을 클릭하고 "Inspect"를 선택한 다음 "Console" 탭을 클릭하여 개발자 콘솔을 엽니다. The sum is: 15 메시지가 표시되어야 합니다.

뺄셈 및 곱셈 연산자 적용

이 단계에서는 뺄셈 (-) 및 곱셈 (*) 연산자를 적용합니다. 이 연산자들은 덧셈 연산자와 동일하게 작동하지만 다른 계산을 수행합니다.

~/project/script.js 파일 편집을 계속합니다. 기존 코드 아래에 다음 코드 줄을 추가하여 동일한 두 숫자의 차이와 곱을 계산합니다.

// Step 2: Subtraction and Multiplication
let difference = num1 - num2;
console.log("The difference is:", difference);

let product = num1 * num2;
console.log("The product is:", product);

파일을 다시 저장합니다 (Ctrl+S). Web 8080 탭을 새로고침합니다 (탭 내의 새로고침 버튼을 사용할 수 있습니다). 개발자 콘솔에 이제 덧셈, 뺄셈 및 곱셈 결과가 표시됩니다.

나눗셈 및 나머지 연산자 구현

이 단계에서는 나눗셈 (/) 및 나머지 (%) 연산자를 살펴봅니다. 나눗셈 연산자는 표준 나눗셈을 수행하고, 나머지 연산자는 나눗셈의 나머지를 반환합니다. 이는 숫자가 짝수인지 홀수인지 확인하는 것과 같은 작업에 유용합니다.

~/project/script.js 파일 끝에 다음 코드를 추가합니다.

// Step 3: Division and Modulus
let quotient = num1 / num2;
console.log("The quotient is:", quotient);

let remainder = num1 % 3; // Using 3 to get a non-zero remainder
console.log("The remainder of 10 divided by 3 is:", remainder);

파일을 저장하고 Web 8080 탭을 새로고침합니다. 콘솔을 확인하여 나눗셈 및 나머지 연산의 새로운 출력을 확인합니다. 몫은 2이고 나머지는 1임을 확인해야 합니다.

더하기 연산자를 사용한 문자열 연결

이 단계에서는 + 연산자의 다른 용도인 문자열 연결 (string concatenation) 을 살펴보겠습니다. 문자열과 함께 사용될 때 + 연산자는 문자열들을 함께 결합하여 새롭고 더 긴 문자열을 생성합니다.

두 개의 문자열 변수를 생성하고 연결해 보겠습니다. ~/project/script.js 파일 끝에 이 코드를 추가합니다.

// Step 4: String Concatenation
let firstName = "Hello";
let lastName = "World";
let fullName = firstName + " " + lastName;
console.log(fullName);

위 예시에서는 firstName, 공백 " ", 그리고 lastName을 결합하여 완전한 문구를 형성하고 있습니다.

파일을 저장한 후 Web 8080 탭을 새로고침합니다. 콘솔에 연결된 문자열인 Hello World가 표시됩니다.

++ 연산자를 사용한 변수 증가

마지막 단계에서는 증감 연산자 (++) 에 대해 알아보겠습니다. 이는 단항 연산자 (unary operator) 로, 하나의 피연산자 (operand) 에 대해 작동합니다. 숫자 변수에 1 을 더하는 편리한 축약형으로, 루프 (loops) 와 카운터 (counters) 에서 매우 흔하게 사용되는 연산입니다.

작동 방식을 확인하기 위해 ~/project/script.js 파일 끝에 다음 코드를 추가합니다.

// Step 5: Increment Operator
let counter = 0;
counter++; // This is equivalent to counter = counter + 1;
console.log("The counter value is:", counter);

파일을 마지막으로 저장하고 Web 8080 탭을 새로고침합니다. 콘솔에 카운터의 최종 값인 1이 표시될 것입니다.

요약

이 랩을 완료하신 것을 축하드립니다!

이 랩에서는 JavaScript 연산자 (operators) 와 표현식 (expressions) 의 기본 사항을 배웠습니다. 다음을 사용하는 연습을 했습니다.

• 기본적인 수학을 위한 산술 연산자 (arithmetic operators): + (덧셈), - (뺄셈), * (곱셈), / (나눗셈), % (나머지).
• 텍스트를 결합하기 위한 문자열 연결 (string concatenation) 에 사용되는 + 연산자.
• 숫자의 값을 1 씩 증가시키는 바로 가기 방법으로 사용되는 ++ 증감 연산자.

이러한 연산자들은 JavaScript 의 필수적인 구성 요소이며 거의 모든 프로그램에서 사용됩니다. 이제 향후 프로젝트에서 더 복잡한 로직과 기능을 다룰 준비가 되었습니다.