3장 노드의 자바스크립트와 친해지기

[자바스크립트의 객체와 함수 이해하기]

- 자바스크립트에서는 자료형을 명시하지 않는다.

- var 키워드를 사용하여 변수를 선언

- 자바스크립트의 자료형

- Boolean : 기본 자료형. True / False

- Number : 기본 자료형. 64비트, 정수나 부동소수 값, NaN / +INF / -INF

- String : 기본 자료형. 문자열

- undefined : 값을 할당하지 않은 변수의 값

- null : 존재하지 않는 값을 가리키는 값

- Object : 객체를 값으로 가짐

- typeof 연산자로 변수의 타입 확인

- parseInt(), parseFloat() : 문자열을 숫자로 변환하는 메소드

var person = {}

person["age"] = 24

person.name = "Presto"

- 함수 정의, 변수에 할당

var add = function(a, b) {

return a + b

}

var multiply = (a, b) => {

return a * b

}

console.log(add(1, 2), multiply(3, 4))

- 객체를 만들면서 속성을 초기화

var person = {

age: 24,

name: "Presto",

add: function(a, b) { return a + b },

multiply: (a, b) => { return a * b }

}

객체 만들 때는 중괄호를 사용

속성 이름과 속성 값은 콜론으로 구분

각각의 속성은 콤마로 구분

[배열 이해하기]

- 대괄호를 이용하여 만듦

- 인덱스로 요소에 접근

- push(object) : 배열 끝에 요소 추가

- pop() : 배열 끝 요소 삭제

- unshift() : 배열 앞에 요소 추가

- shift() : 배열 앞 요소 삭제

- delete 키워드로 특정 인덱스의 배열 요소 삭제, 이 때 배열 공간은 그대로 남아있음 (undefined)

- splice(index, removeCount [,object]) : 여러 개의 객체를 요소로 추가하거나 삭제

- removeCount를 0으로 두고 object 배열에 추가할 객체를 두어 index부터 객체를 추가

- removeCount가 0이 아니면 index부터 명시된 수만큼 요소를 삭제

- slice(start, end) : start부터 end까지의 요소를 복사하여 새로운 객체를 반환

[콜백 함수 이해하기]

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

function add(a, b, callback) {

var result = a + b

callback(result)

}

add(10, 10, function(result) {

console.log(result)

})

function add(a, b, callback) {

var result = a + b

callback(result)

var count = 0

var history = () => {

count++

return count + " " + result

}

return history

}

var addHistory = add(10, 10, (result) => {

console.log(result)

})

console.log(addHistory())

console.log(addHistory())

- addHistory에 add 함수의 실행 결과(history)가 할당됨

- history는 count 값을 캡처, 1씩 늘어나는 효과

- 아래 Swift 코드와 비교해가며 이해하자

func add(a: Int, b: Int, callback: (Int) -> Void) -> (() -> String){

    let result = a + b

    callback(result)

    var count = 0

    let history = { () -> String in

        count += 1

        return "\(count) \(result)"

    }

    return history

}

let addHistory = add(a: 10, b: 10) { (result) in

    print(result)

}

print(addHistory())

print(addHistory())

[프로토타입 객체 만들기]

- 함수를 이용해서 자바스크립트 객체를 만들 수 있는데, 함수도 객체이기 때문이다.

- 객체의 원형을 정의한 후 그 원형에서 새로운 인스턴스 객체를 만들 수 있다.

- 함수 중에서 new 연산자로 호출되는 함수는 객체를 만들기 위한 함수로 분류되며, 이러한 함수를 생성자라고 한다.

- 객체 안에 속성을 만들거나 접근하고 싶다면 this 키워드를 사용한다.

function Person(name, age) {

this.name = name

this.age = age

}

//Person 객체(함수도 객체)는 name과 age 속성을 가짐

Person.prototype.walk = function(speed) {

console.log(speed)

}

//Person 객체는 원형 틀일 뿐이므로 prototype 속성을 사용하여 속성을 추가

var person1 = new Person("Presto", 24)

var person2 = new Person("yoohan95", 24)

console.log(person1.name)

person1.walk(20)

- 위의 코드에서 새로운 인스턴스 객체들을 만들도록 정의한 Person 객체를 프로토타입 객체라고 부르며, 일반적인 함수와 구분해야 한다.