클라우딩 어플리케이션 엔지니어링 TIL Day 10 (1)

오늘은 자바스크립트의 데이터 처리에 대해서 배우는 날이다

기본 개념 및 flow control에 대한 내용이다

자바스크립트의 문법이 부족했던 만큼 더 열심히 듣고 공부해야겠다!

---

# 연산자

연산자란?

하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만드는 것

 

# 단항 연산자

하나의 피연산자만 사용하는 연산

- void :  표현식 평가 시 값 반환하지 않도록 지정

- typeof : 평가 전의 피연산자 타입을 나타내는 문자열을 반환

- delete : 객체의 속성 삭제

 

# 산술 연산자

단항 산술 연산자

1개의 피연산자를 산술 연산하여 숫자값을 반환

- ++, --, +, -

- 전위 증가감소 연산자 : 피연산자 앞에 위치, ++피연산자, --피연산자

- 후위 증가감소 연산자 : 피연산자 뒤에 위치, 피연산자++, 피연산자--

 

이항 산술 연산자

2개의 피연산자를 산술 연산하여 숫자값 반환

- +, -, *, /, %

 

# 관계 연산자

피연산자를 비교하고 결과가 참인지에 따라 boolean 값을 반환

- in : 객체 내에 속성이 존재할 경우 true 반환

- instanceof : 특정 객체 타입에 속하면 true 반환

 

# 비교 연산자

피연산자를 비교하고, 결과가 참인지에 따라 boolean 값을 반환

- == : 동등 연산자, 서로 같으면 true

- === : 일치 연산자, 서로 같고 타입도 같으면 true

- != : 부등 연산자, 서로 다르면 true

- !== : 불일치 연산자, 서로 다르고 타입도 다르면 true

- > , >=, < , <= : 피연산자의 크기를 비교

 

# 논리 연산자

두개의 피연산자 중 하나를 반환

반환되는 값이 무조건 boolean 값은 아니다

- && : AND 연산자, null 검사에 활용

- || : OR 연산자, 캐싱 값에 대해서도 사용

- null, undefined, 빈 문자열은 false로 평가된다

 

# 기타 연산

- 쉼표 연산자 : 두 연산자를 모두 평가한 후, 오른쪽 피연산자의 값을 반환

- 문자열 연산자 : 두 문자열 값을 서로 연결하여 새로운 문자열을 반환

- 옵셔널 연산자 : 객체 속성을 참조 시 유효하지 않는 경우 에러를 발생시키지 않고 undefined를 반환

- 할당 연산자 : +=, -=, *=, /=, %=, **=(거듭제곱), &&=, ||=

- 삼항 연산자 : condition ? trueValue : falseValue

---

# 데이터 처리 함수

함수란?

소프트웨어에서 특정 동작을 수행하는 코드 일부분

외부 코드가 호출할 수 있는 하위 프로그램

input, output, 본문으로 구성

 

Javascript의 함수

일급객체의 특징을 모두 갖고 있다

일급객체가 뭘까?

=> 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체

• 자바스크립트의 함수는 함수의 실제 매개변수가 될 수 있다

// 자바스크립트 함수는 함수의 실제 매개변수 가능
function foo(arg) {
  arg();
}

function bar() {
  console.log("bar");
}
foo(bar);

• 자바스크립트의 함수는 함수의 반환값이 될 수 있다

// 자바스크립트 함수는 함수의 반환값
function foo(arg) {
  return arg;
}

function bar() {
  console.log("hello!!!");
}
foo(bar)();

• 자바스크립트의 함수는 할당명령문의 대상이 될 수 있다

// 자바스크립트 함수는 할당명령문의 대상
const foo = function (arg) {
  return arg;
};

foo(1);

• 자바스크립트의 함수는 동일비교의 대상이 될 수 있다

---

function addAge(age) {
  if (typeof age !== "number") return age;
  return age + 5;
}

console.log(addAge(5));

위와 같은 함수를 작성하고 결과값을 확인하니까

원하는 결과값을 얻었다!

---

# 매개변수 Parameter

▶기본값 매개변수

매개변수 값이 없거나 undefined가 전달될 경우 대체되는 초기값

매개변수에 할당연산자와 함께 초기값 할당

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

foo();

▶나머지 매개변수

가변항 함수, spread 연산자

function test(arg, ...rest) {
  console.log(rest);
  console.log(arg);

  return arg;
}

test(1, 2, 3);

▶arguments 객체

함수에 전달되는 인자들을 참조할 수 있는 객체

Function 객체 상속 => Function 객체의 기본 속성은 arguments 이다

유사배열 형태 => 배열 내장 method 사용 불가하다

let foo;

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

bar(1, 2, 3);

arguments 객체는 배열이 아닌 유사배열이기 때문에 배열에서 사용되는 내장 method는 사용할 수 없다

---

# 함수 생성 방법

함수 선언문 : function 키워드 사용

function test(arg) {
  console.log(123);
}

함수 표현식 : 함수를 변수에 할

- 익명 함수 : 함수명 생략

- 기명 함수 : 함수명 작성

//익명함수
const foo = function (arg) {
  return arg;
};

//기명함수
const bar = function baz(arg) {
  return arg;
};

const temp = foo(1);
console.log(temp);
console.log(baz(1)); /*ReferenceError: baz is not defined 발생*/

Function 생성자 함수

Function 객체 -> 자바스크립트 내장 객체 중 하나이다

일반적으로 사용되지는 않는다

const foo = new Function("console.log('foo3')");

foo();

화살표 함수

익명 함수, 함수 표현식으로만 사용 가능

const 변수명 = (arg, ... ) => { return ... }

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

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

 

# 함수 사용 패턴

IIFE : 즉시 실행 함수, 함수 정의와 동시에 실행, ()로 감싸고 () 붙이기, 초기화 시 사용

(function foo() {
  console.log("foo");
})();

재귀함수 : 자기 자신을 호출하는 함수, 탈출 조건 정의 필요

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

foo(1);

중첩함수 : 내부함수, 스코프 체인

function foo(arg) {
  function bar() {
    console.log(arg);
  }
  bar();
}

foo(1);

콜백함수 : 함수의 매개변수가 될 수 있다는 일급객체의 특징, 특정 이벤트 발생 시 시스템에 의해 호출되는 함수

function foo(arg) {
  arg();
}

foo(() => {
  console.log(10000);
});