JavaScript | 함수,오브젝트,클래스,상속,래퍼객체

| 함수

1. 함수의 기본

function sum(num1, num2){
    console.log('sum() 호출!');
    return num1 + num2;
}
const result = sum(10,3);
console.log(result);

--결과--

sum() 호출!
13

1. 함수 메모리

const add = sum ; //메모리 주소만 복사한것이라 같은곳을 가리키기게됨
console.log(sum(10,3));
console.log(add(10,3));

--결과--

sum() 호출!
13
sum() 호출!
13

1. 함수 작성법(팁!)
   조건이 맞지 않는 경우 함수 도입부분에서 함수를 미리 종료!

function print(num){
    if(num < 0){
        return;  //함수의 결과값 전달 + 함수종료를 함!
    }            //위쪽에서 if문으로 거르고 싶은거 return 써서 걸러버리고 필요한건 아래쪽에 씀 
                 //최종적으로else는 쓰지않으면 좋다
    console.log(num);
}
print(10);
print(-1);

--결과--

10

1. 매개변수의 기본값은 무조건 undefined

function total(num1, num2){
    console.log(num1);
    console.log(num2);
    console.log('arguments: ',arguments)
    console.log('arguments: ',arguments[1])
    return num1 + num2;
}
console.log(total());
console.log(total(10,3));

--결과--

//console.log(total())했을때

undefined
undefined
arguments:  [Arguments] {}
arguments:  undefined
NaN



//console.log(total(10,3))했을때

10
3
arguments:  [Arguments] { '0': 10, '1': 3 }
arguments:  3
13

1. 콜백 함수

    //자바스크립트 왕초보
function cal_add(num1, num2){
    return num1+num2;
}
function cal_multiply(num1, num2){
    return num1*num2;
}

    //자바스크립트 똑똑이
const calc_add = (a,b) => a+b;
const calc_multiply = (a,b) => a*b;

function calculator(num1, num2, action){
    if(num1 < 0 || num2 < 0){
        return;
    }
    const result = action(num1, num2)
    console.log(result);
    return result;
}

calculator(4,2, calc_add);
calculator(4,2, calc_multiply);

--결과--

6
8

1. 원시값과 객체값의 비교
   원시값: 값에 의한 복사 call by value
   객체값: 참조에 의한 복사(메모리주소) call by reference

function display(num){
    console.log(num);
}
const value = 5;
display(value);
console.log(value)

function displayObj(obj){
    obj.age = 12;  // 원본값이 변경되기때문에 이렇게 하면 안됨
    console.log(obj);
}

const dog = {name:'루시', age:13};
displayObj(dog);
console.log(dog);

--결과--

5
5
{ name: '루시', age: 12 }
{ name: '루시', age: 12 }

그래서 복사해서 쓰는법
...은 받은 오브젝트를 복사해라

function changeAge(ojb){
    return{...obj, age: 12};
}
dog2 = changeAge(dog)
console.log(dog2)

--결과--

{ name: '루시', age: 12 }

 

| 오브젝트

// dog은 객체이고, 어떤 클래스의 인스턴스도 아님
let dog = {
    name:'루시',
    age:13,
    'dog-weight': 3.5, //키값에 특수문자가 들어가면 따옴표 ' 써야함
    ['height']:0.8 //이런식으로 대괄호를 써도 됨. 호출할때 dog.name  or  dog['height'] 이런식으로 호출하니까
}
console.log(dog['height']);

--결과--

0.8

1.속성추가

dog.family = '포메';
console.log(dog.family);
console.log(dog['family'])

--결과--

포메
포메

2.속성삭제

delete dog.height; //or delte dog['height']
console.log(dog['height']);

--결과--

undefined

3.동적 속성접근

function getValue(obj, key){
    // 원래 강아지의 이름을 얻고싶을땐
    // dog.name 이렇게 썻는데
    return obj[key];
}
console.log(getValue(dog, 'name'));

--결과--

루시

4.필드추가

// addKey
// obj, 필드명, 값
function addKey(obj,field,value){
    obj[field] = value;}
addKey(dog,'height',0.7)
console.log(dog);

--결과--

{ name: '루시', age: 13, 'dog-weight': 3.5, family: '포메', height: 0.7 }

