인프런에서 제로초님의 자바스크립트 입문 강의를 듣고 새롭게 알게 되는 지식이나 평소 헷갈렸던 것들을 정리해보려 한다
REPL은 READ - EVAL - PRINT - LOOP의 약자로, 읽고 평가하고 출력하고 새로운 입력을 기다리는 상태를 반복하는 것을 말한다
크롬 브라우저의 콘솔이 REPL 개발 도구 중 하나다
parseInt('3월') // 3
Number('3월') // NaN
위 예제처럼 parseInt는 할 수 있는 데 까지 최대로 해석해준다
반면 Number는 딱 봐도 숫자가 아닌 것들은 NaN을 출력한다
parseInt(111, 2) // 7
parseInt의 두 번째 매개변수로 적용하려는 기수법을 적어주면 된다
Not a Number의 약자로, 타입은 number인 것이 모순적이다
NaN은 NaN 끼리 비교하면 false 값을 가지는 유일한 값이다
(!= 연산에서만 true를 출력)
'3월' - 0 // NaN
'3' - 0 // 3
문자열에 Number가 적용되기 때문
boolean으로 형 변환하는 연산자
!! 연산을 하면 다시 자기 자신의 boolean 값을 나타내기 때문에 boolean 값을 알고 싶을 때 유용하다
!! 연산자로 형 변환 시 false가 되는 값은 외우면 좋다
false, ""(빈 문자열), 0, NaN, undefined, null, document.all
for (;;) { }
하지만 보통 for 문에서 조건식을 잘 생략하지 않기 때문에 무한반복을 표현할 때는 while 문을 더 많이 쓴다
const arr = [1, 2, 3, 4, 5];
arr.unshift('0');
console.log(arr); // [0, 1, 2, 3, 4, 5]
배열의 맨 앞에 값을 추가하려면 unshift 메서드를 사용해 추가하면 된다
맨앞 제거는 shift
const arr = [0, 1, 2, 3, 4, 5];
arr.splice(2, 2);
console.log(arr) // [0, 1, 4, 5]
splice의 첫 번째 인자는 시작 인덱스, 두 번째 인자는 지울 요소의 갯수이다
첫 번째 인자만 넣을 경우 해당 인덱스부터 끝까지 삭제한다
const arr = [0, 1, 2, 3, 4, 5];
arr.splice(2, 2, '가', '나');
console.log(arr) // [0, 1, '가', '나', 4, 5]
세 번째 인자부터는 지워진 자리에 넣을 값을 뜻한다
const arr = [1, 2, 3, 4, 5];
arr.splice(2, 0 , 7);
console.log(arr); // [1, 2, 7, 3, 4, 5]
하나도 안 지우고 해당 인덱스에 넣고 싶은 요소를 넣을 수 있다
const arr = [1, 2, 3, 4, 5];
arr.at(0); // 1
arr.at(-2); // 4
at 메서드는 인덱스에 해당하는 요소를 출력한다
마이너스를 넣으면 배열의 뒤부터 요소를 출력한다
대입연산자의 왼쪽에서는 쓸 수 없다
❌ arr(-1) = 5
⭕ arr[arr.length - 1] = 5
function a() {}
const b = function() {};
const c = () => {};
1번 방식 👉 함수 선언문
2번 방식 👉 함수 표현식
3번 방식 👉 화살표 함수
function a(w, x, y, z) {
console.log(w, x, y, z);
console.log(arguments);
}
a("1", "2", "3");
function 내부에는 arguments 라는 값으로 인수를 출력할 수 있다
매핑되지 않는 매개변수 z의 경우 undefined가 된다
배열이나 함수가 아닌 것들 중 특정 모양을 가진 것
즉, 배열이나 함수가 아닌 객체
(배열과 함수는 모두 객체이다)
객체 속성의 이름은 따옴표를 안 붙여도 되지만 숫자가 들어있거나 띄어쓰기, 특수문자가 있다면 따옴표를 붙여야 한다
obj.2bc // error
obj['2bc']
특수한 객체 속성이름의 경우 대괄호 방식으로만 접근 가능하다
객체의 성질을 모두 다 사용할 수 있기 때문이다
👉 배열과 함수에도 속성들을 추가할 수 있고 수정 및 제거할 수도 있다
객체는 함수와 배열을 포함하는 개념이기 때문에 { } 를 사용해 만든 객체를 객체 리터럴이라고 따로 부르는 것이다
객체의 속성 값으로 함수를 넣었을 때 이 속성을 메서드라고 한다
(함수로 불러도 무관)
{} === {} // false
객체끼리 비교하면 false 값을 출력한다 (함수끼리, 배열끼리 비교해도 false 값 출력됨)
객체는 모양이 같아도 생성할 때마다 새로운 객체가 생성되기 때문에 true 값이 나오게 하기 위해서는 기존 객체를 변수에 저장해 두어야 한다
const a = { name: 'zerocho'};
const b = a;
a.name = 'uddi';
console.log(b.name); // uddi
위 예제처럼 객체를 저장한 변수를 다른 변수에 대입하면 두 변수 모두 같은 객체를 저장한다
👉 객체의 속성 값을 바꾸면 변수 a와 b 모두 바뀌는 것처럼 보인다
a와 b 그리고 객체 간에 참조 관계가 있다고 표현
const a = 'zerocho';
const b = a;
a = 'uddi';
console.log(b); // zerocho
객체가 아닌 값을 변수에 저장한 경우에는 참조 관계가 생기지 않기 때문에 a를 바꿔도 b는 영향을 받지 않는다
참조가 생기지 않는 상황을 복사라고 한다
널 병합 연산자는 왼쪽 피연산자가 null 혹은 undefined일 때 오른쪽 피연산자를 반환한다
0 || new Error('error');
하지만 위 예제처럼 0은 null과 undefined 값이 아닌데도 error가 출력된다
👉 | | 연산자는 앞에 값이 false일 때 뒤에 값이 리턴되는데 0은 false 값이기 때문
null과 undefined만 걸러내고 싶다면 ?? 연산자를 사용하면 된다