연산자

• 자바스크립트에서는 다양한 연산자를 제공하여 변수나 상수를 다양한 방법으로 조작할 수 있다.

산술 연산자(arithmetic operators)

1-1. 더하기 연산자(+)

console.log(2 + 3);       // 5
console.log("2" + 3);     // "23"

• 더하기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 문자열로 변환한다.

1-2. 빼기 연산자(-)

console.log(1 - "2");     // -1
console.log(1 - 2);       // -1
console.log("five" - 2);  // NaN

• 빼기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환한다.

1-3. 곱하기 연산자(*)

console.log(2 * 3);       // 6
console.log("2" * 3);     // 6
console.log("two" * 3);   // NaN

1-4. 나누기 연산자(/)

console.log(6 / 3);       // 2
console.log("6" / 3);     // 2
console.log("six" / 3);   // NaN

1-5. 나머지 연산자(%)

console.log(7 % 3);       // 1
console.log("7" % 3);     // 1
console.log("seven" % 3); // NaN

할당 연산자(assignment operators)

2-1. 등호 연산자(=)

let x = 10;
console.log(x);   // 10

2-2. 더하기 등호 연산자(+=)

let x = 10;
x += 5;
console.log(x);   // 15

2-3. 빼기 등호 연산자(-=)

let x = 10;
x -= 5;
console.log(x);   // 5

x -= 20; or x = x -20;
console.log(x);   // -10

2-4. 곱하기 등호 연산자(*=)

let x = 10;
x *= 2;
console.log(x);   // 20

2-5. 나누기 등호 연산자(/=)

let x = 10;
x /= 5;
console.log(x);   // 2

2-6. 나머지 등호 연산자(%=)

let x = 10;
x %= 3;
console.log(x);   // 1

비교 연산자(comparison operators)

• true 또는 false를 반환한다.

3-1. 일치 연산자(===)

• 타입까지 일치해아 true를 반환한다.

console.log(2 === 2);     // true
console.log("2" === 2);   // false

3-2. 불일치 연산자(!==)

• 타입까지 일치해아 false를 반환한다.
• 일치 연산자의 반대 값이 나온다.

console.log(2 !== 2);     // false
console.log("2" !== 2);   // true

3-3. 작다 연산자(<)

console.log(2 < 3);     // true
console.log(2 < "3");   // true

 // 작거나 같다 연산자(<=)
console.log(2 <= 3);     // true
console.log(2 <= "3");   // true
console.log(3 <= 2);     // false

3-4. 크다 연산자(>)

console.log(2 > 3);     // false
console.log(2 > "3");   // false

// 크거나 같다 연산자(>=)
console.log(2 >= 3);     // false
console.log(2 >= "3");   // false
console.log(2 >= 2);     // true

논리 연산자(logical operators)

• true 또는 false를 비교한다

4-1. 논리곱 연산자(&&)

• 값 모두 true일 때 true를 반환한다.

console.log(true && true);    // true
console.log(true && false);   // false
console.log(false && true);   // false
console.log(false && false);  // false

4-1. 논리합 연산자(||)

• 두 값 중 하나라도 true인 경우 true를 반환한다.

console.log(true || true);    // true
console.log(true || false);   // true
console.log(false || true);   // true
console.log(false || false);  // false

4-1. 논리부정 연산자(!)

• 값을 반대로 봐꾼다.

console.log(!true);      // false
console.log(!false);     // true

let a = true;
console.log(!a);         // false 

삼항 연산자(ternary operator) ☆☆☆

• 조건에 따라 값을 선택한다.

let x = 10;
let result = x > 5 ? "크다" : "작다";
// x > 5: 조건, 크다: true, 작다:false
console.log("-----");
console.log(result);  // 크다

문제) 3항 연산자를 이용해서 y가 10보다 작은 경우 작다를 또는 10보다 크다면 크다를 console.log로 출력해주세요!
답안)

let y = 20;
let answer = y < 10 ? "작다" : "크다";
console.log(answer);  // 크다

타입 연산자(type operators)

console.log(typeof 123);         // "number"
console.log(typeof "123");       // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object"
console.log(typeof {});          // "object"
console.log(typeof []);          // "object"
console.log(typeof function(){});   // "function"

• typeof 연산자는 원시 자료형의 경우, 해당 자료형의 이름을, 객체나 함수의 경우, "object" 또는 "function"을 반환한다.
  typeof null의 경우 "object"를 반환하는 버그가 있다.

함수

• input과 output을 가지고 있는 어떤 기능의 단위이다.

function add(매개변수) {
  // 함수 내부에서 실행할 로직
  // output : return문 뒤에 오는 값 : 반환값
}

1. 함수 선언문(function declaration)

예시) 두 개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수 구현하기

function add(x, y) {
  return x + y;
}

2. 함수 표현식(function expression)

let add = function (x, y) {
  return x + y;
}

• 함수를 호출하는 방법

// 함수명() -> add(입력값)
let add = function (x, y) {
  return x + y;
}
console.log add(2, 3));  // 5
 
let functionResult = add(3, 4);
console.log(functionResult);  // 7

문제) add를 사용해 10과 20을 더한 값 출력하기

let add = function (x, y) {
  return x + y;
}
let functionResult = add(10, 20);
console.log(functionResult)   // 30

• input: 함수의 input 부분을 매개 변수라고 한다.
• return: return문 뒤에 오는 값 을 반환값 이라고 한다.

3. 함수 스코프

• 변수의 영향 범위

전역변수

• 함수 스코프의 전체에 영향을 끼칠수 있다.

let x = 10;

function printX() {
  console.log(x);
}   // 10

console.log(x);
printX();   // 10

지역변수

• 함수내에서만 영향을 끼칠수 있다.

function printX() {
  let x = 10;
  console.log(x);
}

console.log(x);
printX();          // 오류) x is not defined

4. 화살표 함수

4-1. 기본적인 화살표 함수

let arrowFunc01 = (x, y) => {
    return x + y
};

// 한 줄로 구현하기(중괄호 삭제하기!)
let arrowFunc02 = (x, y) => x + y;

• function함수에 익숙해진 뒤에 화살표 함수를 사용하자!!

예시) 함수를 화살표 함수로 봐꿔보기

function testFunc(x) {
    return x;
}

// 화살표 함수
let arrowFunc03 = (x) => x;