[JS] 210629 학습일지

Scope

- Scope는 변수에 접근할 수 있는 범위를 의미함

- Global (전역), Local (지역) 의 형태로 나뉨

- 범위의 기준은 중괄호로 나눌 수 있음, 아래는 그 예시

 

let carName = "KIA";
 
{
   let carName = "HYUNDAI";
   console.log("Local Block 1 >> " + carName);
}
 
{
    let carName = "SSANGYONG";
    console.log("Local Block 2 >> " + carName);
} 

console.log("Global Block >> " + carName);

// 첫번째 출력 : "Local Block 1 >> HYUNDAI"
// 두번째 출력 : "Local Block 2 >> SSANGYONG"
// 세번째 출력 : "Global Block >> KIA"

Default Function Parameter

- 함수의 파라미터에 값이 없거나 undefined 가 전달될 경우 대체되는 기본값을 말함

 

function say(msg = "None") {
    console.log(msg);
}

say("Hello");
// 결과값 : "Hello";

say();
// 결과값 : "None";
// 에러가 나지 않은 이유는 say 함수의 파라미터인
// msg 에 "None" 이라는 기본값이 부여되었기 때문

Rest Parameter

- 함수의 파라미터 갯수가 정해지지 않고 가변적으로 운용하고 싶을 때 사용하는 문법

 

function add(...nums) {
    var sum = 0;
    for (var n of nums) {
        sum += n;
    }
    return sum;
}

console.log(add(2, 5, 3, 7, 43, 21));
// 결과값 : 81
// 인자로 들어간 2,5,3,7,43,21 이 nums 안에 각 각의 요소로 저장되어 있음

Arrow Function Expression

- function 키워드 대신 화살표 (=>) 를 사용하여 간략하게 함수를 선언할 수 있는 문법

 

var add = function (x1, x2) {
    var sum = x1 + x2;
    return x1 + x2 + sum;
};

// 위 코드를 화살표(=>)를 사용하여 아래와 같이 축약할 수 있음

var add = (x1, x2) => {
    var sum = x1 + x2;
    return x1 + x2
};

// ------------------------------------------------------ //

var div = function (x1, x2) {
    return x1 / x2;
};

// 위 코드를 화살표(=>)를 사용하여 아래와 같이 축약할 수 있음

var div = (x1, x2) => x1 / x2

// 만약 함수 내부 코드가 한 줄로 끝내는 문장이라면
// 중괄호('{}')와 'return' 구문을 생략하여 사용할 수 있음

Template Literals

- 문자열 사이에 변수를 포함시켜 출력을 할 때 기존의 방식은 플러스 (+) 연산자를 이용하였으나

  백틱 ( ` ) 을 활용하면 보다 짧고 간단하게 표현할 수 있음

 

function helloA(name) {
    console.log("Hello " + name + ". Welcome!");
}

hello("Mighty Otter");

function helloB(name) {
    console.log(`Hello ${name}. Welcome`);
} // Python3 의 f-string 과 유사함

// helloA() 와 helloB() 결과는 동일함

Object Literal Syntax Extension

 

var firstName = "John";
var lastName = "Doe";

var Person = {
    firstname: firstName,
    lastName: lastName
}

// Person 변수 내에 firstname 마치 지역 변수처럼 외부의 firstName 과는 다른 변수로 봄
// 단 Person 의 firstname 키에 값을 넣을 때에는 3번 라인의 firstName의 값을 참조함

var type = "Seoul";
var City = {
    [type]: "Republic Of Korea"
}

// 만약 외부의 변수를 이용하여 키 값을 동적으로 받아오고 싶다면 대괄호를 이용하여 
// 외부 변수값을 참조할 수 있음

// City 변수 내 type 의 값을 키로 이용하고자 할 때 위 예시처럼 작성해야함

Spread Operator

-  배열, 문자열 같은 형태의 데이터를 각 각의 요소로 모두 분리시켜 사용할 수 있게 해주는 문법

 

var arr_1 = [4, 5, 6];
var arr_2 = [1, 2, 3];
var arr_3 = [...arr_2, ...arr_1]; 
// Python 의 extend() 와 유사함

console.log(arr_3);
// 출력값 : [1, 2, 3, 4, 5, 6]

var str = "CDEFG";
var alpha_A = ["A", "B", ...str];	// Spread Operator	사용한 경우
var alpha_B = ["A", "B", str];		// 		" 			사용하지 않은 경우 

console.log(alpha_A);
// 출력값 : ["A", "B", "C", "D", "E", "F", "G"]
// str 변수의 각 요소들이 분리되어 하나의 리스트로 합쳐졌음

console.log(alpha_B);
// 출력값 : ["A", "B", "CDEFG"]
// str 변수가 리스트에 추가되었으나 str 변수 문자열의 각 요소들이 분리되어 추가되진 않았음

예외 처리

- 프로그램 실행 도중 문제 발생 시 프로그램은 자동 중단됨. 이 경우 프로그램이 문제에 대처할 수 있도록 처리하는 것을 예외 처리(Exception Handling) 라고 함

 

* 프로그램 실행 중 발생하는 오류 = 예외(Exception)

  프로그래밍 언어의 문법적인 오류 = 에러(Error)

Try ... Catch ... Finally

A) Try 내에서 문제가 발생하지 않은 경우

   1. Try 문 실행

   2. Finally 문 실행 ( 문제가 발생하지 않아 Catch 구문으로 넘어가지 않음 )

   3. 예외 처리 하단의 나머지 코드 진행

 

B) Try 내에서 문제가 발생한 경우

   1. Try 문 실행

   2. Catch 문 실행 ( Try 문에서 문제 발생 즉시 Catch 구문으로 넘어감 )

   2. Finally 문 실행 

   3. 예외 처리 하단의 나머지 코드 진행

 

- Finally 문은 예외 발생 여부와 상관없이 실행함

Throw

- 예외를 강제로 발생시켜야 하는 경우 사용하는 키워드

- 예시로 변수의 값이 예상되는 값의 범위를 벗어나 문제가 발생할 수 있는 경우 Throw 를 사용하여 예외(Exception)을 발생시킬 수 있음

 

function exceptionTest(value) { 
	if (value == -1) {
    	throw new Error('-1 이 아닌 값을 입력하시오') 
    }
	console.log(`전달받은 값은 ${value} 입니다.`);
}