Javascript 입문 - 003. 산술연산자와 함수(Function)

You Seunghyeon·2023년 3월 8일

Javascript 입문

목록 보기

3/6

본 강의는 Programmers의 Hello, JavaScript: 자바스크립트 입문 강의를 기반으로 작성되었으나, 작성자에 의견에 따라 일부 내용이 추가되거나 수정되어 작성된 포스트입니다

01. 산술 연산자(Arithematic Operator)

JS에는 다른 프로그래밍 언어와 마찬가지로 일반적으로 사용하는 연산자가 존재한다. 연산자의 종류는 산술 연산자 , 할당 연산자 , 비교 연산자 , 논리 연산자 가 존재하는데, 이번에는 산술 연산자만 학습하고 나머지 연산자는 추후에 별도로 알아보도록 하겠다.

01.01. 이항 연산자

피연산자가 두개인 연산자이다. 사용 형식은 A (operator) B 으로 사용한다.

연산자의 종류는 다음과 같다.
덧셈: +
뺄셈: -
곱셈: *
나눗셈: /
나눗셈의 나머지: %

예제를 살펴보자.

let a = 10;
let b = 5;

console.log(a + b); // [output] 15
console.log(a - b); // [output] 5
console.log(a * b); // [output] 50
console.log(a / b); // [output] 2
console.log(a % b); // [output] 0

01.02. 단항 연산자

피연산자가 한개인 연산자이다. 사용 형식은 (operator) A 또는 A (operator) 으로 사용한다.

대표적으로 - 연산자가 있는데, 이는 A × -1 을 의미한다.

증감 연산자

증감 연사자는 변수에 저장된 값을 1씩 증가시키거나 감소시키는 연산자이다. 변수 앞이나 뒤에 위치에 따라 동작 방식이 다르다.

전위 증감 연산자

전위 증감 연산자는 변수를 먼저 증감시키고, 그 값을 반환한다.
사용 형식은 ++A 또는 --A 와 같이 사용한다.

let a = 5;
let b = ++a; // a를 1 증가시키고, b에 증가된 값을 할당한다

console.log(a); // [output] 6
console.log(b); // [output] 6

후위 증감 연산자

후위 증감 연산자는 변수 값을 먼저 반환하고, 그 후에 변수를 증감시킨다.
사용 형식은 A++ 또는 A-- 와 같이 사용한다.

let a = 5;
let b = a++; // a의 값을 b에 할당한 후, a를 1 증가시킨다.

console.log(a); // [output] 6
console.log(b); // [output] 5

01.03. 알아두면 좋은 `Math` 객체

Math 객체는 JS에서 기본적으로 내장 되어있는 수학 관련 객체이다. 이를 이용해 여러번 연산자를 사용할 필요 없이, 한번에 계산이 가능하다.

A 의 B 승: Math.pow(A,B)
A 의 제곱근: Math.sqrt(A)
0 ~ 1 사이의 임의의 난수: Math.random()

모든걸 외울 필요는 없고, 필요에 따라 찾아 사용하면 된다.
Math 객체에 대한 정보는 이 MDN 문서에서 자세히 찾아볼 수 있다.

02. 함수

JS에서 함수란, 일련의 작업을 수행하는 코드의 블록이다. 함수는 이름과 매개변수를 가지며, 필요에 따라 반환값을 반환할 수 있다.

함수는 반복되는 코드를 줄이고, 유지보수의 효율을 높여준다.

02.01. 함수의 선언 방식

함수의 선언 방식을 아래와 같다.

function 함수이름(매개변수1, 매개변수2, ...) {
  // 함수의 코드 블록
  return 반환값;
}

위 코드에서 매개변수(또는 파라미터; parameter)란 함수를 호출할 때 전달하는 값이며, 필요한 경우에만 적어주면 된다. 함수의 코드 블록에서는 필요한 작업을 수행한 후 return 키워드를 통해 값을 반환할 수 있다.

아래 예제를 살펴보자.

function sum(a, b) {
  return a + b;
}

let result = sum(1, 2);
console.log(result); // [output] 3

이 sum 함수는 두 개의 매개변수(a 와 b)를 받아 덧셈을 수행하고, 그 결과 값을 반환하는 코드다. 함수를 호출할 때 1 과 2 를 전달하면 return 코드를 통해 3 이 반환된다.

함수는 매개변수나 반환 값이 없을수도 있다. 반환 값이 없을 경우 undefined 를 반환한다. 값을 반환하는 경우 return 문을 이용하면 되고, 이 이후의 코드는 모두 실행되지 않는다.

02.02. 함수의 활용

중첩 함수(또는 내부 함수)

함수는 다른 함수 내부에서도 선언 가능하다.

function outer() {
  function inner() {
    console.log('Hello, world!');
  }
  
  inner();
}

outer(); // [output] Hellom world!

변수에 할당

함수를 변수에 할당할수도 있다. 아래 예제를 살펴보자.

let add = function(a, b) {
  return a + b;
}

let result = calculator(add, 1, 2);

console.log(result); // [output] 3

위 예제에서는 add 라는 변수에서 두 매개변수 a 와 b 를 덧셈하는 함수를 할당해 활용하고 있다.

함수의 매개변수로 전달

매개변수를 전달할 때, 이 매개변수가 함수가 될수도 있다. 아래 예제를 살펴보자.


function calculator(operation, a, b) {
  return operation(a, b);
}

let result = calculator(function(a, b) { return a * b; }, 3, 4);

console.log(result); // [output] 12

위 예제에서는 calculator 함수의 매개변수 operation 의 값으로 a 와 b 를 곱하고, 그 값을 반환하는 함수를 전달하고 있다.

우선, 오늘은 여기까지다.
다음 시간에는 비교(관계)연산자, 연산자의 우선순위, 문자열 활용, 배열 그리고 주석에 대해 살펴보겠다.

You Seunghyeon

이전 포스트

Javascript 입문 - 002. 변수와 자료형

다음 포스트

Javascript 입문 - 003. 산술연산자와 함수(Function)