[대구AI스쿨] 자율개발일지 자바스크립트 3강 제어문, 전역/지역 변수, 스코프, 호이스팅, 반복문 (1)

김선아·2021년 10월 16일
Java Script대구AI스쿨웹프로그래밍
0

대구AI스쿨 개발일지

목록 보기
45/46

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 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가 아닌 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

주의점

렉시컬 스코핑

  • 렉시컬 스코핑 : 함수는 서로의 스코프에 접근할 수 없다.

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다

변수가 선언되어 있다면, 변수선언 전에 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);
profile
김선아
이전 포스트

[대구AI스쿨] 자율개발일지 자바스크립트 1-2강 변수와 데이터타입

다음 포스트

[대구AI스쿨] 자율개발일지 자바스크립트 4강 제어문, 전역/지역 변수, 스코프, 호이스팅, 반복문 (2)

0개의 댓글