[TIL] KDT Clouding APP - Javascript Basic 2

Javascript 기본 문법 - 연산자, 함수

연산자

1. void 연산자

console.log(void foo);  // undefined 반환
delete foo; // 객체의 속성 삭제

2. 산술 연산자

let A = 0;
let B = 2;
let C = 3;

B / A;  // Infinity
B % A;  // Nan

3. in, instanceof 연산자

const foo = {
    name : 'apple',
};

'name' in foo;  // true
'age' in foo;   // false

foo instanceof Object;  // true
foo instanceof Number;  // false

instanceof 연산자는 타입 가드역할로 자주 사용되는 편!

4. 논리연산자

반환되는 값이 무조건 Boolean 값이 아니다.

• 예시) A && B –> A가 false로 평가되면 A를 반환.

• 예시) A

  B –> A가 false로 평가되면 B를 반환.

'apple' || 'banana'     // 'apple'
false || 'banana'       // 'banana' -> 캐싱 값으로 사용됨.

5. 쉽표 연산자

const a = (1, 2);   // 오른쪽 피연산자의 값을 반환
a;  // 2

6. optional 연산자

const foo = { name: 'apple' };
foo.age?.apple; // 객체의 속성 참조시 유효하지 않은 경우, undefined 반환

7. 할당 연산자

let A = 1;

A += 1; // 2
A -= 0; // 2
A *= 3; // 6
A /= 3; // 2
A %= 3; // 2
A **= 3; // 8 (거듭제곱)
A &&= 10; // 10 (논리AND; true이면 다음 피연산자 반환)
A ||= 3; // 10 (논리OR; true이면 처음 피연산자 반환)

8. 삼항 연산자

[condition] ? [trueValue] : [falseValue]

함수

1. 함수는 함수의 매개변수가 될 수 있다.

function foo(input) {
    return input();
}

function bar() {
    return 1;
}

foo(bar);   // 함수 자체가 반환

2. 함수는 함수의 반환값이 될 수 있다.

function foo(input) {
    return input() + 1; // input 함수 전체에 '1'을 덧붙여 문자열 형태로 반환
}

function bar() {
    return 1;
}

function baz() {
    return bar;
}

foo(baz)(); // 함수가 실행되어 '1'반환

3. 기본값 매개변수

function foo(arg = 1) {
    console.log(arg);
}

foo();

4. 나머지 매개변수

function foo(arg, ...rest) {
    console.log(rest);
    return arg;
}

foo('a','ab','cded');

함수가 정하지 않은 매개변수를 배열의 형태로 받을 수 있다. 그러나, 실제 배열은 아니고 유새배열의 형태이기에 배열 내장 method는 사용 불가함! (주의)

let foo;
function bar(arg, ...rest) {
    console.log(rest);
    return arg;
}

foo = bar('a','ab','cded');

// Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
foo.array.forEach(element => {
    console.log(element);
});

5. arguments

함수 내장 객체로, 프로토타입 체인을 통해 호출하여 사용이 가능하다.

function foo2(arg, ...rest) {
    console.log(arguments);
}

foo2(1, 2, 3, 4, 5);

6. 함수의 생성 방법

1) 함수 표현식

const foo = function(arg) {
    return arg;
}

foo(1);

2) Function 생성자 함수 (자주 사용되는 방식 아님)

// return문을 문자열의 형태로 작성
const bar = new Function(undefined, 'return 1');
bar(1);
1

3) 화살표 함수(ES6 이후부터 사용 가능)

const foo = (arg) => {
    return arg();
}

foo(() => {
    return 1;
});

7. 함수의 사용 패턴

1) IIFE (즉시 실행 함수)

• 주로 초기화 처리에 사용

(function(){
    return 1;
})();

2) 재귀함수

• 탈출 조건을 함수 초반에 정의할 것.

function foo (arg) {
  if(arg === 3) return;
  console.log(arg);
  foo(arg + 1);
}

foo(1);

3) 중첩함수

function foo(arg) {
  function inner(inner_arg) {
    console.log(arg);
  }
  
  inner();
  console.log(inner_arg);   // ReferenceError: inner_arg is not defined
}

foo(1);

4) 콜백함수

function foo(arg) {
  arg();
}

foo(() => { console.log('This is callback'); });