[대구AI스쿨] JavaScript 개발일지 -2-

임채업·2021년 8월 31일

□ 자바스크립트 - 2강 1/3

★ 작성코드

1. IF 조건문

● 만약 ( ) 조건이 참(true)이면, { }의 동작을 수행함

예시)
① 조건이 참(true)일 경우

var a = 20;
var b = 40;

if(a < b) {
    console.log("a는 b보다 작다.");
}

② 조건이 거짓(false)일 경우

var a = 20;
var b = 40;

if(a > b) {
    console.log("a는 b보다 작다.");
}

● else – if 조건문에서 참(true)이 아닐 경우, 동작을 수행함

예시)

var a = 20;
var b = 40; 

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

● else if – 여러개의 조건을 사용하고자 할 때 사용함

예시)

var a = 20;
var b = 40;
var c = 60;

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("모든 조건을 만족하지 않는다.");
}

※ 조건들 중에서 여러 가지 참(true)가 존재할 경우, 가장 먼저 나오는 참(true)만 실행함

● 중첩 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 age = 15;

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


var result = (age >= 18) ? "성인" : "어린이";
console.log(result);

● 조건문 응용
① prompt

자바스크립트에서 미리 만들어진 메서드, 브라우저 환경에서만 동작함(브라우저마다 모양은 차이가 있음)
사용자한테 어떤 값을 전달받을 때 사용되는 팝업을 띄우는 기능

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

console.log(userID);
console.log(userPW);

※ 예시로 userID와 userPW에 ‘Chaeeop’과 12345를 입력한 경우, 아래와 같이 출력함

여기서 조건문과 alert를 통해서 입력값에 대한 결과창을 띄울 수 있음

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

※ userPW가 “12345” (문자열)이 아닌 12345(숫자)라면 에러가 발생함
→ prompt로 전달받는 값은 데이터 타입이 string(문자열)

※ parseInt - 메서드를 사용하면 문자열로 전달된 숫자를 정수 숫자 데이터 타입으로 변환시킴
예시)

var userPW = prompt("비밀번호를 입력해 주세요.");

if(parseInt(userPW) === 12345) {
    alert("로그인되었습니다.");
} else {
    alert("비밀번호가 틀렸습니다.")
}

● 전역 변수와 지역 변수
※ 함수(function)을 기준으로 나누어짐
① 전역 변수 : 함수 바깥쪽에서 만들어진 변수, 함수 안쪽과 바깥쪽 모두 영향력을 행사할 수 있음
② 지역 변수 : 함수 안에서 만들어진 변수, 함수 안에서만 영향력을 발휘함

예시)

var globalV = "전역변수";

function func() {
    var localV = "지역변수";

    console.log(globalV);
    console.log(localV);
}

func();

console.log(globalV);
console.log(localV);

※ 최신 JavaScript에서의 변수 작성 → let, const도 사용함

※ 변수 만들 시 주의점

예시)

var gv = "전역변수";

function func() {
    var gv = "지역변수";
    console.log(gv);
}

func();

console.log(gv);

※ 전역변수를 조금 더 간편하게 확인하는 방법 → 브라우저의 검사 기능을 이용하여 console를 이용
→ console창에서 window를 입력하고 실행

● 스코프 – 변수가 영향력을 발휘할 수 있는 범위
① 전역 스코프 – 모든 영역에 영향력을 발휘 할 수 있는 스코프
예시)

var gv = "전역변수";

function func() {
    console.log(gv);
}

func();

console.log(gv);

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

예시)

function func() {
    var lv = "지역변수";
    console.log(lv);
}

func();

console.log(lv);

★ 함수(지역 스코프)는 서로의 스코프에 접근할 수 없다!!

예시)

function a() {
    var apple = "사과";
}

function b() {
    a();
    console.log(apple);    
}

b();

※ 함수 b()가 함수 a()에 접근할 수 없기에, 정의되지 않았다(not defined)는 결과가 나옴.

● 스코프 체인 – 함수 안쪽에서부터 외부를 탐색하는 것
※ 안쪽에서 바깥쪽으로 탐색은 가능하지만, 바깥쪽에서 안쪽으로의 탐색은 불가능함

예시)

var a = 10;

function func1() {
    var b = 20;

    function func2() {
        var c = 30;
        console.log(a + b + c);
    }

    func2();
}

func1();

※ 작동 순서
① func1()을 호출하여 실행함
② func1() 안의 func2()를 호출하여 실행함
③ func2()의 console.log를 실행하고자 정의된 a와 b를 찾아서 func1()과 전역스코프를 순서대로 찾아서 값을 할당함

● 렉시컬 스코핑(Lexical scoping)

예시)

var name = "Chaeeop";

function func1() {
    console.log(name);
}

function func2() {
    name = "Rim";
    func1();
}

func2();

예시2)

var name = "Chaeeop";

function func1() {
    console.log(name);
}

function func2() {
    var name = "Rim";

    func1();
}

func2();

● 호이스팅
① 변수 호이스팅 – 원칙상 코드 작성 순서대로 실행이 되어야 하지만, 실행할 때, 변수 호이스팅으로 변수 선언이 자동적으로 순서가 위로 배치되는 것

예시)

console.log(a);

var a;

// console.log(a);

→ console에서 not defined가 아닌 undefined가 출력됨

※ 변수 호이스팅은 변수 선언에 관해서만 호이스팅이 되고, 변수 초기화에는 적용되지 않음

예시2)

console.log(a);

var a;
a = "나는 A다.";

console.log(a);

→ 변수 선언과 초기화를 동시에 진행해도(var a = “나는 A다.”;) 같은 호이스팅 결과가 나옴

② 함수 호이스팅 – 변수 안에 함수를 할당시키지 않는 방식으로 함수를 만들 때, 가능함

예시)

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

func1();

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

// func1();

※ 주의점 – 변수를 만들어서 함수 안에 할당하는 방식으로 만들었다면, 함수 호이스팅은 발생하지 않음

예시)

// var func2 = undefined;

func2();

var func2 = function () {
    console.log("Func2 함수다");
}

// func2();

● 자바스크립트에서 빈번하게 사용되는 객체와 메서드들

1) Math 객체

console.log(Math);를 통해서 여러 프로펄티와 메서드를 확인할 수 있음
참고 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

① Math.abs() - 절대값을 반환하는 메서드
② Math.ceil() - 전달된 인수를 ‘올림’ 처리하는 메서드
③ Math.floor() - 전달된 인수를 ‘내림’ 처리하는 메서드
④ Math.random() - 랜덤한 숫자를 뽑아내는 메서드, 0이상에서 1미만의 값을 범위로 갖고 있음

예시)

var num1 = Math.abs(-3);
console.log(num1);

var num2 = Math.ceil(0.3);
console.log(num2);

var num3 = Math.floor(10.9);
console.log(num3);

var num4 = Math.random();
console.log(num4);

2) parseInt(), parseFloat() - 문자열 데이터 타입을 숫자형 데이터 타입으로 변경할 때 사용함
① parseInt() - 정수형태로 변환
② parseFloat() - 실수형태로 변환

예시)

var str1 = "20.6";
var str2 = "3.14";

console.log(typeof str1);
console.log(typeof str2);


var num1 = parseInt(str1);
var num2 = parseFloat(str2);

console.log(num1);
console.log(typeof num1);
console.log(num2);
console.log(typeof num2);