5.필드제거

// deleteKey
// obj, 지울키
function deleteKey(obj,field){
    delete obj[field]}

deleteKey(dog, 'height');
console.log(dog);

--결과--

{ name: '루시', age: 13, 'dog-weight': 3.5, family: '포메' }

 

| 객체를 만드는 템플릿 - 생성자 함수

1. 생성자 함수
2. 클래스
- static: 정적 프로퍼티 및 메소드

**객체생성**
변수를 중괄호 안에넣으면 객체가된다!

const x = 0;
const y = 0;
//const coord = {x: x, y: y};  //이렇게 적는것과
const coord = {x,y} 		//이렇게 적는것은 
console.log(coord)				//결과값이 같게 나옴

--결과--

{ x: 0, y: 0 }

1.객체 생성 함수

function makeObj(name, age){
    return{
        name, age
    };
}
console.log(makeObj('apple',20));

--결과--

{ name: 'apple', age: 20 }

const apple = {
    name : 'apple',
    display: function(){
        console.log(`${this.name}: 🍎`);
    }
}

const orange = {
    name : 'orange',
    display: function(){
        console.log(`${this.name}: 🍊`);
    }
}

이것들은 그냥 인스턴스겸 객체다. 객체생성하고 그런게 안됨

console.log(apple);
apple.display();
console.log(orange);
orange.display();

--결과--

{ name: 'apple', display: [Function: display] }
apple: 🍎
{ name: 'orange', display: [Function: display] }
orange: 🍊

2. 생성자를 이용한 객체 생성 탬플릿

function Fruit(name, emoji){
    this.name = name;
    this.emoji = emoji;
    this.display = () => {
        console.log(`${this.name}: ${this.emoji}`);
    }
    // return this; // 생략가능 
}

const apple2 = new Fruit('apple','🍎');
const orange2 = new Fruit('orange2','🍊');

console.log(apple2);
apple2.display();
console.log(orange2);
orange2.display();

--결과--

Fruit { name: 'apple', emoji: '🍎', display: [Function (anonymous)] }
apple: 🍎
Fruit { name: 'orange2', emoji: '🍊', display: [Function (anonymous)] }
orange2: 🍊

 

| 객체를 만드는 템플릿 - 클래스

1. 생성자 함수
2. 클래스
- static: 정적 프로퍼티 및 메소드

class Fruit {
    // eng = noname;
    static count_fruits = 0;
    constructor(name, emoji){
        this.name = name;
        this.emoji = emoji;
    }
    display = () => {
        console.log(`${this.name}: ${this.emoji}`);
    };

    // static makeBanana(){
    //     return 'banana'
    // }

    static makeBanana(){
        // 클래스레벨 메서드에서는 this를 참조할 수 없음
        return new Fruit('banana','🍌');
    }
}
// apple은 Fruit 클래스의 인스턴스
const apple = new Fruit('apple','🍎');
// orange는 Fruit 클래스의 인스턴스
const orange = new Fruit('orange','🍊');

console.log(apple);
console.log(orange);
console.log(apple.name);
console.log(apple.emoji);
apple.display();

//
const banana = Fruit.makeBanana();
console.log(Fruit.makeBanana())
console.log(banana)
console.log(Fruit.count_fruits)

--결과--

Fruit { display: [Function: display], name: 'apple', emoji: '🍎' }
Fruit { display: [Function: display], name: 'orange', emoji: '🍊' }
apple
🍎
apple: 🍎
Fruit { display: [Function: display], name: 'banana', emoji: '🍌' }
Fruit { display: [Function: display], name: 'banana', emoji: '🍌' }
0

 

class Dog {
    #name;   //private변수가됨
    #color;  //

    constructor(name, color){
        this.#name = name;
        this.#color = color;
    }
    get info() {   //게터함수
        return `이름:${this.#name}, 색상:${this.color}`;
    }
    set info(value){
        console.log('set',value);
        this.#name = value;
    }
    run = () => {
        console.log(`${this.#color} 색상의 길이가 ${this.#name}는 달립니다`);
    }
    #eat = () => {
        console.log(`${this.#name}는 먹습니다`)
    }
}
const Rucy = new Dog('루시','white');
console.log(Rucy);
// Rucy.#name = '개똥이'; //#field는 외부에서 접근이 불가능함
console.log(Rucy)
Rucy.run();
//Rucy.eat();
// console.log(Rucy.info());
console.log(Rucy.name);
//console.log(Rucy.info)
console.log(Rucy.info); //get
Rucy.info = '뽀미';     //set
console.log(Rucy.info); //get

