연산자 - 단항 연산자, 산술 연산자
연산자란?
: 하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만듦
연산자의 종류
단항 연산자
- 하나의 피연산자만 사용하는 연산
- void : 표현식을 평가할 때 값을 반환하지 않도록 지정
- type of : 평가 전의 피연산자 타입을 나타내는 문자열을 반환
- delete : 객체의 속성을 삭제
산술 연산자
- 두 개의 숫자 값(리터럴 또는 변수)을 피연산자로 받아 하나의 값을 반환
- 단항 산술 연산자
- 1개의 피연산자를 산술 연산하여 숫자값을 반환
++ : 숫자 1을 증가시키고, 증가시킨 값을 암묵적으로 할당
-- : 숫자 1을 감소시키고, 감소시킨 값을 암묵적으로 할당
+ : 양수의 표현. 아무런 효과가 없음
- : 양수를 음수로, 음수를 양수로 반전시킨 값을 반환 -> 증가/감소 연산자 : 위치에 따라 처리단계 상이
-> 전위 증가감소 연산자 : 피연산자 앞에 위치 (++피연산자)
-> 후위 증가감소 연산자 : 피연산자 뒤에 위치 (피연산자++)
- 이항 산술 연산자
- 2개의 피연산자를 산술 연산하여 숫자값을 반환
- + : 덧셈
- : 뺄셈
* : 곱셈
/ : 나눗셈
% : 나머지
관계 연산자
- 피연산자를 비교하고, 결과가 참인지에 따라 boolean값을 반환
- in : 객체 내에 속성이 존재할 경우 true 반환
- instanceof : 특정 객체 타입에 속하면 true 반환
비교 연산자
- 피연산자를 비교하고, 결과가 참인지에 따라 boolean 값을 반환.
- 숫자, 문자열, 논리형, 객체 타입 등이 있음
== : 동등 연산자 : 서로 같으면 true
=== : 일치 연산자 : 서로 같고, 타입도 같으면 true
!= : 부등 연산자 : 서로 다르면 true
!== : 불일치 연산자 : 서로 다르고, 타입도 다르면 true
> : 큼 연산자 : 왼쪽이 오른쪽보다 크면 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로 평가
- AND 연산자 : null 검사에 활용
- OR 연산자 : 캐싱 값에 대해서도 사용
기타 연산자들
- 쉼표 연산자 : 두 연산자를 모두 평가한 후, 오른쪽 피연산자의 값을 반환
- 문자열 연산자 : 두 문자열 값을 서로 연결하여 새로운 문자열을 반환
- 옵셔널 연산자 : 객체의 속서을 참조시, 유효하지 않는 경우, 에러를 발생시키지 않고 undefined를 반환
- 할당 연산자 : 오른쪽 피연산자가 왼쪽 피연산자에 값을 할당
- += : 더하기 할당
-= : 빼기 할당
*= : 곱하기 할당
/= : 나누기 할당
%= : 나머지 할당
**= : 거듭제곱 할당
&&= : 논리 AND 할당
||= : 논리 OR 할당
- += : 더하기 할당
- 삼항 연산자 : 조건 연산자에 따라 두 값중 하나를 반환
- condition ? trueValue: falseValue
function validate(value) {
return value instanceof Number ? value : null;
}데이터 처리: 함수
1) 재사용 처리기, 함수
동일한 처리를 해야하는 경우
-> N번의 횟수만큼 3을 해야하는 로직을 작성해야 함.
let aAge = 10;
let bAge = 10;
let cAge = 10;
aAge += 3;
bAge += 3;
cAge += 3;-> 중복 코드 작성
만약 3살을 더하는 것이 아닌 모두 5를 더하는 경우로 바꿔줘야 한다면?
: N번의 횟수만큼 변경해주는 작업이 필요함.
-> 유지보수의 편리성이 떨어짐
특정 동작을 수행하는 처리기, 함수
- 위와 같이 중복 코드 작성과 유지보수 편리성이 떨어진다는 단점을 해결하기 위해 특정 처리를 담당하는 처리기가 필요
- 소프트웨어에서는 "함수" 기능 지원
함수란?
: 소프트웨어에서 특정 동작을 수행하는 코드 일부분을 의미
- 외부 코드가 "호출"할 수 있는 하위 프로그램
- 자바스크립트에서는 괄호를 사용하여 호출. 함수명()
- 함수 외부에서 addAge를 호출하는 모습
let aAge = 10;
let bAge = 10;
let cAge = 10;
function addAge(age) {
return age + 3;
}
addAge(aAge);- 함수의 형태
- input : 로직 처리를 위해 주입받는 데이터
- output : 로직 처리 후 반환되는 결과 데이터
- 본문 : 명령문의 시퀀스로 구성
- 함수는 대부분의 언어에서 지원하는 기능
- JavaScript에서도 함수의 기능이 존재
JavaScript의 함수
- 자바스크립트에서 함수는 객체처럼 속성과 메서드를 가질 수 있음
- 객체와의 차이점 : 함수는 외부에서 "호출"이 가능하고, 객체는 외부에서 "호출"이 불가능
- 자바스크립트에서 함수는 일급객체의 특징을 모두 갖고 있음.
- 일급객체 : 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킴
- (정의)
일급 객체는 함수의 실제 매개변수가 될 수 있음
일급 객체는 함수의 반환값이 될 수 있음
일급 객체는 할당명령문의 대상이 될 수 있음(변수 등에 할당 가능)
일급 객체는 동일비교의 대상이 될 수 있음(값으로 표현 가능)
- (정의)
- 일급객체 : 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킴
2) JavaScript 함수의 특징
함수의 형태
- 함수 이름 : 함수의 이름 (외부에서 호출 시 이름이 사용됨)
- 매개 변수 : 함수에 전달되는 인수. 유사 배열 형태
- 함수 몸체 : 명령 시퀀스들이 존재하는 블록
function addAge(age) {
if(typeof age !== 'number') return age
return age + 5
}매개 변수 parameter
- 기본값 매개변수(default function parameter)
function foo(arg = 1) {
return arg;
}
foo(); -> 매개변수 값이 없거나, undefined가 전달될 경우 대체되는 초기값
-> 매개변수에 할당연산자와 함께 초기값을 할당
- 나머지 매개변수(Rest parameter)
function foo(arg, ...rest) {
console.log(rest);
return arg;
}
foo('a', 'b', 'c'); -> 가변항 함수
-> spread 연산자
- aguments 객체 : 함수에 전달되는 인자들을 참조할 수 있는 객체
let foo;
function bar(arg, ...rest) {
console.log(arguments)
return arg
};
bar(1,2,3); -> 자바스크립트의 함수 : Function 객체 상속
-> Function 객체의 기본 속성 : arguments
-> 형태 : 배열이 아니고 유사 배열 형태
배열 내장 method 사용 불가
- 매개변수(parameter)와 인자(argument)의 차이
- 매개변수 : 함수를 정의할 때 사용하는 변수
- 인자 : 함수가 호출될 때 넘기는 값
3) 함수의 생성과 사용 패턴
함수 생성 방법
- 함수 선언문
function foo(arg) {
return arg;
}
const bar = foo(1);
console.log(bar);- 함수 표현식
- 익명 함수(anomymouse function)
- 기명 함수(named function)
const foo = function(arg) {
return arg;
};
const bar = function baz(arg) {
return arg;
};
const temp = foo(1);
console.log(temp);
console.log(baz(1));- Function 생성자 함수
- Function 객체 : 자바스크립트 내장 객체 중 하나
- 함수 생성방법의 기본 원리 - 함수 표현식, 함수 선언문: 축약법
- 생성자 함수
- 내장 객체 사용: 인스턴스 생성
- new 내장객체()
new Function(arg1, arg2, ..., 'return 1')
- 화살표 함수
- ES6 이후부터 사용 가능
- function 키워드 사용하지 않고, 화살표(=>) 사용
- const 변수명 = (arg, ...) => { return ... }
const foo = (arg) => {
return arg();
}
foo(() => {
return 1;
});함수 사용 패턴
- IIFE(즉시 실행 함수)
- 함수의 정의와 동시에 실행
- 코드 평가 → 코드 실행 → 최초 1회 실행
- 초기화 처리에 주로 사용
- 작성 방법 : 즉시 실행할 함수를 괄호로 감싸기. 괄호로 감싸진 함수를 실행
(function() {
return 1;
})();- 재귀 함수
- Recursive function 자기 자신을 호출하는 함수
- 계속 자신을 참조하여 호출하므로, 무한히 호출될 수 있음
- 탈출 조건을 함수 초반에 정의해야 함
- 직관성이 떨어질 수 있어, 한정적 사용 권장
function foo(arg) {
if(arg == 3) return arg; //탈출조건
console.log(arg);
foo(arg + 1);
}
foo(1);- 중첩 함수
- inner function 내부 함수
- 내부함수 내의 변수 참조 → 부모를 포함한 외부 범위 참조 가능
- 부모함수 내의 변수 참조 → 자식 범위 참조 불가능
- 스코프 체인
- 콜백 함수
- Callback function
- 함수의 매개변수가 될 수 있음 (일급 객체 中)
- 인자로 B함수를 받은 A함수
- A함수가 호출되는 시점에 B함수도 호출
- 특정 이벤트가 발생했을 때
→ 시스템에 의해 호출되는 함수
const foo = (arg) => {
return arg();
};
foo(() => {
return 1;
});
안녕하세요