3-06 Template Literals ~ 3-13 클래스

3-06 Template Literals

//일반적인 함수 선언 방식
function hello(name) {
	console.log("hello " + name + ". welcome!");
}

//Ecma6 버전부터 추가 된 기능임
function hello2(name) {
    console.log("Hello ${name}. Welcome!");
}
hello2("John")
//Hello John. Welcome!으로 출력하게 됨

문자열을 바로 이어주는 역할을 하면서, 복잡한 코드를 더 간단하게 만들 수 있다는 장점이 있음

 

 

3-07 Object Literal Syntax Extension 

//일반적인 오브젝트 선언을 활용한 코드(키값은 변경이 안됨)
var firstName = "hyun";
var lastName = "woo";
var person = {
    firstName : firstName,
    lastName : lastName
};

var type = "student";
var test = {
    [type] : "hyuniii",
    score : 95
};

console.log(test)
//student : hyuniii, score : 95  로 오브젝트를 반환함

일반적인 오브젝트 선언은 밸류 값은 변경이 가능하지만, 키 값은 변경이 불가능 함

하지만, Object Literal Syntax Extension은 오브젝트를 선언하는 시점에 키 밸류 값을 넣을때 대괄호를 이용하여 동적으로 키값을 넣는 방법임

 

 

3-08 Spread Operator

var arr1 = [4, 5, 6];
var arr2 = [1, 2, 3,...arr1]; 
console.log(arr2);
//[1,2,3,4,5,6] Array를 반환함

//활용방법
var arr1 = [4, 5, 6];
var arr2 = [1,...arr1, 2, 3]; 
console.log(arr2);
//[1,4,5,6,1,2,3] Array를 반환함

//활용방법
var cd = "CD"
var alphabet = ["A","B",...cd]; 
console.log(alphabet);
//[A,B,C,D] Array를 반환함

 

Ecma6 버전부터 추가 된 기능임(값 하나하나를 분해해서 넣어 줌)

'...'을 이용해서 활용함 

원하는 위치에 원하는 데이터를 spread시켜 넣어줌( cf)concat()는 바로 뒤로 배열을 이어줌 )

배열안에 spread는 여러 개를 사용해도 상관없음

문자열의 경우에는 문자열 글자 하나 하나를 spread해서 가져옴 

 

 

3-09 Object Destructuring

//일반적인 함수를 통한 오브젝트 선언
function getPerson() {
	return {
        firstName : "Jhon",
        lastName : "Doe",
        age : 30,
        email : "john@gmail.com",
        city : "Seoul",
        country : "Korea"
    };
}

//일반적인 함수 내 오브젝트 활용 방법
var person = getPerson();
console.log(person);
console.log(person.firstName);

//Object Destructuring을 사용하여 함수 내 오브젝트를 활용하는 방법
var {firstName, lastName} = getPerson(); 
console.log(firstName);

Ecma6 버전부터 추가 된 기능임

오브젝트 내의 필요한 데이터만 가져 올 수 있음

오브젝트 선언에 중괄호를 이용하니 오브젝트 드스트럭쳐도 중괄호를 이용함

 

 

3-10 Array Destructuring

//일반적인 함수 내 배열 선언
function getScores() {
    return [70, 80, 90];
}

//일반적인 함수 내 배열 활용 방법
var scores = getScores();
console.log(scores);
console.log(scores[0]);

//Array Destructuring을 이용한 함수 내 배열 활용 방법
var [x, y] = getScores();
console.log(x);
console.log(y);
//'70'을 반환함
//'80'을 반환함

Object Destructuring와 같은 원리임

오브젝트와 마찬가지로 배열 내의 필요한 데이터만 가져 올 수 있음 

 

 

3-11 Promise

var x = 1;
y = callServerDate(); //y는 서버 호출해서 데이터를 받아오는 함수로 가정
var z = x + y;
console.log(z);

위의 상황이라고 가정한다면, 데이터를 받아오는 중에 z가 먼저 실행되는 경우가 발생해, Error가 발생 할 수 있음

이런 경우를 방지하기 위해 Ecma6버전부터 추가 된 기능이 promise 기능임

기능의 존재 이유는 알겠으나, 정확하게 어떻게 활용하는지는 이해하지 못했음!

promise 기능과 거의 동일한 기능으로 Async Await 라는 기능이 있음 

 

 

3-12 Module

함수를 JavaScript 파일로 만듬

 //일반적인 javascript 파일 호출 방식(javascript에 export를 입력하지 않았다는 가정하에)
<script src="/scripts/3-13.module.js" type="module"></script>
 
 //Module을 활용하여 javascript 파일을 호출하는 방식
 <script type = "module">
    import {log, error} from "/scripts/3-13.module.js";
    log("log로 메시지 출력")
    error("error로 메시지 출력")

Ecma6 버전부터 추가 된 기능임

모듈을 활용하면 에러를 줄일 수 있는 장점이 있고, import를 통해 필요한 부분만 가져올 수 있기 때문에 자바스크립트 전체를 읽을 필요가

없어 효율이 증가함

 

 

3-13 클래스

//클래스 선언 예시
class Car {
    constructor(modelName, modelYear, type, price) {
        this.modelName = modelName;
        this.modelYear = modelYear;
        this.type = type;
        this.price = price;
    }
    getModelName() {
        return this.modelName;
    }
    getModelYear() {
        return this.modelYear;
    }
}


//클래스 객체 선언 및 활용
let car = new Car("아이오닉", "2021", "전기차", 4000);
    console.log(car.getModelName());
    console.log(car.getModelYear()); 

    let car2 = new Car("제네시스", "2021", "가솔린", 6000);
    console.log(car2.getModelName());
    console.log(car2.getModelYear());
    

//클래스 상속 예시
class ElectronicCar extends Car {
    constructor(modelName, modelYear, type, price)
    super(modelName, modelYear, type, price)
    }

let elecCar1 = new ElectronicCar("아이오닉", "2021", "전기차", 4000);
console.log(elecCar1.getModelName());

객체 지향 프로그래밍을 위한 기반이 되는 클래스는 클래스 객체를 생성하기 위한 일종의 틀로

클래스 선언 방식, 객체 선언 방식의 약간의 차이는 존재하지만, 개념자체는 파이썬과 크게 다르지 않아 이해하기 쉬웠음

 

 

오늘을 마무리 하며 :

새로운 기능들을 계속해서 배우고 있지만, 이해가 되는 기능들도 있고 이해가 되지 않는 부분들도 많이 있습니다.

강의를 들으면서 약간 답답한 감이 없지 않아 있지만, 일단은 javascript가 어떤 기능들을 가지고 있고 어떻게 문법을 구사하는지 전체적으로 둘러보기 위한 과정이므로, 우선 계속해서 강의를 들을 예정입니다. 

머리에 들어오는게 없는것 같은 기분이 들어 오늘 하루는 조금은 답답한 마무리인 것 같습니다.