위의 도서를 읽고 정리하며 기술 면접을 대비하는 글입니다.
이번 단원에서는
5.1 문(Statement)과 표현식(Expression)
5.2 연산자 우선순위
5.3 세미콜론 자동 삽입
5.4 에러
5.5 함수 인지
5.6 try...finally
5.7 switch주의해야할 점
eval()과 do 표현식
참고: 152쪽
자바스크립트에서 소스 코드 문장인 문(statement)의 완료 값(반환 값과 달라요)을 포착하려면 두 가지 방법이 있습니다.
1. eval()
문자열 인자 그대로를 실행시켜 완료값을 할당시킬 수 있습니다.
let a, b;
a = eval("if (true) { b = 4 + 22 }")
a; // 26그런데 공식 문서에도 나와 있다시피 되도록 쓰지 않는 것이 좋을 것 같습니다.
대략적인 이유는 다음과 같습니다.
- 코드가 실행되는 위치가 보통의 경우와 달라 사용자의 확장 프로그램에 따라 악성 코드가 실행될 수 있다.
- 코드가 호출된 범위가 노출된다.
- 느리다.
- 자세한 이유는 여기에
2. do 표현식
ES7명세에는 다음과 같이 do 표현식을 쓸 수 있습니다.
{} 블록 실행 수 블록 내 마지막 문의 완료 값을 표현식 전체 완료 값으로 반환하여 할당됩니다.
let a, b;
a = do {
if (true) {
b = 4+22;
}
};
a; // 26ES6에서는 안됩니다!
중요하다고 생각한 점
표현식의 부수효과
참고: 153쪽
1. 함수 호출 시 내부 스코프에서 바깥의 변수를 참조했을 때
function changeA() {
A = A + 1;
}
let A = 1;
changeA(); // undefined- 단항증감연산자 ++, --
let a = 25;
let b = a++;
a; // 26
b; // 25
let c = ++a;
a; // 27
c; // 27
156쪽존재하지 않는 프로퍼티 또는 존재하면서 설정 가능한 프로퍼티일 경우(유효한/허용된) delete 연산자는 true를 반환한다. 그 외의 경우는 false를 반환하거나 에러를 낸다.
let obj = {
a: 26
}
let tempInt = 26
globalObj = {
a: 25,
b: 27,
c: 28
}
obj.a; // 26
delete obj.a; // true
delete obj.c; // true
delete tempInt; // false
delete obj; // false
delete globalObj; // true
console.log(obj.a); // undefined- 할당연산자 =
할당연산자의 부수 효과를 잘 활용한 예
// 활용 전
function vowels(str) {
let matches;
if (str) {
matches = str.match(/[aeiou]/g);
if (matches) {
return matches;
}
}
}
vowels("Hello World"); // [ 'e', 'o', 'o' ]
// 활용 후
function vowels(str) {
let matches;
if (str && (matches = str.match(/[aeiou]/g))) {
return matches;
}
}
vowels("Hello World"); // [ 'e', 'o', 'o' ]
궁금한 점
161쪽JSON에 관한 너무나 흔한 오해 중 하나는 내용이 JSON 문자열로만 가득 채워진 파일을<script src=...>태그로 읽어 들여도 정상적인 자바스크립트 코드로 인식될 거란 섣부른 예상이다. 직접 해보면 알겠지만 이른 파일은 프로그램에서도 접근할 수 없다. 그래서 보통 JSON-P(JSON 데이터를 함수 호출로 감싸는 패턴) 방식으로 자바스크립트 함수 중 하나에 이 값을 인자로 실어 보내면 접근이 안 되는 문제를 해결할 수 있다고 한다.
기술 면접 대비
문제
d의 값을 예상하고 그 이유를 설명하세요
let a = 26;
let b = "twentysix"
let c = false;
let d = a || b && c ? c || b ? a : c && b : a;
d; 느낀 점
연산의 우선 순위, 세미콜론 자동 삽입은 사실 몰라도 개발 잘 했었다고 생각했는데, 연산의 우선 순위, 특히나 &&, ||, ?(삼항연산자)의 풀이 순서를 배우니, 조건문 조건을 짜는 것에 마냥 A && B가 A가 존재하면 B~이렇게 생각하지만은 않게 됐습니다.
그리고 어떤 미친 개발자가 기술 면접 대비의 문제처럼 조건문을 짤까요. 읽는 방법만 알면 됐지, 굳이 순서 고려하며 저렇게 짤 일은 크게 없을 것 같습니다. 특히나 세미콜론은 이제 eslint 설정이 무조건 뺸다로 가고 있는데, 자바스크립트 창시자는 꽤나 중요하게 생각하는 것 같아서 다시 한 번 세미콜론이 컴파일이나 런타임에서 어떻게 작용되는지 알아봐야할 것 같습니다.
177쪽2012년, 자바스크립트의 창시자 브렌단 아이크는 다음과 같이 밝힌 바 있다.
ASI(A)는 (공식적으로) 구문 오류를 정정하는 프로시저다. 만약 여러분이 ASI를 보편적인, 유효 개행 문자Significant-Newline 규칙쯤으로 여기고 코드를 작성한다면 곤경에 처하게 될 것이다. 내가 1995년 5월의 열흘 간으로 되돌아갈 수 있다면 강력한 유효 개행 문자를 만들 것이다. ASI가 마치 유효 개행 문자를 넣어주는 것처럼 착각하지 않기 바란다.
