node.js

node.js는 JavaScript 런타임 환경으로 서버 애플리케이션을 개발하는데 주로 사용됨

설치

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

함수

function sum(num1, num2){
    console.log('sum() 호출!');
    return num1 + num2;
}

const result = sum(10, 20);
console.log(result)

console.log('---------------')

// 함수의 메모리 주소 전달하는 방법
const add = sum;
console.log(sum(10, 3));
console.log(add(10, 3));

console.log('---------------')

// 함수 작성팁
// 조건식이 있을 때 조건을 만족하지 않은 경우를 함수 도입부분에서 모두 처리 후 함수를 미리 종료
function print(num){
    if(num < 0) return
    console.log(num)
}

print(10)
print(-5)
console.log('---------------')


// 매개변수의 기본값은 무조건 undefined
// arguments: 함수의 전달된 인수에 해당하는 값을 array 형태의 객체로 반환
function total(num1, num2){
    console.log(num1)
    console.log(num2)
    console.log('arguments: ', arguments)
    console.log('arguments[0]: ', arguments[0])
    console.log('arguments[1]: ', arguments[1])
    return num1 + num2
}

console.log(total())
console.log(total(10, 3))
console.log('---------------')

// 콜백함수 활용
const calc_add = (a, b) => a + b;
const calc_multiply = (a, b) => a * b;
console.log(calc_add(10, 3))
console.log(calc_multiply(10, 3))

function calculater(num1, num2, action){
    if(num1 < 0 || num2 < 0) return;

    const result = action(num1, num2)
}

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

console.log('---------------')

오브젝트


const Rucy = {
    name: '루시',
    age: 14,
    'weight': 3.5,
    ['height']: 0.7,
    ['owner-name']: '김사과'
}

console.log(Rucy.name)
console.log(Rucy.weight)
console.log(Rucy.height)
console.log(Rucy['owner-name'])

Rucy.family = '포메라니안'
console.log(Rucy.family)
console.log(Rucy['family'])

console.log(Rucy)

delete Rucy['owner-name']
console.log(Rucy['owner-name'])
console.log(Rucy)

console.log('---------------')

// 동적으로 프로퍼티에 접근하는 함수
function print(object, pro){
    return object[pro]
}
console.log(print(Rucy, 'name'))

// 동적으로 요소를 추가하는 함수
function add(object, pro, data){
    object[pro] = data
    console.log(object[pro], '추가완료')
}

add(Rucy, 'owner-name', '포메라니안')

// 동적으로 요소를 삭제하는 함수
function del(object, pro){
    delete object[pro]
    console.log('삭제완료')
}

del(Rucy, 'owner-name')

console.log(Rucy)

console.log('-------------')

// 객체 생성 함수 만들기

// 좌표 객체 만들기
const x = 0;
const y = 0;
const coord = {x, y}
console.log(coord)
console.log('-------------')
// 이름, 나이를 전달하여 객체로 만들어주는 함수 만들기
function makeObj(name, age){
    return {name, age};
}

console.log(makeObj('김사과', 20))

// 리터럴 표기법으로 객체 만들기
const apple = {
    name: '김사과',
    display: function(){
        console.log(`${this.name}: 🍎`);
    }
}

const banana = {
    name: '반하나',
    display: function(){
        console.log(`${this.name}: 🍌`);
    }
}

console.log(apple)
apple.display()
console.log(banana)
console.log('-------------')
// Fruit 생성자를 만들고 위 결과와 같은 동일한 결과를 출력하는 객체를 만들어보자
// Fruit(name, emoji)
// const apple = new Fruit('apple', '🍎')
// console.log(apple)
// apple.dispaly();

// function Fruit(name, emoji){
//     return {name, display: function(){console.log(`${this.name}: ${emoji}`)}}
// }

function Fruit1(name, emoji){
    this.name = name;
    this.emoji = emoji;
    this.display = () => {
        console.log(`${this.name}: ${this.emoji}`);
    }
}

const apple2 = new Fruit1('apple', '🍎')
console.log(apple2)
apple2.display()
const banana2 = new Fruit1('banana', '🍌')
console.log(banana2)
banana2.display()

// const melon = new Fruit('melon', '🍈');
// console.log(melon)
// melon.display()

출력

루시
3.5
0.7
김사과
포메라니안
포메라니안
{
  name: '루시',
  age: 14,
  weight: 3.5,
  height: 0.7,
  'owner-name': '김사과',
  family: '포메라니안'
}
undefined
{ name: '루시', age: 14, weight: 3.5, height: 0.7, family: '포메라니안' }
---------------
루시
포메라니안 추가완료
삭제완료
{ name: '루시', age: 14, weight: 3.5, height: 0.7, family: '포메라니안' }
-------------
{ x: 0, y: 0 }
-------------
{ name: '김사과', age: 20 }
{ name: '김사과', display: [Function: display] }
김사과: 🍎
{ name: '반하나', display: [Function: display] }
-------------
Fruit1 { name: 'apple', emoji: '🍎', display: [Function (anonymous)] }
apple: 🍎
Fruit1 { name: 'banana', emoji: '🍌', display: [Function (anonymous)] }
banana: 🍌

