자바스크립트 완벽 가이드 7판 스터디
책의 목차를 따라가며 관련 내용을 학습하고 공유하는 스터디입니다.
... 그중에서도 기억할 만한 핵심을 추린다면 다음과 같습니다.
- 표현식은 자바스크립트 프로그램의 구절(phrase)과 같습니다.
- 표현식은 모두 자바스크립트 값으로 평가될 수 있습니다.
- 표현식에는 값으로 평가되는 것 외에도 변수 할당 같은 부수 효과가 있을 수 있습니다.
- 리터럴, 변수 참조, 프로퍼티 접근 같은 단순한 표현식을 연산자료 묶어서 더 큰 표현식을 만들 수 있습니다.
- 자바스크립트 연산자는 크게 산술 연산, 비교, 불, 논리, 할당. 비트 조작 연산자로 나눌 수 있으며 이외에도 조건 연산자를 비롯해 기타 연산자가 더 있습니다.
- 자바스크립트의 + 연산자는 숫자를 더할 때나 문자열을 병합할 때 사용할 수 있습니다.
- 논리 연산자 &&와 ||에는 때에 따라 피연산자 중 하나만 평가하는 특별한 '단축 평가' 방식이 있습니다. 자바스크립트의 관용적 표현 중에는 이 연산자의 특별한 동작 방식을 이해해야 알 수 있는 것들이 있습니다.
자바스크립트 완벽 가이드 7판, p.111
1. 표현식(expression)이란?
2. 객체, 배열 초기화 표현식
3. 함수 정의 표현식
4. 프로퍼티 접근 표현식, 조건부 프로퍼티 접근
5. 호출 표현식, 조건부 호출
6. 연산자란? 피연산자, 부수 효과(Side Effect), 우선순위
7. 산술 표현식: +, -, /, *, %, ++, --
8. 관계 표현식: 동등 비교, in, instanceof
9. 논리 표현식: &&, ||, !
10. nullish
1.23456; // 숫자 리터럴
'Guide 7e' / // 문자열 리터럴
pattern / // 정규 표현식 리터럴
true; // true (Boolean)
false; // false (Boolean)
null; // null
this; // '현재' 객체
let i = (j = 1);
i; // 변수 i
j; // 변수 j
[]
안에 콤마로 구분된 리스트를 쓰는 형태const arr1 = []; // 빈 배열;
const arr2 = [1, 2, 3, 4, 5 + 5]; // [1 ,2 ,3, 4, 10]
const arr4 = [
[1, 2, 3],
[4, 5, 6],
]; // 중첩 배열
const arr3 = [1, , , 4]; // [ 1, <3 empty items>, 4 ], 길이는 5
arr3.forEach((v, i) => {
console.log(`index: ${i}, value: ${v}`);
});
// index: 0, value: 1
// index: 4, value: 4
console.log(arr3.map((v, i) => v * 10));
// [ 10, <3 empty items>, 40 ]
:
으로 시작한다.let obj = {
a: '111',
b: '222',
c: { d: '333', f: '444' },
};
function
키워드로 시작, 괄호 안에 0개 이상의 식별자, 중괄호 안에 자바스크립트 코드를 쓰는 형태function func1(x) {
return x;
}
const func2 = function func1(y) {
return y;
};
const func3 = z => z;
expression.identifier; // 1. 표현식 . 식별자
expression[expression]; // 2. 표현식 [ 표현식 ]
TypeError
반환undefined
반환?.
expression?.identifier;
expression?.[expression];
null
과 undefined
뿐이다.TypeError
가 발생한다.?.
를 사용해 에러 발생을 막을 수 있다.null
이나 undefined
이라면 프로퍼티에 접근하려는 시도 없이 undefined
로 평가 된다.단축평가
이다.const outer = {
valueNull: null,
inner: { a: 1, b: 2 },
};
outer.valueNull.a; // TypeError: Cannot read properties of null (reading 'a')
outer.valueNull?.a; // undefined
function func1(x) {
return x * 100;
}
const variable = 100;
func1(1); // 100
variable(1); // TypeError: variable is not a function
Math.max(1, 2, 3); // Math 객체의 메서드 호출
undefined
로 평가한다.function calculation(v1, v2, func) {
return func(v1, v2);
}
calculation(5, 6, (a, b) => a * b); // 30
calculation(5, 6); // TypeError: func is not a function
function calculation2(v1, v2, func) {
return func?.(v1, v2);
}
calculation2(5, 6, (a, b) => a + b); // 11
calculation2(5, 6); // undefined
+
, =
처러 부호로 표현, delete
, instanceof
같은 키워드 연산자도 있음오른쪽 -> 왼쪽
, 왼쪽 -> 오른쪽
두 가지이며, 우선순위가 같은 동작을 수행할 때의 순서이다.x - y + z
덧셈 뺼셈은 우선순위가 동등, 따라서 왼쪽부터 차례대로 연산 (x - y) + z
'1' * 2
는 1 * 2
, '1' + 2
는 '1' + '2'
=
, 증가감소연산자 ++
, --
는 기존 값에 영향을 준다.**
,*
, /
, %
, -
NaN
으로 변환+
, -
, ++
, --
console.log(+1); // 1
console.log(+-1); // -1
console.log(+'string'); // NaN
console.log(-1); // -1
console.log(-(-1)); // 1
console.log(-'string'); // NaN
전위 증가 연산자
후위 증가 연산자
let a = 0;
let b = a++;
console.log(a, b); // 1, 0
let c = -5;
let d = ++c;
console.log(c, d); // -4, -4
==
: 값이 같음!=
: 값이 다름===
: 값과 타입이 둘 다 같음!==
: 값과 타입이 다름===
, !==
을 사용하자!!!console.log('max' in Math); // true
console.log('length' in Array); // true
console.log('0' in Array); // false
const arr = [1, 2, 3, 4];
const today = new Date();
console.log(arr instanceof Object); // true
console.log(today instanceof Date); // true
console.log(Date instanceof Object); // true
단축평가
가 되는 특징&&
모두 true여야 true, 아니면 false||
모두 false여야 false, 아니면 true&&
const zero = 0;
const one = 1;
const two = 2;
const result1 = one && two && zero; // zero에서 종료
const result2 = one && two; // two에서 종료
const result3 = one && zero && two; // zero에서 종료
console.log(result1); // 0
console.log(result2); // 2
console.log(result3); // 0
const user = {
name: 'husbumps',
email: null,
};
user.name && console.log('이름 정보가 있습니다.');
user.email && console.log('이메일 정보가 있습니다.');
// 이름 정보가 있습니다.
||
const user = {
name: 'husbumps',
email: null,
};
user.name || console.log('이름 정보가 없습니다.');
user.email || console.log('이메일 정보가 없습니다.');
// 이메일 정보가 없습니다.
null
, undefined
만 골라낼 수 있다!||
를 사용하면 빈 문자열, 0 같은 경우도 전부 falsy한 값이라 의도한대로 동작하지 않는 경우가 생긴다.// num에 값이 할당되지 않은 undefined인 경우에 -1를 반환하고 싶을 때
let num = 0;
console.log(num || '-1'); // -1 => 의도하지않은동작
console.log(num ?? '-1'); // 0 => num에 0이 할당되었기때문에 제대로 동작