[대구AI스쿨] 자율개발일지 자바스크립트 3강 제어문, 전역/지역 변수, 스코프, 호이스팅, 반복문 (1)
IF 조건문, 중첩 IF문
// IF 조건문
var a = 20;
var b = 40;
var c = 60;
if(a < b) {
console.log('a는 b보다 작다.');
// true인 경우 a는 b보다 작다.가 출력된다.
// false인 경우에는 아무것도 출력되지 않는다.
}
// 변수가 두 가지일 때
if(a > b) {
console.log('a는 b보다 크다.');
} else {
console.log('a는 b보다 작다');
}
// 변수가 세 가지 일 때
if(a > b) {
console.log('a는 b보다 크다');
} else if(b > c) {
console.log('b는 c보다 크다');
} else if(a > c) {
console.log('a는 c보다 작다');
} else if(b < c) {
console.log('b는 c보다 작다');
} else {
console.log('모든 조건을 만족하지 않는다.')
}
// if문을 작성할 때, 여러개의 참이 존재할 경우 가장 먼저 작성된 참 하나만 출력된다. 출력된 이후에는 if문 실행이 중지된다.
// 여기에서는 'b는 c보다 작다'가 출력된 이후, 실행이 중지되었다.
// 중첩 IF문
// if문을 작성할 때는, 최대한 꼼꼼하게 해야한다.
// 처음 분류는 a와 b가 다른지, 같은지를 분류한 뒤, 다를 경우를 중첩 if문으로 세밀하게 작성한다.
if (a !== b) {
if(a > b) {
console.log('a는 b보다 크다');
} else {
console.log('a는 b보다 작다');
}
} else {
console.log('a와 b는 같다');
}
IF문에서 거짓이 되는 상황
// 거짓이 되는 상황
// false, ''(빈 문자열), 0, null, undefined
var test; /* 변수에 아무 값도 넣지 않았음. 자동으로 undefined로 설정됨. if문에서 test를 넣으면 undefined로 인식되어 false값이 출력됨 */
var test = 10; /* if문에 넣으면 true값이 출력됨 */
if(test) {
console.log('참!!!');
} else {
console.log('거짓!!!');
}
삼항 연산자
// 삼항 연산자
var age = 15;
if(age >= 18) {
console.log('성인');
} else {
console.log('어린이');
}
// if문의 도출 결과로 한줄만 작성된 경우에는 삼항 연산자를 이용하는 것이 간결하다.
var result = (age >= 18) ? '성인' : '어린이';
console.log(result);
ID/PW 프롬프트 만들기
// IF 조건문
var a = 20;
var b = 40;
var c = 60;
if(a < b) {
console.log('a는 b보다 작다.');
// true인 경우 a는 b보다 작다.가 출력된다.
// false인 경우에는 아무것도 출력되지 않는다.
}
// 변수가 두 가지일 때
if(a > b) {
console.log('a는 b보다 크다.');
} else {
console.log('a는 b보다 작다');
}
// 변수가 세 가지 일 때
if(a > b) {
console.log('a는 b보다 크다');
} else if(b > c) {
console.log('b는 c보다 크다');
} else if(a > c) {
console.log('a는 c보다 작다');
} else if(b < c) {
console.log('b는 c보다 작다');
} else {
console.log('모든 조건을 만족하지 않는다.')
}
// if문을 작성할 때, 여러개의 참이 존재할 경우 가장 먼저 작성된 참 하나만 출력된다. 출력된 이후에는 if문 실행이 중지된다.
// 여기에서는 'b는 c보다 작다'가 출력된 이후, 실행이 중지되었다.
// 중첩 IF문
// if문을 작성할 때는, 최대한 꼼꼼하게 해야한다.
// 처음 분류는 a와 b가 다른지, 같은지를 분류한 뒤, 다를 경우를 중첩 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 test; /* 변수에 아무 값도 넣지 않았음. 자동으로 undefined로 설정됨. if문에서 test를 넣으면 undefined로 인식되어 false값이 출력됨 */
var test = 10; /* if문에 넣으면 true값이 출력됨 */
if(test) {
console.log('참!!!');
} else {
console.log('거짓!!!');
}
삼항 연산자
// 삼항 연산자
var age = 15;
if(age >= 18) {
console.log('성인');
} else {
console.log('어린이');
}
// if문의 도출 결과로 한줄만 작성된 경우에는 삼항 연산자를 이용하는 것이 간결하다.
var result = (age >= 18) ? '성인' : '어린이';
console.log(result);
ID/PW 프롬프트 만들기
// 삼항 연산자
var age = 15;
if(age >= 18) {
console.log('성인');
} else {
console.log('어린이');
}
// if문의 도출 결과로 한줄만 작성된 경우에는 삼항 연산자를 이용하는 것이 간결하다.
var result = (age >= 18) ? '성인' : '어린이';
console.log(result);
IF문을 사용하여 로그인 기능이 되는 프롬프트를 만들어 본다.
var userId = prompt('아이디를 입력해주세요');
var userPw =prompt('비밀번호를 입력해주세요');
// prompt : 브라우저에서 팝업으로 입력창이 뜨게 함
console.log(userId); → 프롬프트 창에 입력한 ID가 나옴 [string]
console.log(userPw); → 프롬프트 창에 입력한 PW가 나옴 [string]
if(userId === 'seona' && userPw === '12345') {
alert('로그인 되었습니다.');
} else {
alert('아이디 또는 비밀번호가 틀렸습니다.');
}
// alert : 브라우저에서 팝업 문구가 뜨게 함 (입력창 없음)
만약, if문에서 userPw === 12345
로 입력한다면
userPw는 string
, 12345는 Number
로 데이터 타입이 불일치하게 되어,
아이디 또는 비밀번호가 틀렸습니다. 가 도출된다.
if(userId === 'seona' && parseInt(userPw) === 12345) {
alert('로그인 되었습니다.');
} else {
alert('아이디 또는 비밀번호가 틀렸습니다.');
}
// userPw의 데이터 타입을 Number로 바꾸기 위해서는 parseInt 메서드를 사용하면 된다.
전역변수와 지역변수
// 전역변수와 지역변수
var globalV = '전역변수'; → 함수 안에서도 밖에서도 모두 사용이 가능한 변수
function func() {
var localV = '지역변수'; → 함수 안에서 만들어져서, 함수 안에서만 사용이 가능한 변수
console.log(globalV);
console.log(localV);
}
console.log(globalV);
console.log(localV); → 함수 밖에서 사용된 지역 변수는 undefined 즉, 존재하지 않는 변수로 인식된다.
// 전역변수와 지역변수
var globalV = '전역변수'; → 함수 안에서도 밖에서도 모두 사용이 가능한 변수
function func() {
var localV = '지역변수'; → 함수 안에서 만들어져서, 함수 안에서만 사용이 가능한 변수
console.log(globalV);
console.log(localV);
}
console.log(globalV);
console.log(localV); → 함수 밖에서 사용된 지역 변수는 undefined 즉, 존재하지 않는 변수로 인식된다.
과거에는 전역변수와 지역변수를 나누는 기준이 함수
였다.
최신 자바스크립트에서는 var가 아닌 let, const
로 변수를 선언하고, let, const
로 선언한 변수들은 전역변수와 지역변수를 구분 짓는 기준점이 달라지게 된다.
하지만, 이번 강의에서는 다루지 않고 넘어감.
후에 추가 공부가 반드시 필요하다.
주의점
전역변수와 지역변수의 변수명이 같을 때
var gv = '전역변수';
function func() {
var gv = '지역변수';
console.log(gv);
}
func(); → 지역변수 문자가 출력됨
console.log(gv); → 전역변수 문자가 출력됨
지역변수를 var gv = '지역변수';
가 아닌, gv = '지역변수';
라고 입력하면 func()
, console.log(gv)
둘 다 지역변수 글자가 출력된다.
var gv = '전역변수';
function func() {
gv = '지역변수';
// 원래 존재하는 변수 gv의 내용을 교체하는 것. 새로운 변수를 만들고 싶다면, 반드시 var를 사용하여 변수선언을 해야한다.
console.log(gv);
}
func(); → 지역변수 문자가 출력됨
console.log(gv); → 지역변수 문자가 출력됨
이미 만들어져 있는 gv라는 변수의 내용을 함수 안에서 바꾼 것이 된 것으로 인식하기 때문.
새로운 지역변수를 만들고 싶다면 반드시 var
를 사용하여 변수 선언을 해야한다.
전역/지역 변수의 구분은 중괄호가 아니다.
var gv = '전역변수';
if(true) {
var lv = '지역변수????';
console.log(gv); → 전역변수
console.log(lv); → 지역변수????
}
console.log(gv); → 전역변수
console.log(lv); → 지역변수????
// if문 안에 있는 변수도 전역변수가 맞다.
// 지역변수는 함수를 기준으로 구분되며, 중괄호가 기준점이 아님을 확실히 기억할 것
스코프
- 스코프 : 변수가 영향력을 발휘할 수 있는 범위
//전역 스코프
var gv = '전역변수';
function func() {
console.log(gv);
}
func(); → 전역변수
console.log(gv); → 전역변수
// 지역변수
function func() {
var lv = '지역변수';
console.log(lv)
}
func(); → 지역변수
console.log(lv); → Uncaught ReferenceError: lv is not defined
주의점
렉시컬 스코핑
- 렉시컬 스코핑 : 함수는 서로의 스코프에 접근할 수 없다.
//전역 스코프
var gv = '전역변수';
function func() {
console.log(gv);
}
func(); → 전역변수
console.log(gv); → 전역변수
// 지역변수
function func() {
var lv = '지역변수';
console.log(lv)
}
func(); → 지역변수
console.log(lv); → Uncaught ReferenceError: lv is not defined
ex1) 서로 다른 함수에 선언된 변수
function a() {
var apple = '사과'; → 오직 함수 a에서만 영향력을 가진다.
}
function b() {
a();
console.log(apple);
// a 함수를 호출했어도, b 함수에서 선언된 변수가 아니기 때문에, 변수 apple은 b함수에서 사용될 수 없다.
}
b(); → Uncaught ReferenceError: apple is not defined
ex2) 전역변수가 함수안에서 값이 변경된 경우(변수 초기화)
var name = 'seona';
function func1() {
console.log(name);
}
function func2() {
name = 'kim'; (변수 초기화)
// 전역변수 name의 값이 'kim'으로 변경되었다.
func1(); → kim
}
func2(); → kim
ex3) 새로운 지역변수를 선언한 경우
함수가 사용될 때는 함수의 값만 참조된다. 안에 있는 공식이 참조되는 것이 아님을 알아두자
var name = 'seona';
function func1() {
console.log(name);
}
function func2() {
var name = 'kim';
// 지역변수 name이 새로 선언되었다.
func1(); → seona
// func1 의 값만 출력된다.
// func1 = console.log(name);이 아님을 기억하자!!
}
func2(); → seona
스코프 체인
스코프 체인은 중첩 스코프, 스코프 버블이라는 용어로도 사용된다.
- 스코프 체인 : 함수 안쪽에서 외부를 탐색하는 것
var a = 10;
function func1() {
var b = 20;
function func2() {
var c = 30;
console.log(a + b + c);
}
func2();
console.log(c); → Uncaught ReferenceError: c is not defined
// 외부에서 안쪽을 탐색할 수는 없음
}
func1(); → 60
func1();
의 값이 60이 나오는 이유
①func1();
을 실행하면, func1 중괄호 안에 있는 것이 처음부터 끝까지 실행된다.
②-1) func1 마지막에서func2();
가 실행되면서, 그 안에 있던console.log(a + b + c);
가 실행된다.
②-2) func2에서 변수 a와 b가 선언되지 않았지만,
a는 전역변수
,b는 func2가 func1에 속한 함수이기 때문
에 func2에서 가져올 수 있다.
호이스팅
// Hoistig
// 변수 호이스팅
console.log(a); → undefined
var a; (변수선언)
a = '나는 a다'; (변수 초기화)
// 위의 두 줄을 주석처리하고, var a = '나는 a다';(변수선언과 동시에 초기화)라고 입력해도 결과값은 같다.
console.log(a); → 나는 a다
// Hoistig
// 변수 호이스팅
console.log(a); → undefined
var a; (변수선언)
a = '나는 a다'; (변수 초기화)
// 위의 두 줄을 주석처리하고, var a = '나는 a다';(변수선언과 동시에 초기화)라고 입력해도 결과값은 같다.
console.log(a); → 나는 a다
변수가 선언되어 있다면, 변수선언 전에 console.log
를 입력해도 undefined
가 도출된다.
변수 초기화전에는 무조건
undefined
가, 초기화 후
에는 초기화 시킨 값
이 출력된다.
변수선언과 동시에 초기화
를 시킨 경우에도 똑같이 적용된다.
// 함수 호이스팅
// function 키워드로 만들어진 함수는 함수선언 앞, 뒤 어느쪽에서 호출해도 함수의 내용이 출력된다.
func1(); → Func1 함수다
function func1() {
console.log('Func1 함수다');
}
func1(); → Func1 함수다
// var 키워드로 만들어진 함수
// 이 때는, 변수 호이스팅과 같은 결과가 된다.
func2(); → Uncaught TypeError: func2 is not a function
var func2 = function () {
console.log('Func2 함수다');
}
func2(); → Func2 함수다
Math 객체
console.log(Math);
로 Math객체 목록을 확인할 수 있다.
★mdn javascript math라고 검색하여 mozilla 홈페이지에 들어가면 Math객체에 대해 자세하게 공부할 수 있다.
// abs 절대값을 나타내는 메서드
var num1 = Math.abs(-3);
console.log(num1);
// ceil 올림
var num2 = Math.ceil(0.3);
console.log(num2);
// floor 내림
var num3 = Math.floor(10.9);
console.log(num3);
// random 0 ~ 1 미만의 숫자를 랜덤하게 가져오는 메서드
var num4 = Math.random();
console.log(num4);
// parseInt() : string 데이터타입을 number로, 정수 형태로 바꾸어 줌
// parseFloat() : string 데이터타입을 number로, 실수 형태로 바꾸어 줌
var str1 = '20.6';
var str2 = '3.15';
var num1 = parseInt(str1);
var num2 = parseFloat(str2);
console.log(num1);
console.log(num2);
Author And Source
이 문제에 관하여([대구AI스쿨] 자율개발일지 자바스크립트 3강 제어문, 전역/지역 변수, 스코프, 호이스팅, 반복문 (1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@seona056/대구AI스쿨-자율개발일지-자바스크립트-3강-제어문-전역지역-변수-스코프-호이스팅-반복문-1
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
console.log(Math);
로 Math객체 목록을 확인할 수 있다.★mdn javascript math라고 검색하여 mozilla 홈페이지에 들어가면 Math객체에 대해 자세하게 공부할 수 있다.
// abs 절대값을 나타내는 메서드
var num1 = Math.abs(-3);
console.log(num1);
// ceil 올림
var num2 = Math.ceil(0.3);
console.log(num2);
// floor 내림
var num3 = Math.floor(10.9);
console.log(num3);
// random 0 ~ 1 미만의 숫자를 랜덤하게 가져오는 메서드
var num4 = Math.random();
console.log(num4);
// parseInt() : string 데이터타입을 number로, 정수 형태로 바꾸어 줌
// parseFloat() : string 데이터타입을 number로, 실수 형태로 바꾸어 줌
var str1 = '20.6';
var str2 = '3.15';
var num1 = parseInt(str1);
var num2 = parseFloat(str2);
console.log(num1);
console.log(num2);
Author And Source
이 문제에 관하여([대구AI스쿨] 자율개발일지 자바스크립트 3강 제어문, 전역/지역 변수, 스코프, 호이스팅, 반복문 (1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seona056/대구AI스쿨-자율개발일지-자바스크립트-3강-제어문-전역지역-변수-스코프-호이스팅-반복문-1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)