클레스

class Fruit {
    // sttic
    // 정적 프러퍼티 및 메서드를 생성
    // 클래스 레벨 메소드에서는 this를 참조할 수 없음
    static count_fruits = 10;

    static makeBanana(){
        return new Fruit('banana', '🍌');
    }

    constructor(name, emoji){
        this.name = name
        this.emoji = emoji
    }

    display = () => {
        console.log(`${this.name}: ${this.emoji}`)
    }
}

const apple = new Fruit('apple', '🍎')
console.log(apple)
apple.display()

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

console.log('---------------------')
// 객체지향 프로그래밍의 은닉성
// private

class Dog {
    #name; // private
    #color;
    constructor(name, color){
        this.#name = name;
        this.#color = color;
    }

    // 프러퍼티명과 setter 프러퍼티 메서드의 이름은 일치할 필요없음
    set name(value){
        console.log('set', value);
        this.#name = value
    }

    get name(){
        return this.#name
    }

    set color(value){
        console.log('set', value);
        this.#color = value
    }

    get color(){
        return this.#color
    }

    run = () => {
        console.log(`${this.#color} 색상의 강아지 ${this.#name} 달립니다`)
    }

    #eat = () => {
        console.log(`${this.#name} 사료를 먹습니다`)
    }

    myEat = () => {
        this.#eat();
    }
}

const Rucy = new Dog('루시', '흰색')
console.log(Rucy)
console.log(Rucy.name)

// set 프러퍼티가 실행
Rucy.name = '뽀미'
// get 프러퍼티가 실행
console.log(Rucy.name)

Rucy.run()

console.log('---------------------')

/*
문제

카운터 만들기
카운터를 0으로 값을 초기화 한 뒤 하나씩 값이 증가하는 메서드를 구현한 클래스를 만들어보자.
단, 객체 생성시 값이 0보다 작을 경우 0으로 초기화를 시키고 그 외의 값은 입력한 값으로 설정,
또한 프러퍼티에 값을 직접 불러오거나 설정할 수 없음

    const cnt = new Counter(0);
    cnt.increment();    // 1
    cnt.increment();    // 2
*/

class Counter {
    #num
    constructor(num){
        if(isNan(num) || num < 0)num = 0;
        
        this.#num = num;
    }

    set num(value){
        console.log('set', value);
        this.#num = value;
    }

    get num(){
        return this.#num;
    }

    increment(){
        this.#num++;
        console.log(`${this.#num}`);
    }

}

const cnt = new Counter(10);
cnt.increment()
cnt.increment()
cnt.increment()
cnt.increment()

cnt.num = 20
cnt.increment()
cnt.increment()
cnt.increment()

console.log(cnt.num)

const cnt2 = new Counter(-1);
cnt2.increment()
cnt2.increment()
cnt2.increment()
cnt2.increment()
cnt2.increment()

출력

Inherit

class Animal {
    constructor(color){
        this.color = color
    }

    eat() {
        console.log('먹습니다!')
    }

    sleep() {
        console.log('잡니다!')
    }
}

class Dog extends Animal {
    constructor(color){
        super(color)
    }

    play() {
        console.log('놉니다!')
    }

    // 오버라이딩
    eat() {
        console.log('맛있게 먹습니다!')
    }
}

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


console.log('----------')
/*
문제

정직원, 아르바이트생을 나타낼 수 있는 클래스를 설계
부모 클래스: Employee
자식 클래스: FullTimeEmployee, PartTimeEmployee
직원의 정보: 이름, 부서명, 한달 근무 시간
급여: 정직원(일 200,000원), 아르바이트(일 100,000원)
매달 직원들의 정보를 이용해서 한달 급여를 계산하는 메서드를 구현(calculatepay)
한달의 근무일수는 21일로 함

    const kim = new FullTimeEmployee('김사과', '개발팀');
    const ban = new PartTimeEmployee('반하나', 'QA팀');
    console.log(kim.calculatepay())
    console.log(ban.calculatepay())
*/

class Employee{
    static dayssPerMonth = 21;
    constructor(name, department, payRate){
        this.name = name;
        this.department = department;
        this.payRate = payRate;

    }

    calculatepay(){
        return this.payRate * Employee.dayssPerMonth;

    }

}

class FullTimeEmployee extends Employee {
    static PAY_RATE = 200000;
    constructor(name, department){
        super(name, department, FullTimeEmployee.PAY_RATE);
        
    }
}

class PartTimeEmployee extends Employee {
    static PAY_RATE = 100000;
    constructor(name, department){
        super(name, department, PartTimeEmployee.PAY_RATE);

    }
}

const kim = new FullTimeEmployee('김사과', '개발팀')
const ban = new PartTimeEmployee('반하나', 'QA팀');
console.log(kim.calculatepay());
console.log(ban.calculatepay());

