#2-3. 노드의 자바스크립트와 친해지기

참고 : Do it! Node.js 프로그래밍

http://www.yes24.com/Product/goods/32442876

Do it! Node.js 프로그래밍

 

 

 

 

1. Javascript에서의 함수 선언

// 함수를 정의하는 방법 1
function add(a,b) {
    return a+b;
}

// 함수를 정의하는 방법 2
var add2 = function(a,b) {
    return a+b;
}

 

함수를 변수에 할당할 수 있다. 따라서 함수가 객체 안의 속성으로 들어갈 수도 있다.

var Person = {};
Person['age'] = 39;
Person['name'] = '강동원';
Person.mobile = '010-1111-2222';
Person.add = function(a,b) {
    return a+b;
}

console.log('나이: %d', Person.age);
console.log('이름: %s', Person.name);
console.log('전화번호: %s', Person.mobile);
console.log('더하기: %s', Person.add(10,20));

 

 

 

 

2. 배열의 각 요소에 접근하기 > forEach() 메소드 사용하기

Arrays.forEach(function(item, index) {

    //... 함수 내용

});

var users = [{name:'잔나비', age: 23}, {name:'방탄소년단', age: 28}, {name: '오혁', age:29}];
users.forEach(function(item, index) {
    console.log("배열 요소 #" + index + " : %s" , item.name);
})

 

 

 

 

3. 배열에 값 추가 및 삭제하기 > 배열의 앞에 있는 요소 추가/삭제

일반적으로 배열에 값을 추가/삭제하기 위해서는 .push() 와 .pop() 메소드를 사용했다. 이는 배열의 끝에 요소를 추가하거나 삭제할 때 사용하는 방법이다.

배열의 앞에 있는 요소를 추가/삭제하기 위해서는 .unshift() 와 .shift() 메소드를 사용한다. 사용 방법은 아래와 같다.

 

var users = [{name:'잔나비', age: 23}, {name:'방탄소년단', age: 28}, {name: '오혁', age:29}];
users.forEach(function(item, index) {
    console.log("배열 요소 #" + index + " : %s" , item.name);
})

console.log("******** unshift 사용 후 ***********");
users.unshift({name:'여자친구', age:22});
users.forEach(function(item, index) {
    console.log("배열 요소 #" + index + " : %s" , item.name);
})

console.log("******** shift 사용 후 ***********");
users.shift();
users.forEach(function(item, index) {
    console.log("배열 요소 #" + index + " : %s" , item.name);
})

결과 값

배열 요소 #0 : 잔나비

배열 요소 #1 : 방탄소년단

배열 요소 #2 : 오혁

******** unshift 사용 후 ***********

배열 요소 #0 : 여자친구

배열 요소 #1 : 잔나비

배열 요소 #2 : 방탄소년단

배열 요소 #3 : 오혁

******** shift 사용 후 ***********

배열 요소 #0 : 잔나비

배열 요소 #1 : 방탄소년단

배열 요소 #2 : 오혁

 

 

4. .slice() vs .splice()

실제로 개발을 할 때 자주 헷갈리던 메소드였던 splice와 slice...

 

.splice(처리할 요소 idx, 삭제할 요소의 갯수, 추가할 요소 정보)

여러 개의 객체를 요소로 추가하거나 삭제할 때 splice() 메소드를 사용한다.

var users = [{name:'잔나비', age: 23}, {name:'방탄소년단', age: 28}, {name: '오혁', age:29}];
users.forEach(function(item, index) {
    console.log("배열 요소 #" + index + " : %s" , item.name);
});

console.log("******** splice로 요소 추가 후 ***********");
users.splice(1, 0, {name:'여자친구', age:22});
users.forEach(function(item, index) {
    console.log("배열 요소 #" + index + " : %s" , item.name);
});

console.log("******** splice로 요소 삭제 후 ***********");
users.splice(2,2);  // users[2], users[3] 삭제
users.forEach(function(item, index) {
    console.log("배열 요소 #" + index + " : %s" , item.name);
});

결과 값

배열 요소 #0 : 잔나비

배열 요소 #1 : 방탄소년단

배열 요소 #2 : 오혁

******** splice로 요소 추가 후 ***********

배열 요소 #0 : 잔나비

배열 요소 #1 : 여자친구

배열 요소 #2 : 방탄소년단

배열 요소 #3 : 오혁

******** splice로 요소 삭제 후 ***********

배열 요소 #0 : 잔나비

배열 요소 #1 : 여자친구

 

 

.slice(복사할 요소의 시작 위치, 끝 위치)

배열의 일부 요소를 복사하여 새로운 배열을 만드는 메소드이다. 끝 위치에 해당하는 요소는 복사에 포함되지 않는다.

