📌 학습한 내용

전체 코드 : 💾

IF 조건문

• 소괄호() 안의 문장이 참일때만, 중괄호{} 안의 식이 출력된다.

if(조건식) {
	실행문
} else if(조건식) {
	실행문
} else if(조건식) {
	실행문
} else {
  //(앞의 조건식이 (모두) 거짓일 경우) 
  실행문
}

• 여러 조건들 중에서 여러 개의 참이 존재한다면, 가장 먼저 나오는 참만 실행시킴

중첩 IF문

: if조건문을 보완하기 위함 (if문 안에 if문을 넣는 것)

if(a !== b) {
	if (a > b) {
		console.log("a는 b보다 크다.");
	} else {
		console.log("a는 b보다 작다.");
	}
} else {
	console.log("a와 b는 같다.");
}

거짓이 되는 상황

: 조건식에 아래의 값들이 들어가면 거짓이 된다.
false, ""(빈 문자열), 0, null, undefined

삼항 연산자

: 조건문과 유사하게 동작 (조건문이 단순할 경우 사용)

var 변수명 = (조건식) ? "조건이 참일 경우 실행 결과" : "조건이 거짓일 경우 실행 결과"

if(age >= 18) {
	console.log("성인");
} else {
	console.log("어린이");
}

// 위와 동일한 결과값을 반환
var result = (age >= 18) ? "성인" : "어린이";
console.log(result)

조건문 응용

• prompt : 브라우저에서 사용자에게 값을 전달받기 위한 팝업창을 띄우는 메서드. 모든 브라우저에서 사용 가능하며 팝업창의 형태와 디자인은 브라우저 마다 다름. 해당 메서드로 전달 받은 값은 모두 문자(string) 타입으로 저장됨

var userId = prompt("아이디를 입력해 주세요.");
var userPw = prompt("비밀번호를 입력해 주세요.");

console.log(userId);
console.log(userPw);

(chrom 브라우저 기본 팝업창)

• alert : 브라우저에서 사용자에게 정보 전달만을 수행하는 메서드.
• parseInt : 문자 데이터 타입으로 전달된 숫자를, 숫자 데이터 타입(정수형)으로 바꿔줌.

if(userId === "jane" && parseInt(userPw) === 12345) {
	alert("로그인되었습니다.");
} else {
	alert("아이디 또는 비밀번호가 틀렸습니다.")
}

전역변수 & 지역변수

: (과거)함수를 기준(중괄호x)으로 구분

• 전역변수 : 함수 바깥쪽에 위치하면서 함수 안쪽/바깥쪽 모두에 영향력을 발휘 o

• 지역변수 : 함수 안쪽에서 만들어진 변수 자체, 함수 안에서만 영향력을 발휘 o

• (최신) 자바스크립트 버전에서는 변수 생성시,var가 아니라 let, const 등을 이용해 변수 생성이 가능 -> 전역변수, 지역변수 구분기준이 달라짐.

• 모든 전역변수는 window라는 객체에 property(key)로 할당된다.
  

스코프 (Scope)

: 변수가 영향력을 발휘할 수 있는 범위 (전역변수와 지역변수를 구분짓는 역할)

• 전역 스코프 : 모든 영역에 영향력을 발휘할 수 있는 스코프

• 지역 스코프 : 함수 안에서만 영향력을 발휘할 수 있는 스코프

👉 함수는 서로의 스코프에 접근할 수 없다. (렉시컬 스코핑 (lexical scoping))

function a() {
	var apple = "사과";
}   
// apple이 영향력을 발휘할 수 있는 범위는 함수 호출과 관계없이 여기까지

function b() {
	console.log(apple);
}
// 함수b 내부에는 apple이 존재 x, 하지만 전역변수로 apple이 존재하는 것도 x => error

b();

스코프 체인 (Scope Chain)

: 안쪽에서 부터 바깥쪽을 탐색하는 구조 (바깥쪽에서 안쪽을 탐색하는 것은 불가능)

var a = 10;  // -> 전역 변수, 전역 스코프

function func1() {
	var b = 20;

	function func2() {
		var c = 30;

		console.log(a + b + c);
	}

	func2();

}

func1();

호이스팅 (Hoisting)

: 끌어올리다, 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것

변수 호이스팅

: 변수 및 함수 선언문 보다 앞서 호출을 해도 정상작동이 되는 현상 (변수가 끌어올려 짐)

• 끌어올리는 기능은 초기화에서는 발생 x, 변수를 선언한 상태에서만 호이스팅 발생.

console.log(a);  // 값을 할당하기 이전 상태이기 때문에 undefined 출력

var a;
a = "나는 A다.";  // 초기화

console.log(a);

함수 호이스팅

: 함수 호출을 먼저 하고, 함수를 만들어도 작동 가능

• 변수 안에 함수를 할당시키지 않는 방식으로 함수를 만들었을 때 가능, 변수 안에 함수를 할당한 경우에는 함수 호이스팅은 발생 하지 않는다.

/*
function func1() {
	console.log("Func1 함수다.");
*/ // 호이스팅
func1();

function func1() {
	console.log("Func1 함수다.");
}

func2();
var func2 = function () {
  // 변수는 값을 할당하기 이전에 호이스팅으로 인해 이미 undefined가 들어가 있다.
	console.log("Func2 함수다.");
}

// func2();

자주 사용되는 객체와 메서드

Math 객체

(참조 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math)

// console.log(Math);
Math.abs() // 절댓값 반환
const num1 = Math.abs(-3);
console.log(num1);  // 3

Math.ceil() //무조건 올림 처리
const num2 = Math.ceil(0.43);
console.log(num2); // 1

Math.floor() // 무조건 내림 처리
const num3 = Math.floor(10.9);
console.log(num3); // 10

Math.random() // 0에서 1 사이 랜덤으로 숫자를 뽑아냄
const num4 = Math.random();
console.log(num4); // 0 ~ 1 사이 랜덤

parse 메서드

• parseInt() : 문자열을 정수형으로 변환 소수점 아래는 버린다.
• parseFloat() : 문자열을 실수형으로 변환

📌 학습내용 중 어려웠던 점

1. 스코프와 호이스팅의 개념이 아직 정확하게 이해가 되지 않는다.

📌 해결방법

1. 처음 접하는 부분이라 반복하는 것이 가장 좋은 방법이라 생각한다. 본 강의 뿐만 아니라 유튜브 강의와 서칭을 통해 찾은 포스팅을 통해 이해하려 노력해야겠다.

📌 학습소감

꽤 오랜 시간에 걸쳐서 강의를 들었다. 강의 자체는 재생 시간이 그리 길지 않았는데, 중간중간 이해가 가지 않는 부분을 되감아 듣고, 검색을 하는 등 시간이 많이 소모됐다. 특히 스코프와 호이스팅의 개념은 생소해서, 이해하는 데 시간이 걸렸다. 아직 몇 번 더 반복해야 완전히 내 것이 될 듯 하다. 😵