이터레이터(Iterator)

next() 메서드를 구현하는 객체
next() 메서드는 현재 요소를 반환하고 다음요소로 이동
이터레이터는 이터러블 객체의 요소를 반복하는데 사용

const arr = [1, 2, 3, 4, 5];
console.log(arr.values());
console.log(arr.entries())
console.log(arr.keys());

const iterator = arr.values();

while(true){
    const item = iterator.next();
    if(item.done) break;
    console.log(item.value);
}

for(let item of arr){
    console.log(item);

}

이터러블(Iterable)

이터러블은 [Symbol.iterator] 메서드를 구현하는 객체
[Symbol.iterator] 메서드는 이터레이터를 반환하는 메서드
이터러블 객체는 for..of 루프나 배열 같은 반복 가능한 객체를 사용하는 문맥에서 반복될 수 있음

function iterable(){
    let index = 0;
    let data = [1, 2, 3, 4];

    return {
        next(){
            if(index < data.length){
                return { value:data[index++], done:false};
            }else{
                return { value:undefined, done:true};
            }
        }
    }
}

let i = iterable();
console.log(i.next());
console.log(i.next());
console.log(i.next());
console.log(i.next());
console.log(i.next());
console.log(i.next());

스프레드(Spread) 연산자

전개구문이라고 함
모든 Iterable은 Spread가 될 수 있음
순회가능한 데이터는 펼쳐 질 수 있음

// 원시값과 객체값의 비교
// 원시값: 값에 의한 복사가 일어남
// 객체값: 참조에 의한 복사(메모리 주소)

function display(num){
    num = 10;
    console.log(num);

}

const value = 5;
display(value);
console.log(value);


function displayObj(obj){
    obj.age = 14;
    console.log(obj);

}

const Rucy = {name:'루시', age:10};
displayObj(Rucy);



function add(num1, num2, num3){
    return num1 + num2, num3;
}


const nums = [10, 20, 30];
console.log(add(nums[0], nums[1], nums[2]));

console.log(add(...nums))

console.log('---------------------');

const fruits1 = ['🍎', '🍉'];
const fruits2 = ['🍌', '🍓'];
let arr = fruits1.concat(fruits2);
console.log(arr);
arr = [...fruits1, ...fruits2];
console.log(arr)

console.log('---------------------');

const apple = {name:'김사과', age:20, address: {si:'서울시', gu:'서초구', dong:'양재동'}};
console.log(apple);
const new_apple = { ...apple, job: '프로그래머'};
console.log(apple)
console.log(new_apple)

function display({name, age, address, job}){
    console.log('이름', name)
    console.log('나이', age)
    console.log('주소', address)
    console.log('직업', job)
}

display(new_apple)

console.log('--------------')

const {name, age, pet='루시', address, job:hobby} = new_apple;
console.log(name)
console.log(age)
console.log(pet)
console.log(address)
console.log(hobby)

console.log('--------------')

const component = {
    name: 'Button',
    styles: {
        size: 20,
        color: 'black'
    }
};


function changeColor({styles: {color}}){
    console.log(color);
}

changeColor(component)

출력

이름 undefined
나이 undefined
주소 undefined
직업 undefined
5
{ name: '루시', age: 14 }
30
30
---------------------
[ '🍎', '🍉', '🍌', '🍓' ]
[ '🍎', '🍉', '🍌', '🍓' ]
---------------------
{
  name: '김사과',
  age: 20,
  address: { si: '서울시', gu: '서초구', dong: '양재동' }
}
{
  name: '김사과',
  age: 20,
  address: { si: '서울시', gu: '서초구', dong: '양재동' }
}
{
  name: '김사과',
  age: 20,
  address: { si: '서울시', gu: '서초구', dong: '양재동' },
  job: '프로그래머'
}
이름 김사과
나이 20
주소 { si: '서울시', gu: '서초구', dong: '양재동' }
직업 프로그래머
--------------
김사과
20
루시
{ si: '서울시', gu: '서초구', dong: '양재동' }
프로그래머
--------------
black

[Done] exited with code=0 in 0.047 seconds

'코딩 > Web' 카테고리의 다른 글

node.js 버퍼 스트림 파이프 Express프레임워크 (1)	2024.04.26
node.js 동기, 비동기 (0)	2024.04.26
자바스크립트 정규 표현식, 이벤트 (0)	2024.04.18
자바스크립트 객체 (0)	2024.04.17
자바스크립트 함수 (1)	2024.04.16

개발일지

node.js

node.js

설치

함수

오브젝트

클레스

Inherit

이터레이터(Iterator)

이터러블(Iterable)

스프레드(Spread) 연산자

'코딩 > Web' 카테고리의 다른 글

티스토리툴바

node.js

node.js

설치

함수

오브젝트

클레스

Inherit

이터레이터(Iterator)

이터러블(Iterable)

스프레드(Spread) 연산자

'코딩 > Web' 카테고리의 다른 글

관련글

티스토리툴바