★[프론트엔드 기초]React + TypeScript (1) - 연산자, 함수, 일급객체, runjs 깔기

연산자

단항 연산자

>> 하나의 피연산자만 사용하는 연산이다.

• void: 표현식을 평가할 때 값을 반환하지 않도록 지정한다.
• typeof: 평가 전의 피연산자 타입을 나타내는 문자열을 반환한다.
• delete: 객체의 속성을 삭제한다.

산술 연산자

>>두 개의 숫자 값(리터럴 또는 변수)을 피연산자로 받아서 하나의 숫자 값을 반환한다.

• 단항 산술 연산자: 1개의 피 연산자를 산술 연산하여 숫자값을 반환한다.
• 전위 증가감소 연산자 : ++피연산자
• 후위 증가감소 연산자 : 피연산자 뒤에 위치(피연산자++)

• 이항 산술 연산자: 2개의 피 연산자를 산술 연산하여 숫자값을 반환한다.

관계 연산자

>> 피연산자를 비교하고 결과가 참인지 거짓인지에 따라 boolean값을 반환한다.

• in: 객체 내에 속성이 존재할 경우 true를 반환.
• instanceof: 특정 객체 타입에 속하면 true를 반환.

비교 연산자

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

피연산자로 숫자뿐만 아니라 문자열, 논리형, 객체 등의 타입이 들어올 수 있다.

• 동등 연산자(==): 서로 같으면 true
• 일치 연산자(===): 서로 같고, 타입까지 같으면 true
• 부동 연산자(!=): 서로 다르면 true
• 불일치 연산자(!==): 서로 다르고, 타입도 다르면 true
• 이외에도 >, >=, <, <= 등이 있다.

논리 연산자

>> 두 개의 피연산자 중 하나를 반환한다.

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

>> 논리 연산자가 여러 개 있을 경우 우선순위에 따라 이를 실행하며 먼저 실행한 식의 결과에 따라서 뒤의 식을 실행한다.

• A && B (AND): A가 false일 경우 A를, A가 true일 경우 B를 반환한다.
• A || B (OR): A가 false일 경우 B를, A가 true일 경우 A를 반환한다.

null, undefined, 빈 문자열은 false로 평가하므로  &&는 null 검사, ||는 캐싱 값에 대해서 사용할 수 있다.

 

기타 연산자

• 쉼표 연산자: 두 연산자를 모두 평가한 후 오른쪽 피연산자의 값을 반환
• 문자열 연산자: 두 문자열 값을 서로 연결하여 새로운 문자열을 반환
• 옵셔널 연산자: 객체의 속성을 참조시, 유효하지 않은 경우 에러를 발생시키지 않고 undefined를 반환
• 할당 연산자: 오른쪽 피연산자가 왼쪽 피연산자에 값을 할당한다.(+=, -=, *=, /=, &=, **=, &&=, ||=)
• 삼항 연산자: 조건 연산자에 따라 두 값 중 하나를 반환. A ? B : C 형태로 A가 true일 경우 B를, A가 false일 경우 C를 반환

---

함수

• 소프트웨어에서 특정 동작을 수행하는 코드 일부분을 의미
• 외부 코드가 호출할 수 있는 하위 프로그램

>> 함수 외부에서 addAge를 호출하는 모습

>> 자바스크립트에서는 괄호를 사용하여 호출, 함수명()

 

>> 속성과 메서드를 가질수 있음

>> 자바스크립트에서 함수는 일급객체의 특징을 모두 갖고있다.

• 일급객체는 함수의 실제 매개변수가 될 수 있다.
• 일급객체는 함수의 반환값이 될 수 있다.
• 일급객체는 할당명령문의 대상이 될 수 있다.(변수 등에 할당 가능)
• 일급객체는 동일비교의 대상이 될 수 있다.(값으로 표현 가능)

---

JavaScript 함수의 특징

매개변수 parameter

1. 기본값 매개변수 (Default Parameter)

• 매개변수 값이 없거나 undefined가 전달될 경우 대체되는 초기값
• 매개변수 = 기본값 형태로 초기값을 설정

2. 나머지 매개변수 (Rest Parameter)

• 가변 인자 함수를 만들 때 사용
• ...매개변수 형태로 선언하면 전달된 값들을 배열로 받음
• spread 연산자와 함께 사용 가능

3. arguments 객체

• 함수 호출 시 전달된 모든 인자를 유사 배열 형태로 저장하는 내장 객체
• 화살표 함수에서는 사용할 수 없음

결론: 기본값 매개변수는 초기값을 설정, 나머지 매개변수는 가변 인자를 배열로 받음, arguments 객체는 전달된 모든 인자에 접근 가능하게 한다.

 

---

runjs 깔기

https://runjs.app/

RunJS - JavaScript Playground for macOS, Windows and Linux

깔면된다. 

자바스크립트 코드를 치면 바로 결과가 나오는 프로그램이다.

 

---

일급객체

/*
1. 자바스크립트 함수는 함수의 실제 매개변수가 될 수 있다.
2. 자바스크립트 함수는 함수의 반환값이 될 수 있다.
*/
 function foo(arg){
  return arg;
}


function bar(){
  console.log('bar');
}

foo(bar)();

/*
3. 자바스크립트 함수는 할당명령문의 대상이 될 수 있다.
4. 자바스크립트 함수는 동일비교의 대상이 될 수 있다.
*/

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

foo(1);

 

 

1. arg = 1으로 기본값 매개변수 설정을 함으로써 1로 출력

/*
1.기본값 매개변수 default function parameter
2. 나머지 매개변수 Rest parameter
3. arguments 객체
*/

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

foo();

 

2. 나머지 매개변수

1은 arg에 할당되기 때문에, 나머지 인자인 2, 3, 4, 5는 ...rest 배열에 담긴다.

arg에는 첫 번째 인자인 1이 할당되고, 나머지 인자인 2, 3, 4, 5는 ...rest에 배열 형태로 저장되므로 [2, 3, 4, 5]가 출력된다.

>> console에 rest를 출력

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

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

3. arguments 객체

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

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

1. 함수 선언문

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

foo();

2, 함수 표현식

const foo = function foo(){
  console.log('foo2');
}

foo();

3. Function 생성자 함수

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


foo();

 

4. 화살표 함수 표현식

const foo = () => {console.log('foo4')}

foo();

 

 

1. 즉시 실행 함수

foo();를 안해도 괄호로 결과가 나올수 있음

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

 

2. 재귀함수

if를 사용하여 탈출문을 만들어줌

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

foo(1);

3. 중첩함수

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

foo(1);

4. 콜백함수

function foo(arg){
  arg();
}

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