1. 연산자
JavaScript의 연산자는 다음과 같은 유형으로 나눌 수 있습니다.
1.1 산술 연산자(arthmetic)
1// 산술 연산자 (Arithmetic operators)2// 📝 + 더하기3// 📝 - 빼기4// 📝 * 곱하기5// 📝 / 나누기6// 📝 % 나머지값7// 📝 ** 지수 (거듭제곱)89console.log(5 + 2) // 710console.log(5 - 2) // 311console.log(5 * 2) // 1012console.log(5 / 2) // 2.513console.log(5 % 2) // 114console.log(5 ** 2) // es7에서 추가됨, 2515console.log(Math.pow(5, 2)) // 251617// + 연산자 주의점! : 숫자와 문자열을 더하면 문자열로 변환됨18let text = '두개의' + '문자를'19console.log(text) // 두개의 문자를20text = '1' + 1 // 숫자와 문자열을 더하면 문자열로 변환됨21console.log(text) // 문자열 11
1.2 단항 연산자(unary)
1// 단항연산자 Unary Operators2// 📝 + (양)3// 📝 - (음)4// 📝 ! (부정)5let a = 567a = -a // -1 * 58console.log(a) // -59a = -a // -1 * -510console.log(a) // 51112a = +a // +513console.log(a) // 51415a = -a // -516a = +a // +(-5)17console.log(a) // -51819// 부정연산자 !20let boolean = true21console.log(boolean) // true22console.log(!boolean) // false23console.log(!!boolean) // true2425console.clear() // 이전 값들 지우는 함수 clear26// + 숫자가 아닌 타입들을 숫자로 변환하면 어떤값이 나오는지 확인할 수 있음27console.log(+false) // 028console.log(+null) // 029console.log(+'') // 030console.log(+true) // 131console.log(+'text') // NaN32console.log(+undefined) // NaN3334console.log(!!1) // true, ! 부정연산자35// !! 값을 boolean 타입으로 변환함
1.3 할당 연산자(assignment)
1// 할당연산자 (Assignment operators)2let a = 13a = a + 24console.log(a) // 356a += 2 // a = a + 2; 축약버전7console.log(a) // 589a -= 210console.log(a) // 31112a *= 2 // 3 * 213console.log(a) // 61415a /= 216a %= 217a **= 2
1.4 증감 연산자(increment)
1// 증가 & 감소 연산자 Increment & Decrement Operators2let a = 03console.log(a) // 04a++ // a = a + 1;5console.log(a) // 16a-- // a = a - 1;7console.log(a) // 089console.clear()1011// 주의!12// 📝 a++ 필요한 연산을 하고, 그 뒤 값을 증가시킴13// 📝 ++a 값을 먼저 증가하고, 필요한 연산을 함14a = 015console.log(a++) // 016console.log(a) // 117let b = a++18console.log(b) // 119console.log(a) // 2
1.5 비교 연산자(relational)
1// 대소 관계 비교 연산자 (Relational operators)2// 📝 > 크다3// 📝 < 작다4// 📝 >= 크거나 같다5// 📝 <= 작거나 같다6console.log(2 > 3) // false7console.log(2 < 3) // true8console.log(3 < 2) // false9console.log(3 > 2) // true10console.log(3 <= 2) // false11console.log(3 <= 3) // ture12console.log(3 >= 3) // ture13console.log(3 >= 2) // ture
1.6 연산자 우선순위(priority)
1let a = 22let b = 33let result = ((a + b) * 4) / 54console.log(result) // 456result = a++ + b * 47console.log(result) // 14
- MDN 연산자 우선순위
- 굳이 암기할 필요없음.
- 정보처리기사칠 떄 외우는 용
증산시 관비 논삼대(증산시의 관노비가 논을 산데)- 증감 / 산술 / 시프트 / 관계 / 비트 / 논리 / 삼항 / 대입
1.7 동등 비교 연산자(equality)
| 의미 | 비교 연산자 | 설명 |
|---|---|---|
동등 비교(loose equality) | x == y | x와 y의 값이 같음 |
일치 비교(strict equality) | x === y | x와 y의 값과 타입이 같음 |
| 부등 비교 | x != y | x와 y의 값이 다름 |
| 불일치 비교 | x !== y | x와 y의 값과 타입이 다름 |
==: 느슨한 비교- 자료의 타입변환을 JS 엔진이 알아서 해보고 동일하면 true라고 판정
===: 엄격한 비교- 자료의 타입까지 동일해야 true라고 판정
1// 동등 비교 관계 연산자 (Equality operators)2// 📝 == 값이 같음3// 📝 != 값이 다름4// 📝 === 값과 타입이 둘다 같음5// 📝 !== 값과 타입이 다름6console.log(2 == 2) // true7console.log(2 != 2) // false8console.log(2 != 3) // true9console.log(2 == 3) // false10console.log(2 == '2') // true11console.log(2 === '2') // false✨12console.log(true == 1) // true13console.log(true === 1) // false14console.log(false == 0) // true15console.log(false === 0) // false1617console.clear()1819const obj1 = {20name: 'js',21}22const obj2 = {23name: 'js',24}2526console.log(obj1 == obj2) // false27console.log(obj1 === obj2) // false28console.log(obj1.name == obj2.name) // true29console.log(obj1.name === obj2.name) // true3031let obj3 = obj232console.log(obj3 == obj2) // true33console.log(obj3 === obj2) // true
1.7.1 배열 동등 비교
숫자나 문자열 비교할때는 == 이나 === 연산자를 이용하면 되지만, 배열이나 객체를 비교할때는 불가능하다.
왜냐하면 reference 타입으로써 값이 비교 되는 것이 아닌 주소값이 비교되기 때문이다.
1const a = [1, 2, 3]2const b = [1, 2, 3]34// 배열 구성을 비교하는게 아닌 배열 메모리 주소값 비교가 된다5a == b // false6a === b // false
그래서 배열을 동등비교하려면 JSON.stringify()을 사용해야 한다.
1const equals = (a, b) => JSON.stringify(a) === JSON.stringify(b)23const a = [1, 2, 3]4const b = [1, 2, 3]56equals(a, b) // true
2. 표현식
2.1 리터럴(Literal)
값에는 다양한 데이터 타입이 있었습니다. 코드에서 값을 나타내는 표기법을리터럴이라고 합니다.
- 숫자만 쓰면 숫자 리터럴
- 따옴표 안에 쓰면 문자 리터럴
- true나 false를 쓰면 불리언 리터럴
- 괄호를 사용하면 객체 리터럴
- 대괄호를 사용하면 배열 리터럴
- 템플릿 리터럴은 템플릿을 만들 수 있는 리터럴
2.2 문(Statement)
코드에서 최소로 실행할 수 있는 단위의 한 줄을 문(Statement, 문장)이라고 합니다.
할당하면 할당문, 조건문이 있으면 조건문입니다. 여러 문이 있지만 이 중에서 표현식이 있습니다.
1let a, b // 변수를 선언하는 문장2let c = 1 // 선언과 초기화를 한 번에 하는 문장34// 조건을 판별하는 if문장5if (a > b) {6console.log('a가 b 보다 큽니다.')7}89a = b // 대입 문장10c = a + b // 계산 문장
2.2.1 표현식(Expressions)
문 중에서 값으로 평가될 수 있는 문을 표현식(Expressions)이라고 부릅니다.
- 식별자, 연산자, 리터럴 등으로 구성되고 결과가 하나의 값으로 표현되는 문장
11 // 숫자 리터럴 표현식21 + 1 // 연산자 표현식3call() // 함수 호출 표현식4let b // 선언문5b = 2 // 할당문, 할당 표현식인 문67c = a < b ? 1 : 2 // 삼항연산89// 익명 함수를 반환하는 표현식10let anonymousFn = function (a, b) {11return a + b12}13let arrowFn = (a, b) => {14return a + b15}