JavaScript 초급

2022 OSAM 해커톤 사전 온라인 교육에서 배운 내용입니다.
모르는 내용만 발췌하여 정리한 것이기 때문에 내용의 연결성이 부족한 점 양해 부탁드립니다.

undefined와 null

console.log(undefined == null); // true
console.log(undefined === null); // false

• undefined : JS 엔진이 변수를 초기화할 때만 할당하는 값
  • a = undefined; 처럼 개발자가 할당하는 것은 bad practice
• null : 변수에 값이 없음을 명시
  • console.log(typeof null); // object 이지만, 의도한 것이 아니라 typeof 구현 중 발생한 오류다. null은 object type이 아니라, 별개의 null type으로 받아들이자.

헷갈리기 쉬운 것

console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
// 그런데 이런 문법을 쓰는 것부터가 잘못 아닌가? 

alert, prompt, confirm

alert("삭제 되었습니다.");

day = prompt("예약일을 입력하세요.", "2020-10-"); // default 값 제공 가능
if (day == null) { } // 취소 버튼 누르면 null

result = confirm("구독을 취소하시겠습니까?"); // 취소(false), 확인(true)

리팩토링 예제

function sayHello(name) {
	if (name) {
		console.log(`Hello, ${name}!`);
	} else {
		console.log("Hello, friend!");
	}
}

function sayHello(name) {
	let newName = name | "friend";
	console.log(`Hello, ${newName}`);
}

function sayHello(name="friend") {
	console.log(`Hello, ${name});
}

sayHello(); // name=null
sayHello("Jane");

호이스팅으로 인한 의도하지 않은 정상 작동

1. 호이스팅으로 인해 함수 선언문은 맨 위로 올라가기 때문에 의도하지 않은 정상 작동

sayHello(); 

function sayHello() {
	console.log("Hello");
}

1. "use strict"; 를 사용하면 에러 발생시킴

"use strict";

sayHello(); 

function sayHello() {
	console.log("Hello");
}

1. 함수 표현식을 사용하면, 호이스팅이 안 된다.

sayHello(); 

let sayHello = function() {
	console.log("Hello");
}

1. 함수 표현식을 화살표 함수(arrow function)로 변경 가능

sayHello(); 

let sayHello = () => {
	console.log("Hello");
}

화살표 함수는 this를 가지지 않는다.

let boy = {
	name: "Mike",
	sayHello: function() {
		console.log(`Hello, I'm ${this.name}`);
	}
}

let girl = {
	name: "Jane",
	sayHello: function() {
		console.log(`Hello, I'm ${this.name}`);
	}
}

boy.sayHello(); // Hello, I'm Mike
girl.sayHello(); // Hello, I'm Jane

let boy = {
	name: "Mike",
	sayHello: () => {
		console.log(`Hello, I'm ${this.name}`);
	}
}

boy.sayHello(); // Hello, I'm
								// undefined (this 객체에 name이 존재하지 않음)

화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않기 때문에,
화살표 함수 내부에서 this를 사용하면, 외부에서 그 값을 가져온다.

this는 전역객체를 가리킨다. (브라우저에서는 window, NodeJS에서는 global)

따라서, 객체의 메소드는 화살표 함수로 작성하지 말자.

배열 객체

• JS의 배열은 자료형이 달라도 됨. arr[0] = 0; arr[1] = "월요일";

push, pop, shift, unshift

JavaScript	Python
push	append
pop	pop
unshift	appendleft
shift	popleft

• push와 unshift할 때, extend처럼 여러 인자를 한번에 넣어도 됨.

for … of

• for ... in : 객체 순환
• for ... of : 배열 순환 (JS에서는 배열도 객체이기 때문에 in도 되지만, 지양)