--결과--

Dog { run: [Function: run] }
Dog { run: [Function: run] }
white 색상의 길이가 루시는 달립니다
undefined
이름:루시, 색상:undefined
set 뽀미
이름:뽀미, 색상:undefined

 

| 상속

class Animal{
    constructor(color){
        this.color = color;
    }
    eat(){
        console.log('eating');
    }
    sleep() {
        console.log('sleeping');
    }
}

class Dog extends Animal{
    play(){
        console.log('playing')
    }
}

class Cat extends Animal{
    constructor(color, name){
        super(color);
        this.name = name;
    }
    // 오버라이딩
    eat() {
        console.log('good eating')
    }
}

const Rucy = new Dog('white');
console.log(Rucy);
Rucy.eat();
Rucy.sleep();
Rucy.play();

const PPory = new Cat('black','뽀리');
console.log(PPory);
PPory.eat();

--결과--

Dog { color: 'white' }
eating
sleeping
playing
Cat { color: 'black', name: '뽀리' }
good eating

문제)월급구하기

class Employee{
    constructor(name, department, hoursPerMonth, payRate){
        this.name = name;
        this.department = department;
        this.hoursPerMonth = hoursPerMonth;
        this.payRate = payRate;
    }
    calculatePay(){
        return this.hoursPerMonth * this.payRate;
    }
}
class FullTimeEmployee extends Employee{
    static PAY_RATE = 20000;
    constructor(name,department,hoursPerMonth){
        super(name, department, hoursPerMonth, FullTimeEmployee.PAY_RATE);
    }
}
class PartTimeEmployee extends Employee{ 
    static PAY_RATE = 10000;
    constructor(name,department,hoursPerMonth){
        super(name, department, hoursPerMonth, PartTimeEmployee.PAY_RATE);
    }
}
const Kim = new FullTimeEmployee('김사과','개발자',160);
const Ban = new PartTimeEmployee('반하나','디자이너',100)

console.log(Kim.calculatePay());
console.log(Ban.calculatePay());

--결과--

3200000
1000000

 

| 래퍼객체

1.원시타입에서 .(점) 찍는순간 래퍼객체로 변신

const num = 10; // number 원시 타입
console.log(num); // 10
//console.log(num.); // 점찍는 순간 래퍼객체로 변신하면서 메소드들을 사용할수있는 객체로 변함
console.log(num.toString());  //num object
console.log(num); //다시 number원시타입으로 돌아오게된다

두번째줄 결과값 10이 색깔이 다른것을 알수있다.. 래퍼객체가 된것ㅇ,ㅇ

2.지수 표기법(10의 n승으로 표기)

const num2 = 1002;
console.log(num2.toExponential())

--결과--

1.002e+3

3.반올림하여 문자열로 변환

const num3 = 1234.12;
console.log(num3.toFixed());

--결과--

1234

4. 로컬형식의 문자형으로 변환

console.log(num3.toLocaleString('ar-EG'));//아랍형식

--결과--

١٬٢٣٤٫١٢

5. 문자 코딩/ 디코딩

const URL = 'https://코리아아이티아카데미.com';
const encoded = encodeURI(URL);
console.log(encoded);

const decoded = decodeURI(encoded);
console.log(decoded);

const part = '코리아아이티아카데미.com';
console.log(encodeURIComponent(part));

--결과--

https://%EC%BD%94%EB%A6%AC%EC%95%84%EC%95%84%EC%9D%B4%ED%8B%B0%EC%95%84%EC%B9%B4%EB%8D%B0%EB%AF%B8.com


https://코리아아이티아카데미.com


%EC%BD%94%EB%A6%AC%EC%95%84%EC%95%84%EC%9D%B4%ED%8B%B0%EC%95%84%EC%B9%B4%EB%8D%B0%EB%AF%B8.com