var users = [{name:'우주소녀', age:20}, {name:'여자친구', age:22}, {name:'잔나비', age: 23}, {name:'방탄소년단', age: 28}, {name: '오혁', age:29}];
users.forEach(function(item, index) {
    console.log("배열 요소 #" + index + " : %s" , item.name);
});

// users[1], users[2] 복사
var user2 = users.slice(1,3);

console.log("******** slice로 새로운 배열 만들기 ***********");
user2.forEach(function(item, index) {
    console.log("배열 요소 #" + index + " : %s" , item.name);
});

결과 값

배열 요소 #0 : 우주소녀

배열 요소 #1 : 여자친구

배열 요소 #2 : 잔나비

배열 요소 #3 : 방탄소년단

배열 요소 #4 : 오혁

******** slice로 새로운 배열 만들기 ***********

배열 요소 #0 : 여자친구

 

 

 

 

 

5. 콜백함수

함수가 실행되는 중간에 호출되어 상태 정보를 전달하거나 결과 값을 처리하는 데 사용된다.

 

(1) 함수를 호출했을 때, 또 다른 함수를 파라미터로 전달하는 방법

// 함수를 호출했을 때, 또 다른 함수를 파라미터로 전달하는 방법
function add(a, b, callback) {
    var result = a+b;
    callback(result);
}

add(10, 10, function(result){
    console.log("파라미터로 전달된 콜백 함수 호출됨.");
    console.log("더하기 (10,10)의 결과 : %d", result);
});

결과 값

파라미터로 전달된 콜백 함수 호출됨.

더하기 (10,10)의 결과 : 20

 

 

(2) 함수 안에서 값을 반환할 때 새로운 함수를 만들어 반환하는 방법

function add(a, b, callback) {
    var result = a+b;
    callback(result);
    
    var history = function() {
        return a + '+' + b + ' = ' + result;
    }
    return history;
}

var add_history = add(10, 10, function(result){
    console.log("파라미터로 전달된 콜백 함수 호출됨.");
    console.log("더하기 (10,10)의 결과 : %d", result);
});

console.log("결과 값으로 받은 함수 실행 결과 : " + add_history());

결과 값

파라미터로 전달된 콜백 함수 호출됨.

더하기 (10,10)의 결과 : 20

결과 값으로 받은 함수 실행 결과 : 10+10 = 20

 

 

(3) closure(클로저)

함수 안에서 새로운 함수를 만들어 반환하는 경우, 예외적으로 변수 접근을 허용한다.

function add(a, b, callback) {
    var result = a+b;
    callback(result);
    
    var count = 0;
    var history = function() {
        console.log("history 메소드 실행 >> count : " + count);
        count++;
        return count + ' : ' + a + '+' + b + ' = ' + result;
    }
    return history;
}

var add_history = add(10, 10, function(result){
    console.log("파라미터로 전달된 콜백 함수 호출됨.");
    console.log("더하기 (10,10)의 결과 : %d", result);
});

console.log("결과 값으로 받은 함수 실행 결과 : " + add_history());
console.log("결과 값으로 받은 함수 실행 결과 : " + add_history());
console.log("결과 값으로 받은 함수 실행 결과 : " + add_history());

결과 값

파라미터로 전달된 콜백 함수 호출됨.

더하기 (10,10)의 결과 : 20

history 메소드 실행 >> count : 0

결과 값으로 받은 함수 실행 결과 : 1 : 10+10 = 20

history 메소드 실행 >> count : 1

결과 값으로 받은 함수 실행 결과 : 2 : 10+10 = 20

history 메소드 실행 >> count : 2

결과 값으로 받은 함수 실행 결과 : 3 : 10+10 = 20

 

 

참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures

클로저

 

 

 

6. 프로토타입 객체

객체에 데이터를 넣어두려는 목적보다, 하나의 틀로 사용하기 위해 만든다.

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.walk = function(speed) {
    console.log(speed + "km 속도로 걸어갑니다.");
}

var p1 = new Person("김민지", 20);
var p2 = new Person("김민우", 21);

console.log(p1.name + ' 객체의 walk(10)을 호출');
p1.walk(10);

결과 값

김민지 객체의 walk(10)을 호출

10km 속도로 걸어갑니다.

 

 

 

// 아래 코드도 Person.prototype.walk 와 같은 역할을 한다.
Person.walk = function(speed) {
    console.log(speed + "km 속도로 걸어갑니다.");
}

객체에 function을 추가해도 되지만, prototype 속성으로 추가하면 인스턴스 객체를 만들 때 메모리를 효율적으로 관리할 수 있다.