기초부터 완성까지, 프런트엔드를 읽고 정리한 내용입니다.

구문과 연산자

표현식 (Expression)

표현식은 값으로 평가되는 구문이다. 값으로 평가된다는 것은 값을 반환한다는 뜻이다.

'javascript'
var a;
a = 1; //할당 표현식

표현식의 결과는 항상 값이 되므로 이 결과를 다른 표현식과 결합해 다른 결과값을 얻을 수 있다.

var x = 1;
var y = 2;
x + y; //복합 표현식	

문 (statement)

문은 지시를 내리는 것이다. 표현식 또는 다른 문을 조합해 동작을 수행하는 지시를 내린다. 완료 값이라는 결괏값이 있지만, 표현식처럼 다른 변수나 객체의 프로퍼티에 할당할 수 없다.

let a; 
const b = if (true) { a = '1'} ; //Uncaught SyntaxError : Unexpected token if	

아래 와 같은 문들이 있다.

• 표현문

  할당 표현식 또는 함수 호출과 같은 표현식

• 선언문

• 조건문

• 반복문

• 점프문

연산자

연산자는 값을 만들어내는 방법

산술 연산자

연산자	수행 연산	결합 방향	예제	결과
+	덧셈	좌우	1 + 2	3
-	뺄셈	좌우	1 - 2	1
*	곱셈	좌우	1 * 2	2
/	나눗셈	좌우	4 / 2	2
%	나머지	좌우	5 % 2	3
++	전치, 후치 증가 (단항 연산)	좌우, 우좌	const a = 1; ++a, a++	2, 1
--	전치, 후치 증가 (단항 연상)	좌우, 우좌	const a = 1; --a, a--	0, 1
+ 단항	피연산자 값을 숫자로 변환 숫자로 변환시킬 수 없는 경우 NaN 반환	우좌	const a = '1'; +a	1
- 단항	피연산자 값의 부호를 변경	우좌	const a = 1; -a	-1

연산자들을 사용한 대부분의 표현식들은 부수효과가 없지만 전치, 후치 증감 연산자는 부수 효과를 가진다.

후치 연산자의 경우 먼저 a를 평가해 값을 반환한 후 a의 값을 1만큼 증가시켜 변경한다. 값이 먼저 평가되기 때문에 증가된 값이 아닌 기존 값이 할당된다.

전치 연산의 경우 값을 먼저 증가 시킨 후 평가된 값을 반환한다.

논리 연산자

논리 연산자는 참, 거짓을 나타내는 불리언 값을 이용해 연산을 수행하며, 이 경우 결괏값도 불리언이다. 자바스크립트에서는 불리언이 아닌 값도 논리 연산자의 피연산자가 될 수 있다. 만약 논리 연산자의 피연산자로 불리언이 아닌 값이 온다면 truthy 값과 falsy 값이라는 개념을 이용해 피연산자를 평가한다.

truthy 값과 falsy 값

truthy값은 참과 같은 값이다. 이 값들은 불리언 타입은 아니지만, 논리 연산자와 함께 사용되면 참으로 평가된다.

falsy값은 거짓과 같은 값으로 불리언 타입은 아니지만 논리 연산자와 함께 사용되면 거짓으로 평가된다.

자바스크립트의 모든 값은 truthy 값과 falsy 값으로 나뉜다.

falsy값에 해당되는 경우

• false
• null
• undefined
• NaN
• '' (빈 문자열)
• 0
• 0n (biting)

이 외에는 모두 truthy로 평가된다. (빈 배열 빈 객체도 참으로 평가됨)

단락 평가 (Short circuit)

AND 연산자와 OR 연산자는 단락 평가라는 특징을 가진다. 앞의 평가 결과에 따라 뒤의 표현식을 평가할 필요가 없을 경우 평가하지 않는다. 아래 두 코드는 동일한 동작을 한다.

if (x > y) {
	doSomething();
}
x > y && doSomething()

관계형 연산자

연산자	수행 연산	결합 방향	예제
>, >=, < , <=	숫자의 대소 비교 또는 문자열을 알파벳 순서로 비교	좌우	x >= y
==	값의 동등을 판단	좌우	x == y
===	값의 일치를 판단	좌우	x === y
instanceof	객체의 클래스 확인 우측에 반드시 생성자 함수 또는 클래스가 와야한다.	좌우	car instanceof Vehicle
in	객체의 특정 프로퍼티가 있는지 확인 우측에 반드시 객체 타입이 완야한다.	좌우	name in Obj

동등 연산자

동등 연산자는 값의 동등을 판단하는 연산자이다. 자바스크립트에는 일반적인 동등 연산(==)와 엄격한 동등 연산자(===)가 있는데, 일반적인 동등 연산자의 경우 값의 타입이 달라도 같은 값을 반환할 수 있다면 동등하다고 판단한다.

console.log (1 == true) // true
console.log (undefined == null) //true

이는 암시적 강제 변환으로 같은 값을 반환하기 때문이다. 암시적 강제 변환이란 연산 중에 내부적으로 타입을 변환해 연산을 수행하는 것을 의미한다.

즉 동등 연산자는 암시적 강제 변환을 통해 값의 타입을 변환해 비교하는 것이다. 엄격한 동등 연산자의 경우 암시적 강제 변환을 허용하지 않는다.

console.log(1 === true) // false

피연산자들의 값과 타입이 모두 일치해야 동등하다고 판단하기 때문에 엄격한을 붙이며 일치 연산자라고도 한다.

기타

조건 연산자

삼항 연산자

b = a > 1 ? a : 2

쉼표 연산자

두 개의 피연산자를 가지며 피연산자는 어떤 타입이든 올 수 있다. 좌측 부터 우측으로 피연산자를 평가하며 우측 피연산자의 평갓값을 최종 결과로 반환한다.

for (let i = 0, j = 10; i < j; i++, j--) {
 // ...
}

typeof

피연산자의 타입을 문자열로 반환하는 단항 연산자

typeof null의 경우 결과가 'object'로 나오는데 이는 초창기 자바스크립트 설계의 오류로 생긴 버그이며 null 타입인지 확인하기 위해서는 엄격한 동등 연산자를 이용해 확인해야한다.