[JS] 제로초의 자바스크립트 입문 2강

인프런에서 제로초님의 자바스크립트 입문 강의를 듣고 새롭게 알게 되는 지식이나 평소 헷갈렸던 것들을 정리해보려 한다

📌 REPL

REPL은 READ - EVAL - PRINT - LOOP의 약자로, 읽고 평가하고 출력하고 새로운 입력을 기다리는 상태를 반복하는 것을 말한다

크롬 브라우저의 콘솔이 REPL 개발 도구 중 하나다

📌 parseInt()와 Number() 차이

parseInt('3월') // 3
Number('3월') // NaN

위 예제처럼 parseInt는 할 수 있는 데 까지 최대로 해석해준다
반면 Number는 딱 봐도 숫자가 아닌 것들은 NaN을 출력한다

🍞 parseInt에서 다른 기수법 적용하기

parseInt(111, 2) // 7

parseInt의 두 번째 매개변수로 적용하려는 기수법을 적어주면 된다

📌 NaN

Not a Number의 약자로, 타입은 number인 것이 모순적이다

NaN은 NaN 끼리 비교하면 false 값을 가지는 유일한 값이다
(!= 연산에서만 true를 출력)

📌 형 변환

• 문자열과 숫자를 더하면 문자열로 바뀐다
• 문자열에서 숫자를 빼면 NaN이 나온다

'3월' - 0 // NaN
'3' - 0	// 3

문자열에 Number가 적용되기 때문

📌 !! 연산자

boolean으로 형 변환하는 연산자

!! 연산을 하면 다시 자기 자신의 boolean 값을 나타내기 때문에 boolean 값을 알고 싶을 때 유용하다

🍞 외워두면 좋은 false 되는 값들

!! 연산자로 형 변환 시 false가 되는 값은 외우면 좋다

false, ""(빈 문자열), 0, NaN, undefined, null, document.all

📌 for문 무한반복

for (;;) { }

하지만 보통 for 문에서 조건식을 잘 생략하지 않기 때문에 무한반복을 표현할 때는 while 문을 더 많이 쓴다

📌 배열 제일 앞에 값 추가하기

const arr = [1, 2, 3, 4, 5];
arr.unshift('0');
console.log(arr);	// [0, 1, 2, 3, 4, 5]

배열의 맨 앞에 값을 추가하려면 unshift 메서드를 사용해 추가하면 된다

맨앞 제거는 shift

📌 splice( )

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]

하나도 안 지우고 해당 인덱스에 넣고 싶은 요소를 넣을 수 있다

📌 배열 at 메서드

const arr = [1, 2, 3, 4, 5];
arr.at(0);	// 1
arr.at(-2);	// 4

at 메서드는 인덱스에 해당하는 요소를 출력한다
마이너스를 넣으면 배열의 뒤부터 요소를 출력한다

대입연산자의 왼쪽에서는 쓸 수 없다
❌ arr(-1) = 5
⭕ arr[arr.length - 1] = 5

📌 함수에 이름 붙이는 방법

1. function a() {}
2. const b = function() {};
3. 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만 걸러내고 싶다면 ?? 연산자를 사용하면 된다

[출처] 제로초의 자바스크립트 입문