📌 학습한 내용
전체 코드 : 💾
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(): 문자열을 실수형으로 변환
📌 학습내용 중 어려웠던 점
- 스코프와 호이스팅의 개념이 아직 정확하게 이해가 되지 않는다.
📌 해결방법
- 처음 접하는 부분이라 반복하는 것이 가장 좋은 방법이라 생각한다. 본 강의 뿐만 아니라 유튜브 강의와 서칭을 통해 찾은 포스팅을 통해 이해하려 노력해야겠다.
📌 학습소감
꽤 오랜 시간에 걸쳐서 강의를 들었다. 강의 자체는 재생 시간이 그리 길지 않았는데, 중간중간 이해가 가지 않는 부분을 되감아 듣고, 검색을 하는 등 시간이 많이 소모됐다. 특히 스코프와 호이스팅의 개념은 생소해서, 이해하는 데 시간이 걸렸다. 아직 몇 번 더 반복해야 완전히 내 것이 될 듯 하다. 😵
