2.20 JavaScript 변수 활용

변수를 활용한 연산

변수에 숫자 타입의 값이 할당되어 있는 경우 숫자 타입에 사용 가능한 모든 연산이 가능합니다.

let number = 10;
console.log(number + 2); // 12
console.log(number - 5); // 5
console.log(number * 3); // 30
console.log(number / 2); // 5
console.log(number % 3); // 1
console.log(number); // 10

그러나 각각의 연산은 독립적으로 이뤄질 뿐, number는 그대로 10이 할당되어 있습니다. 연산의 결과를 변수에 반영하려면 어떻게 해야할까요? 앞서 학습한 재할당을 하면 됩니다.

let number = 10;
number = number + 2;
console.log(number); // 12

number = number * 3;
console.log(number); // 36

 

실습 1)

주어진 두 변수를 활용하여 삼각형의 너비를 출력해 보세요.

 

// 다음 두 변수를 활용하여 삼각형의 너비를 출력해 보세요. 삼각형의 너비 = 밑변 * 높이 / 2
let base = 10;
let height = 5;

// console.log()내부에 삼각형의 너비를 구하는 코드를 작성하세요.
console.log((base * 2) / height);

 

템플릿 리터럴(template literal)

값을 큰 따옴표(”), 작은 따옴표(’), 백틱(`)으로 값을 감싸면 문자열(string) 타입이 된다는 것을 이전에 학습했습니다. 이중에서 백틱을 사용하는 방법을 템플릿 리터럴이라고 합니다. 템플릿 리터럴은 큰 따옴표, 작은 따옴표를 사용한 표기 방법과는 다른 기능을 가지고 있습니다. 특히, 문자열 내부에 변수 삽입할 수 있는 기능은 매우 유용하게 사용되므로 반드시 알아두어야 합니다.

템플릿 리터럴 내부에 ${}를 사용하여 변수를 삽입할 수 있습니다. 이때, 문자열이 할당되지 않은 변수도 문자열로 취급됩니다.

let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(`${course} ${cohort} ${name}`); // 'SEB FE 99 kimcoding'

단어와 단어 사이에 공백을 삽입하기 위해 ‘ ‘를 사용하는 것보다 템플릿 리터럴을 사용하는 것이 가독성 측면에서 훨씬 우수합니다.

let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(course + ' ' + cohort + ' ' + name); // 'SEB FE 99 kimcoding'

---

 

조금 더 자세히 이야기하자면, 함수는 입력(input)을 받아 출력(output)을 하는 하나의 작은 기능 단위입니다. 아래의 코드는 두 개의 숫자를 입력 받아 더한 결과를 출력하는 기능을 가진 함수입니다.

function sum(num1, num2) { // sum이라는 이름의 함수는 함수 외부로부터 두 개의 숫자(num1, num2)를 입력 받습니다.
  let result; // 변수 result 선언합니다.
  result = num1 + num2; // result에 외부에서 전달 받은 두 개의 숫자의 합을 할당합니다.
  return result; // result에 할당한 값을 함수 외부로 반환합니다.
}

let output = sum(1, 2); // 함수 sum에 차례대로 num1에는 숫자 1, num2에는 숫자 2를 전달하여 나온 결과를 변수 output에 할당합니다.
console.log(output); // 변수 output에 할당된 값을 출력합니다. -> 결과: 3