콜백 함수는 다른 코드의 인자로 넘겨 주는 함수입니다. 어떤 함수 X를 호출하면서 인자로 콜백 함수 Y를 넘겨 주었다고 하면, 함수 X는 특정 조건일 때 Y를 호출하게 됩니다. 이처럼 콜백 함수는 다른 코드에게 인자로 넘겨줌으로써 그 제어권을 함께 위임한 함수입니다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행합니다.

콜백 함수는 함수다

콜백 함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 함수로서 호출됩니다.

var obj = {
    vals: [1, 2, 3],
        logValues: function(v, i) {
        console.log(this, v, i);
        }
};

// (1)
obj.logValues(1, 2); // { vals: 1, 2, 3], logValues: f} 1 2
// (2)
[4, 5, 6].forEach(obj.logValues); // Window { ... } 4 0

(1)번의 경우 logValues 메서드의 이름 앞에 점이 있으니 메서드로서 호출했습니다.

(2)번의 경우 obj를 this로 하는 메서드를 그대로 전달한 것이 아니라, obj.logValues가 가리키는 함수만 전달했습니다. 이 함수는 메서드로서 호출할 때가 아닌 한 obj와의 직접적인 연관이 없어집니다. 따라서 this는 다른 콜백 함수들과 같이 전역 객체를 바라보게 됩니다.

콜백 지옥과 비동기 제어

동기적인 코드는 현재 실행 중인 코드가 완료된 후에야 다음 코드를 실행하는 방식입니다.

반대로 비동기적인 코드는 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어갑니다.

사용자의 요청에 의해 특정 시간이 경과되기 전까지 어떤 함수의 실행을 보류한다거나(setTimeout), 사용자의 직접적인 개입이 있을 때 비로소 어떤 함수를 실행하도록 대기한다거나(addEventListener), 웹브라우저 자체가 아닌 별도의 대상에 무언가를 요청하고 그에 대한 응답이 왔을 때 비로소 어떤 함수를 실행하도록 대기하는 등(XMLHttpRequest),

별도의 요청, 실행 대기, 보류 등과 관련된 코드는 비동기적인 코드입니다.

콜백 지옥은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상으로, 자바스크립트에서 흔히 발생하는 문제입니다.

자바스크립트 진영은 비동기적인 일련의 작업을 동기적으로, 혹은 동기적인 것처럼 보이게끔 처리해 주는 장치를 마련하고자 끊임없이 노력했습니다.

1. Promise

new 연산과 함께 호출한 Promise 객체의 인자로 넘겨 주는 콜백 함수는 호출할 때 바로 실행되지만, 그 내부에 resolve 또는 reject 함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행되기 전까지는 then 또는 catch 구문으로 넘어가지 않습니다.

2. Generator

*이 붙은 Generator 함수를 사용할 수 있습니다. Generator 함수를 실행하면 Iterator가 반환되는데, Iterator는 next라는 메서드를 가지고 있습니다. 이 next 메서드를 호출하면 Generator 함수 내부에서 가장 먼저 등장하는 yield에서 함수의 실행을 멈춥니다. 그러니까 비동기 작업이 완료되는 시점마다 next 메서드를 호출해 준다면 Generator 함수 내부의 소스가 위에서부터 아래로 순차적으로 진행될 것입니다.

3. async / await

비동기 작업을 수행하고자 하는 함수 앞에 async를 표기하고 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await를 표기하는 것만으로도 뒤의 내용을 Promise로 자동 전환하고, 해당 내용이 resolve 된 이후에야 다음으로 진행합니다.

export const test1 = async() => {
    let value = await 1
    console.log(value) // 1
    value = await Promise.resolve(1)
    console.log(value) // 1
}

export async function test() {
    let value = await 'hello'
    console.log(value) // hello
    value = await Promise.resolve('hello')
    console.log(value) //hello
}

// anync 함수를 일반 함수처럼 사용한 예
// 두 함수가 마치 동시에 실행된 것처럼 보인다.
test1()
test2() // 실행 결과 1 \ hello \ 1 \ hello

// async함수를 Promise 객체로 사용한 예
test1()
    .then(() => test2()) // 실행 결과 1 \ 1 \ hello \ hello

1 콜백 함수란? 콜백함수

다른 코드의 인자로 넘겨주는 함수 콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행함 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행함 callback

'되돌아 호출해달라'는 명령 어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 나에게 알려달라'는 요청을 함께 보냄 함수 X 입장에서는 해당 조건이 갖춰졌는지 여부를 스스로 판단하고 Y를 직접 호출 → 그럼 Y가 콜백 함수인 건가? 2 제어권 2-1 호출 시점 더보기 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가짐

2-2 인자 map 메서드

첫 번째 인자: callback 함수를 받음 생략 가능한 두 번째 인자: 콜백 함수 내부에서 this로 인식할 대상 특정이 가능 map의 callback 함수 인자

첫 번째 인자: 배열의 요소 중 현재값 두 번째 인자: 현재값의 인덱스 세 번째 인자: map 메서드의 대상이 되는 배열 자체 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지에 대한 제어권을 가짐

2-3 this 이해가 잘 안됨 ㅜ

3 콜백 함수는 함수다 콜백 함수는 함수다. 콜백 함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 함수로서 호출된다.

** 메서드 : 객체의 속성값으로 담겨진 함수

어떤 함수의 인자에 객체의 메서드를 전달하더라도 이는 결국 메서드가 아닌 함수일 뿐이다.

접기 var obj = { vals: [1, 2, 3], logValues: function(v, i){ console.log(this, v, i); } }; obj.logValues(1, 2); // {vals: [1, 2, 3], logValues: f} 1 2 [4, 5, 6].forEach(obj.logValues); // Window {...} 4 0 // Window {...} 5 1 // Window {...} 6 2 logValues 메서드를 forEach 함수의 콜백 함수로서 전달함.

obj를 this로 하는 메서드를 그대로 전달한 것이 아니라, obj.logValues가 가리키는 함수만 전달한 것이다.

--> 메서드로서 호출할 때가 아닌 한 obj와 직접적인 연관이 없어진다.

4 콜백 함수 내부의 this에 다른 값 바인딩하기 객체의 메서드를 콜백 함수로 전달하면 해당 객체를 this로 바라볼 수 없게 된다.

그럼에도 콜백 함수 내부에서 this가 객체를 바라보게 하고 싶은 경우, 전통적으로 this를 다른 변수에 담아 콜백 함수로 활용할 함수에서는 this 대신 그 변수를 사용하게 하고, 이를 클로저로 만드는 방식이 많이 쓰임

위 방식에는 아쉬움이 있기 때문에, ES5의 bind 메서드를 이용하면 된다.

5 콜백 지옥과 비동기 제어 콜백 지옥: 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상

동기: 현재 실행 중인 코드가 완료된 후에야 다음 코드를 실행하는 방식

비동기: 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어감

사용자의 요청에 의해 특정 시간이 경과되기 전까지 어떤 함수의 실행을 보류한다거나(setTimeout), 사용자의 직접적인 개입이 있을 때 비로소 어떤 함수를 실행하도록 대기한다거나(addEventListener), 웹브라우저 자체가 아닌 별도의 대상에 무언가를 요청하고 그에 대한 응답이 왔을 때 비로소 어떤 함수를 실행하도록 대기하는 등(XMLHttpRequest), 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 비동기적인 코드이다.

현대 자바스크립트는 웹 복잡도가 높아진 만큼 비동기적인 코드의 비중이 예전보다 훨씬 높아진 상황으로, 콜백 지옥에 빠지기도 훨씬 쉬워졌다.

콜백 지옥 해결 방법

익명의 콜백 함수들을 모두 기명 함수로 전환 ES6의 Promise, Generator ES2017의 async/await 비동기 작업을 수행하고자 하는 함수 앞에 async를 표기하고, 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await를 표기 뒤 내용을 Promise로 자동 전환하고, 해당 내용이 resolve된 이후에야 다음으로 진행 → Promise의 then과 흡사

⭐️ 정리 ⭐️

• 콜백 함수는 다른 코드에 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다.

• 제어권을 넘겨받은 코드는 다음과 같은 제어권을 가진다. 1) 콜백 함수를 호출하는 시점을 스스로 판단하여 실행 2) 콜백 함수를 호출할 때 인자로 넘겨줄 값들 및 그 순서가 정해져 있다. 이 순서를 따르지 않고 코드를 작성하면 엉뚱한 결과를 얻게 됨 3) 콜백 함수의 this가 무엇을 바라보도록 할지 정하지 않은 경우에는 전역객체를 바라봄. 사용자 임의로 this를 바꾸고 싶을 경우 bind 메서드를 활용하면 됨

• 어떤 함수에 인자로 메서드를 전달하도라도 이는 결국 함수로서 실행된다.

• 비동기 제어를 위해 콜백 함수를 사용하다 보면 콜백 지옥에 빠지기 쉽다. 이를 해결하기 위해 Promise, Generator, async/await 등의 방법들을 활용한다.

콜백 함수와 비동기 제어

콜백 함수 콜백 함수는 다른 코드에 전달되어 나중에 호출되는 함수 이를 통해 제어권을 전달하며, 다른 코드에서 특정 조건이 충족되었을 때 콜백 함수를 실행

콜백 함수의 특징: 다른 코드에 인자로 전달되어 제어권을 위임하는 함수 호출 시점, 전달되는 인자, 그리고 내부의 this 값은 호출하는 코드에 의해 결정

콜백 함수는 함수이다: 객체의 메서드를 전달하더라도 해당 메서드는 함수로서 호출됩니다.

var obj = {
    vals: [1, 2, 3],
    logValues: function(v, i) {
        console.log(this, v, i);
    }
};

obj.logValues(1, 2);  // {vals: [1, 2, 3], logValues: f} 1 2
[4, 5, 6].forEach(obj.logValues);  // Window {...} 4 0 / Window {...} 5 1 / Window {...} 6 2

객체의 메서드를 콜백 함수로 전달할 때, 메서드 자체가 아닌 함수만 전달되어 this가 변경됩니다.

콜백 함수 내부의 this에 다른 값 바인딩하기:

객체의 메서드를 콜백 함수로 전달할 때 this가 변경되어 문제가 발생할 수 있습니다. 이를 해결하기 위해 bind 메서드를 사용하거나, 클로저를 통해 this를 다른 변수에 담아 활용할 수 있습니다.

콜백 함수의 인자: 콜백 함수에 전달되는 인자는 호출하는 코드에 따라 결정됩니다. 예를 들어 forEach 메서드의 경우 첫 번째 인자로는 배열의 각 요소, 두 번째 인자로는 현재 요소의 인덱스, 세 번째 인자로는 배열 자체가 전달됩니다.

콜백 지옥과 비동기 제어 콜백 지옥은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 깊어져 가독성이 떨어지는 상황을 나타냅니다. 이는 주로 비동기 작업을 다룰 때 발생하며, 다음과 같은 방법으로 해결할 수 있습니다.

익명 함수를 기명 함수로 전환: 코드의 가독성을 높이기 위해 익명 함수를 기명 함수로 전환합니다.

Promise: promise의 ㄴ인자로 넘겨주는 콜백 함수는 호출할 때 바로 실행되지만 그 내부에 resolve, reject함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행되기 전까지는 다음 또는 오류 구문으로 넘어가지 않는다. 따라서 비동기 작업이 완료될 때 비로소 resolve Ehsms reject를 호출하는 방법으로 비동기 작업의 동기적 표현이 가능함

Promise는 비동기 작업을 조금 더 효과적으로 다룰 수 있도록 해줍니다. 콜백 지옥의 문제를 완화하고 코드를 더 간결하게 작성할 수 있습니다.

Generator: Generator 함수를 활용하여 비동기 작업을 동기적으로 보이도록 만들 수 있습니다.

async/await: async 함수를 사용하여 비동기 작업을 수행하고, await를 통해 작업의 완료를 기다릴 수 있습니다. 코드를 동기적으로 작성할 수 있는 장점이 있습니다.

정리 콜백 함수는 제어권을 다른 코드에게 전달하는 함수로, 호출 시점과 인자는 호출하는 코드에 의해 결정됩니다. 콜백 함수로 전달된 메서드는 함수로 호출되며, this 값이 변경될 수 있습니다. bind 메서드나 클로저를 활용하여 콜백 함수 내부의 this에 다른 값이 바인딩될 수 있습니다. 콜백 지옥은 비동기 작업을 다룰 때 발생하는 들여쓰기 수준이 깊어져 가독성이 떨어지는 문제를 나타냅니다. 해결 방법으로는 익명 함수를 기명 함수로 전환하거나, Promise, Generator, async/await를 활용할 수 있습니다.

콜백 함수와 비동기 제어

콜백 함수란? 콜백 함수는 다른 코드에 전달되어, 나중에 호출되는 함수를 말합니다. 이를 통해 제어권을 전달하며, 특정 조건이 충족되었을 때 콜백 함수를 실행할 수 있습니다.

var obj = {
    vals: [1, 2, 3],
    logValues: function(v, i) {
        console.log(this, v, i);
    }
};

obj.logValues(1, 2);  // {vals: [1, 2, 3], logValues: f} 1 2
[4, 5, 6].forEach(obj.logValues);  // Window {...} 4 0 / Window {...} 5 1 / Window {...} 6 2

이런 식으로 객체의 메서드를 콜백 함수로 전달할 때, 메서드 자체가 아닌 함수만 전달되어 this가 변경될 수 있습니다.

콜백 함수 내부의 this에 다른 값 바인딩하기 그런데, 객체의 메서드를 콜백 함수로 전달할 때 this가 변경되어 문제가 발생할 수 있습니다. 이를 해결하기 위해서는 bind 메서드를 사용하거나, 클로저를 통해 this를 다른 변수에 담아 활용할 수 있습니다.

콜백 함수의 인자 콜백 함수에 전달되는 인자는 호출하는 코드에 따라 결정됩니다. map 메서드의 경우 첫 번째 인자로 배열의 각 요소, 두 번째 인자로 현재 요소의 인덱스, 세 번째 인자로 배열 자체가 전달됩니다.

var numbers = [1, 2, 3, 4, 5];

var squared = numbers.map(function(num, index, array) {
    console.log(num, index, array);
    return num * num;
});

// 콜백 함수에 전달되는 인자 출력 및 결과
// 1 0 [1, 2, 3, 4, 5]
// 2 1 [1, 2, 3, 4, 5]
// 3 2 [1, 2, 3, 4, 5]
// 4 3 [1, 2, 3, 4, 5]
// 5 4 [1, 2, 3, 4, 5]

console.log(squared);  // [1, 4, 9, 16, 25]

콜백 지옥과 비동기 제어 이렇게 콜백 함수를 다뤄 나가다 보면 "콜백 지옥"이라 불리는 문제가 발생합니다. 이는 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 깊어져 가독성이 떨어지는 상황을 나타냅니다.

해결 방법으로는 익명 함수를 기명 함수로 전환하거나, Promise, Generator, async/await을 활용할 수 있습니다.

마무리 콜백 함수는 자바스크립트에서 강력한 도구 중 하나로, 비동기 작업을 다루는 데에도 중요한 역할을 합니다. 이해하고 적절히 활용한다면 높은 수준의 코드를 작성할 수 있을 것입니다.

이상으로 콜백 함수와 비동기 제어에 대한 더 자세한 설명이었습니다. 궁금한 점이나 추가로 알고 싶은 내용이 있으면 언제든지 물어봐주세요!

• 실행 할 코드에 제공할 환경 정보들을 모아 놓은 객체
• javascript의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념

컨텍스트란?
번역하면 상황, 문맥, 맥락. 실행할 코드(함수)의 주변 상황이라고 이해할 수 있다.
그러한 주변 환경 정보들의 묶음이 실행 컨텍스트인 것이다.

스택과 큐

• 스택 : 출입구가 하나뿐인 깊은 우물같은 데이터구조 (a,b,c,d 저장시 d,c,b,a 순서로 꺼냄)
• 큐 : 양쪽이 모두 열려있는 파이프구조[보통 한쪽은 입력, 한쪽은 출력 담당] (a,b,c,d 저장시 a,b,c,d 순서로 꺼냄)

1. 동일한 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성
2. 콜스택에 이를 쌓아올림
3. 가장 위에 있는 컨텍스트와 관련 있는 코드를 실행하는 식으로 전체 코드의 환경과 순서를 보장

“동일한 환경”이란? 하나의 실행 컨텍스트를 구성할 수 있는 방법으로 전역공간, eval() 함수, 함수 등

💡 실행 컨텍스트가 활성화 되는 시점에 javascript에서 발생하는 현상

• 호이스팅이 발생한다(선언된 변수를 위로 끌어올린다)
• 외부 환경 정보를 구성한다
• this 값을 설정한다. 이로 인해 다른 언어에서 발견할 수 없는 특이한 현상들이 발생한다.

대표적으로 호이스팅이 일어나게 하는 환경 레코드(enviroment record), 클로저가 일어나게 하는 외부 렉시컬 참조(outer LexicalEnvironment Reference), this 정보(this Binding)등의 정보를 포함하고 있습니다. '전역영역', 'eval함수로 실행된 경우', '함수를 생성한 경우' 이렇게 3가지의 경우에만 실행 컨텍스트가 생성된다.

VariableEnvironment

현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보 실행 컨텍스트 생성 시 VariableEnvironment에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LexicalEnvironment를 만들고, 이후에는 LexicalEnvironment를 주로 활용 변경 사항이 반영 되지 않음

LexicalEnvironment

현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보 (VariableEnvironment와 동일) 현재 컨텍스트 내부에는 a, b, c와 같은 식별자들이 있고 그 외부 정보는 D를 참조하도록 구성돼 있다.”와 같은 정보 변경 사항이 실시간으로 반영됨

ThisBinding

식별자가 바라봐야 할 대상 객체

📍 environmentRecord

• 현재 컨텍스트와 관련된 코드의 식별자(변수명) 정보들이 저장되는 곳
• 컨텍스트를 구성하는 함수에 지정된 매개변수명, 선언된 함수(그 자체), var로 선언된 변수명 등이 저장 (let, const는 아님)
• 컨텍스트 내부 전체를 처음부터 끝까지 훑어나가며 순서대로 수집

변수 수집 과정을 모두 마쳤더라도 실행 컨텍스트가 관여할 코드들은 아직 실행 전 => 코드 실행 전임에 불구하고 자바스크립트 엔진은 이미 해당 환경에 속한 코드의 변수명을 모두 알게 있게 됨 (호이스팅)

📍 호이스팅

함수 내 선언들을 해당 함수 스코프의 최상단으로 끌어올려서 선언되는 것을 의미

호이스팅 규칙

• 호이스팅 시 변수명만 끌어올리고 할당 과정은 원래 자리에 남겨둠 (environmentRecord는 현재 실행될 컨텍스트의 대상 코드 내에 어떤 식별자들이 있는지에만 관심이 있고, 각 식별자에 어떤 값이 할당될 것인지는 관심이 없기 때문)
• 변수는 선언부와 할당부를 나누어 선언부만 끌어올리는 반면 함수 선언은 함수 전체를 끌어올림
• 호이스팅이 끝난 상태에서의 함수 선언문은 함수명으로 선언한 변수에 함수를 할당한 것처럼 여길 수 있음

1) 매개변수와 변수에 대한 호이스팅

• 변수의 선언문만 호이스팅 되고 할당부는 그대로

  2) 함수 선언문 호이스팅

• 함수 선언 전체를 호이스팅 함

  3) 함수 표현식 호이스팅

• 변수 선언부만 호이스팅 되고 할당부는 그대로

💡 함수 표현식을 쓰는 이유 함수 선언문을 사용할 경우, 함수 선언보다 호출이 우선되어도 문제없이 코드가 돌아간다. 이러한 환경은 개발자가 의도하지 않는 동작이 일어날 수 있다는 것을 의미하고, 오류 발생 시 원인을 파악하기가 쉽지 않다. 따라서 상대적으로 안전한 함수 표현식을 쓰는 것이 좋다.

📍 outerEnvironmentReference와 Scope

Scope

• 스코프란 식별자에 대한 유효범위

Scope A의 외부에서 선언한 변수는, A의 외부/내부 모두 접근 가능하다. A의 내부에서 선언한 변수는 오직 A의 내부에서만 접근할 수 있다.

scope chain

• 식별자의 유효범위를 안에서 바깥으로 차례로 검색해나는 것
• 이를 가능하게 하는 것이 outerEnvironmentReference이다.

outerEnvironmentReference는 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조한다. 연결 리스트의 형태를 띠며, 선언 시점의 LexicalEnvironment를 계속 찾아 올라가다 보면 마지막에는 전역 컨텍스트의 LexicalEnvironment가 있을 것이다. 구조적인 특성상 여러 스코프에서 동일한 식별자를 선언한 경우, 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근 가능하다.

스코프 체인 예시

var a = 1;
var outer = function() {
    var inner = function(){
        console.log(a);
        var a = 3;
    };
    inner();
    console.log(a);
};

outer();
console.log(a);

호이스팅 결과

var a = 1;
var outer = function() {
    var inner;

    inner = function(){
        var a;
        console.log(a);
        a = 3;
    };
    inner();
    console.log(a);
};

outer();
console.log(a);

스코프 체인에 따른 출력 결과

undefined // inner안에서 a를 발견했지만 값이 없음
1 // outer에서 a발견하지 못함 -> 바깥에서 탐색 -> 전역에서 a발견
1 // 전역에서 a발견

📍 this

다른 언어들에서는 this는 해당된 객체를 의미하지만, 자바스크립트 상에서 this는 어디서든 사용될 수 있다. (=상황에 따라 this가 바라보는 대상이 달라진다.)

this는 자바스크립트의 함수 안에서 약속되어 사용되는 일종의 변수. this는 함수 내에서 함수 호출 맥락(= context, 상황에 따라 가변적인 경우)를 의미한다.

함수 호출

function func(){
    if(window === this){
        console.log("window === this");
    }
}
func(); 
//결과값 : window === this

함수안에서 this는 전역객체(window)를 의미한다.

메소드의 호출

var o = {
    func : function(){
        if(o === this){
            console.log("o === this");
        }
    }
}

o.func();  
//결과값 : o === this

메소드를 호출하면 메소드에 소속되어있는 this는 해당되어있는 객체를 의미한다.

함수의 호출과 메소드의 호출은 큰 차이가 없는게, 함수의 호출은 결국 window.func(); 이기 때문에 전역객체의 메소드를 호출하는것과 같다.

결론 : 함수안에서의 this는 그 함수가 소속되어있는 객체를 가르킨다.

명시적으로 this를 바인딩하는 방법

상황에 따라 달라지는 this를 원하는 값으로 바인딩하는 방법

call(), apply()

call 메서드는 호출 주체인 함수를 즉시 실행하도록 하는 명령으로, 첫 번째 인자를 this로 바인딩하고 이후의 인자들을 호출할 함수의 매개변수로 전달하면 된다. apply 메서드는 call과 동일한 역할을 수행하며, 두 번째 인자를 배열로 받는다는 점만 다르다.

var func = function (a, b, c) {
  console.log(this, a, b, c);
}

func(1, 2, 3); // window 1 2 3
func.call({x: 1}, 4, 5, 6); // {x: 1} 4 5 6
func.apply({x: 2}, [4, 5, 6]); // {x: 2} 4 5 6

call, apply 메서드 활용 유사배열객체에 call, apply 메서드를 이용하면 배열 메서드를 활용할 수 있게 된다. ES6에서는 이를 위해 Array.from(순회 가능한 모든 종류의 데이터 타입을 배열로 전환) 메서드를 도입했다.

bind()

bind 메서드는 call과 비슷하지만, 즉시 호출하지 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드이다. 함수에 this를 미리 적용할 때 혹은 부분 적용 함수를 구현할 때 활용할 수 있다. bind를 통해 새로 만든 함수는 name 프로퍼티에 bound라는 접두어가 붙는다는 특징이 있다. 따라서 call이나 apply보다 코드를 추적하기 수월하다.

var func = function(a, b, c, d){
    console.log(this, a, b, c, d);
};

func(1, 2, 3, 4); //window 1 2 3 4

//this 적용
var bindFunc1 = func.bind({ x:1 });
bindFunc1(5, 6, 7, 8); //{ x:1 } 5 6 7 8

//부분 함수 적용
var bindFunc2 = func.bind({ x:1 }, 4, 5);
bindFunc2(6, 7); //{ x:1 } 4 5 6 7
bindFunc2(8, 9); //{ x:1 } 4 5 8 9

⭐️ 정리 ⭐️

• 실행 컨텍스트 제공할 환경 정보들을 모아 놓은 객체 실행 컨텍스트 객체는 활성화 되는 시점에 VariableEnvironment, LexicalEnvironment, ThisBinding의 세 가지 정보 수집 VariableEnvironment와 LexicalEnvironment는 environmentRecord(매개 변수명, 식별자, 함수명등 수집)와 바로 직전 컨텍스트의 LexicalEnvironment 정보를 참조하는 outerEnvironmentReference로 구성 실행 컨텍스트 생성할 때, VariableEnvironment는 초기상태 유지, LexicalEnvironment는 실행 도중 변경사항 즉시 반영

• 호이스팅 실행 컨텍스트가 관여하는 코드의 최상단에 끌어올림 변수 언건과 할당이 동시에 이루어지면 '선언부'만 호이스팅한다 => 선언문과 표현식의 차이 발생

• 스코프 변수의 유효범위 outerEnvironmentReference는 해당 함수 선언된 위치인 LexicalEnvironment를 참조 전역 컨텍스트의 LexicalEnvironment까지 탐색해도 변수 찾지못하면 undefined 반환 전역변수: 전역 컨텍스트의 LexicalEnvironment 담긴 변수

• this 실행 컨텍스트 활성화하는 당시 지정된 this가 저장 지정되지 않으면 전역 객체 저장

자바스크립트의 데이터 타입은 크게 기본(원시) 타입과 참조 타입으로 나뉜다.

• 기본형 : String, Number, Boolean, Null, Undefined, Symbol(es6) ···
• 참조형 : Object, Array, Function, Date ···

기본형과 참조형은 데이터를 할당하는 과정에서 차이가 있으며, 이 둘을 구분할 때 기본형 : 불변값 / 참조형 : 가변값 이라고 할 수 있다.

💡 데이터 할당 : 우리가 원하는 값을 메모리 공간에 저장하고, 해당 값을 변수에 할당하는 과정을 말한다.

데이터가 메모리에 저장되는 방식

1. 변수 a에 문자열 'abc' 할당
2. 변수 영역과 데이터 영역 각각 확보
3. 데이터 영역에 문자열 'abc' 저장 / 변수 영역에 해당 주소 대입

⭐️ 변수와 데이터 영역을 나누어 관리함으로써 데이터 변환을 자유롭게 하고 메모리를 효율적으로 관리 가능

javascript에서 number타입은 8바이트 공간을 할당하는 반면 문자열은 정해진 규격이 없으므로 글자수에 따라 메모리 가변적일텐데 만약에 미리 확보된 공간 내에서만 데이터 변환할 수 있다면 데이터 재저장을 위해서 확보된 공간을 변환할 데이터의 크기에 맞게 늘리는 작업을 수행해야 할 것이다.

📍 데이터 할당과 불변성

변수와 상수를 구분할 때의 변경 가능성의 대상 : 변수 영역 메모리 불변성의 여부를 구분할 때의 변경 가능성의 대상 : 데이터 영역 메모리

기본형

• 기본형 스택 영역에 저장 불변값

var a = 'abc;
a = 'abcde;

// 데이터 할당
1. javascript 엔진은 스택 메모리 영역에 'abc'값이 있는지 검색
2. 없다면 'abc'값을 저장할 공간을 확보한다.
3. 해당 공간의 주솟값을 식별자 a와 연결한다.
=> 즉, 식별자 a는 'abc'이라는 데이터가 저장된 스택 영역의 주솟값을 참조한다.

// 데이터 재할당
1. javascript 엔진은 스택 메모리 영역에 'abcde'값이 있는지 확인
2. 없다면 'abcde'값을 저장할 공간을 확보한다.
3. 식별자 a 의 주솟값을 'abcde'를 저장한 주솟값으로 변경한다.
**=> 즉, 'abc'값 자체가 'abcde'로 변경된 것이 아니라 식별자 a 가 참조하는 주솟값만 달라졌다.**

식별자 a에 'abcde'값을 재할당할때 'abc'가 'abcde'로 변하는 것이 아니다. 따라서, 기본형은 불변하다.

💡 불변성이란? 한번 메모리 공간에 저장된 데이터의 값이 변할 수 없는 성질을 의미한다.

불변성을 가지는 데이터는 값이 변하지 않아서 크기가 고정적이므로 정적인 데이터를 다루는 스택 영역에 저장되는 것이 유리하다.

참조형

• 참조형 힙 영역에 저장 가변값

var obj = {
    name: 'JY',
    age: 26
};
var copyObj = obj;

copyObj.age = 20;

console.log(obj === copyObj); // true

copyObj 는 obj 와 같은 주솟값을 참조한다. 그리고, copyObj 객체의 age 프로퍼티 값을 수정할 때 자바스크립트는 obj 가 참조하는 힙 메모리에서 age 프로퍼티의 값만 수정한다. 이때 스택 메모리에 저장된 obj가 참조하고 있던 주솟값은 변하지 않았다.

참조형의 변수는 값이 직접 대입되는 것이 아닌 데이터가 저장된 주소를 참조하기에 참조(reference)형이라고 불리는 것이다. 참조형 데이터는 내부의 프로퍼티를 변경하는 경우 가변적이다. 그렇기에 변수의 복사나 수정 시 참조 여부를 잘 고려해야 한다. 만일 이러한 특성을 고려하지 않은 채 중요한 정보를 담고있는 객체나 배열에 수정 및 복사를 하게되면 원본 데이터가 예상치 못한 방향으로 변경될 수 있다.

아예 새로운 객체를 할당하면 복사된 원본 객체가 변하지 않는다. 서로 다른 주솟값을 바라보기 때문이다.

var obj1 = {
    name: 'JY',
    age: 26
};

var obj2 = obj1;

obj2 = {
    name: 'KJ',
    name: 31
}
console.log(obj === obj2); // false

참조형 데이터를 불변성을 유지하며 사용하려면 새로운 객체로 반환하는 것이 중요하다.

함수의 프로퍼티 내부까지 완전히 새로운 객체로 복제하는 깊은 복사의 예제 코드

var copyObjDeep = function(target){
    var newObj = {};

    if(typeof target === 'object' && target !== null){
        for(var prop in target){
            newObj[prop] = copyObjDeep(target[prop]);
  }
 } else {
        newObj = target;
    }
        return newObj;
};

💡 javascript는 콜 스택과 메모리 힙이라는 메모리 구조를 통해 데이터 및 코드 실행을 관리한다. *콜 스택 *: 기본형 값과 함수 호출의 실행 컨텍스트를 저장하는 곳 *힙 *: 객체, 배열, 함수와 같이 크기가 동적으로 변할 수 있는 참조형 값을 저장하는 곳

📍 undefined / null

자바스크립트에서 "없음"을 나타내는 두 가지 값.

'undefined'는 어떤 변수에 값이 존재하지 않음을 의미하고 'null'은 사용자가 명시적으로 '없음'을 표현하기 위해 대입한 값.

본래의 의미에 따라 사용자가 없음을 표현하기 위해 명시적으로 undefined 대입하는 것은 지양해야함.

• undefined : 사용자가 명시적으로 지정할 수도 있지만 값이 존재하지 않을 때 자바스크립트 엔진이 자동으로 부여하는 경우도 있음 : 자바스크립트 엔진이 사용자가 응당 어떤 값을 지정할 것이라고 예상되는 상황임에도 실제로는 그렇게 하지 않았을 때 undefined 반환 : 자바스크립트 엔진이 사용자가 응당 어떤 값을 지정할 것이라고 예상되는 상황

   1) 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때(변수 선언시 자동으로 undefined 할당하는 것이 아니라 이후 해당 변수에 접근하고자 할 때 비로소 undefined를 반환하는 것)
   2) 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때
   3) return 문이 없거나 호출되지 않는 함수의 실행 결과

: '비어있는 요소'와 'undefined를 할당한 요소'는 출력 결과부터 다름. '비어있는 요소'는 순회와 관련된 많은 배열 메서드들의 순회대상에서 제외됨. undefined는 비록 비어있음을 의미하긴 하지만 하나의 값으로 동작하기 때문에 이때의 프로퍼티나 배열의 요소는 고유의 키값(프로퍼티 이름)이 실존하게 되고, 따라서 순회의 대상이 될 수 있음.

: 값으로써 어딘가에 할당된 undefined는 실존하는 데이터인 반면, 자바스크립트 엔진이 반환해주는 undefined는 문자 그대로 값이 없음을 의미.

• null : '비어있음'을 명시적으로 나타내고 싶을 때는 undefined가 아닌 null을 사용.

⭐️ 정리 ⭐️

• javascript의 데이터 타입에는 크게 기본형과 참조형 존재
• 기본적으로 기본형은 불변값, 참조형은 가변값
• javascript는 콜 스택과 메모리 힙이라는 메모리 구조
• 콜 스택은 기본형 값과 실행 컨텍스트를 저장하는 곳
• 힙은 객체, 배열, 함수와 같이 크기가 동적으로 변할 수 있는 참조형 값을 저앙하는 곳
• 변수와 데이터 영역을 나누어 관리함으로써 데이터 변환을 효율적으로 처리 가능
• 불변성의 여부를 구분 할 때 변경 가능성의 대상은 데이터 영역의 메모리
• 참조형 데이터가 기본형과 메모리 할당과정에서 차이가 있는 이유는 참조형 데이터가 여러개의 프로퍼티(변수)를 모은 그룹이기 때문
• 객체를 참조하는 여러 곳에서 객체를 변경하면 모든 참조가 영향을 받게되는데 값으로 전달받은 객체에 변경을 가해도 원본 객체는 변하지 않아야 할 경우, 불변 객체를 사용
• 참조형 데이터를 불변값으로 사용하기 위해서는 깊은 복사를 하거나 라이브러리를 사용
• 얕은 복사와 깊은 복사는 참조값만 복사하거나 내부의 모든 값을 복사하는 방식
• 없음을 나타내는 값은 null, undefined 두 가지
• undefined : 어떤 변수에 값이 존재하지 않을 경우
• null : 사용자가 명시적으로 '없음'을 표현하기 위해 대입한 값. 순회 건너뜀

• 사용법 function 키워드 앞에 async를 붙여주면 된다. 비동기로 처리되는 부분 앞에 await을 붙여주면 된다.

  1. async

  async가 붙은 함수는 promise를 반환하고, promise가 아닌 것은 promise로 감싸 반환한다.

// promise로 만든 것
const promise1 = () => new Promise((resolve,reject)=>{
    resolve('ok');
});
// async 사용
const promise1 = async () => {return 'ok'}

promise1().then(result => console.log(result));

2. await

function delay(ms){
    // 정해진 시간 ms가 지나면 resolve를 호출하는 Promise를 리턴
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple(){
    // await은 이 delay가 끝날때까지 기다려준다.  
    await delay(1000);
    return '🍎';
}
async function getBanana(){
    await delay(1000);
    return '🍌';
}

function pickFruits(){
    return getApple().then(apple => {
        return getBanana().then(banana => `${apple} + ${banana}`);
    });
}
// async
async function pickFruits(){
 const apple = await getApple();
 const banana = await getBanana();
 return `${apple} + ${banana}`
}
pickFruits().then((result) => console.log(result));

3. Promise APIs

all Promise 배열을 전달하여 병렬적으로 다 받을 때까지 모아준다. getApple와 getBanana는 서로 연관이 없기 때문에 각 3초라는 시간 즉, 총 6초를 기다려야 할 필요가 없다. 이 때, all을 이용하여 병렬로 실행하면 3초만 기다리면 된다.

    function pickAllFruits(){
        return Promise.all([getApple(),getBanana()])
        .then(fruits => fruits.join(' + '));
    }
    pickAllFruits().then(console.log); // 3초뒤 🍎 + 🍌 출력

race 어떤 것이든 상관없이 먼저 리턴되는 첫번째 값만 받아오고 싶을 때

    function pickOnlyOne(){
        return Promise.race([getApple(), getBanana()])
    }
    pickOnlyOne().then(console.log);

• 동기
• • 직렬적(순서대로)으로 작업을 수행한다. 즉, 요청을 보낸 후 응답을 받아야만 다음동작이 이루어지는 방식이다. 어떠한 작업을 처리할 동안 다음의 나머지 작업들은 대기한다.

• 비동기
• • 요청을 보낸 후 응답의 수락 여부와는 상관없이 다음 작업이 동작하는 방식이다. a작업을 실행하는 시간동안 b작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다.

콜백함수와 Promise

1. 콜백함수

콜백함수란? 함수 자체를 인자로 전달하는 방식으로 함수 안에서 실행되는 또 다른 함수이다. 즉, 파라미터로 변수가 아닌 함수를 전달하는 것을 말한다.

보통 함수를 선언한 뒤에 함수 타입 파라미터를 맨 마지막에 하나 더 선언해 주는 방식으로 정의한다. 처리가 끝나면 파라미터로 전달 받은 함수를 실행한다.

  function mainFunc(param1, param2, callbackFunc) {
    // ... 처리 내용 작성
    callbackFunc(result);
  }

콜백함수의 대표적인 사용 예로는 setTimeout함수가 있다. 브라우저에 요청을 보냈던 것이 처리가 되면 이를 실행할 수 있도록 나중에 다시 불러야 하는데, 이 불러달라는 것에 착안하여 Call Back 함수라고 이름이 붙었다.

    console.log('1');
    setTimeout(function(){
        console.log('2');
    },1000);
    console.log('3');

1->3->2의 순서로 실행된다.

콜백함수를 남용하면 코드의 깊이가 깊어지며 가독성이 떨어지고 오류를 찾기도 어려워질 수 있다.

const obj = {
  loginUser : function(id, password, onSuccess, onError){
    setTimeout(()=>{
      if (
        (id === 'joy' && password === 'joyy') ||
        (id === 'yeon' && password === 'yeonn')
      ) {
        onSuccess(id)
      }
      else {
        onError(new Error('not Found'))
      }
    },2000)
  },
  getRoles : function(id, onSuccess, onError){
        setTimeout(() => {
      if (id === 'joy') {
        onSuccess({ name: 'joy', role: 'admin' })
      } else {
        onError(new Error('No Access'))
      }
    }, 1000)
  }
}

// 구현할 프로세스
// 1. 사용자에게 id, password 입력받기
// 2. 로그인
// 3. 로그인 성공 시 받아온 id로 role 받아오기
// 4. 성공적으로 role을 받아오면 name과 role 출력

let id = prompt("id를 입력해주세요.");
let password = prompt("password를 입력해주세요.");

obj.loginUser(
  id,
  password,
  // loginUser 메소드의 onSuccess 콜백함수 전달 === getRoles함수 호출
  (id) => {   
    obj.getRoles(
      id,
      // getRoles 메소드의 onSuccess 콜백함수 전달
      (userWithRole) => {
        alert(
          `Hello ${userWithRole.name}! you have a ${userWithRole.role} role. `
        );
      },
      // getRoles 메소드의 onError 콜백함수 전달
      (error) => {
        console.log("no access");
      }
    );
  },
  // loginUser 메소드의 onError 콜백함수 전달
  (error) => {    
    console.log("error");
  }
);

obj객체에서 id, password 를 받아온다. 입력을 받아와 로그인에 성공하면 onSucccess(id) 를 통해 Roles, 역할을 요청하게 된다. (getRoles) 역할을 받아 올 수 있다면, 사용자의 객체(이름, 역할이 들어있는)를 보이게 한다.

• 가독성이 떨어진다.
• 에러를 찾기가 힘들다.

이런 콜백지옥을 해결하기 위해 Promise나 async/await를 사용할 수 있다.

2. Promise

ES6에서는 비동기 처리를 위한 또 다른 패턴으로 Promise를 도입했다. Promise 는 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있게 도와주는 객체이다. 작업 결과 따라 성공 또는 실패를 리턴하며 결과 값을 전달 받을 수 있다. Promise는 비동기 작업을 수행 할 콜백함수를 인자로 전달 받는다.(resolve(성공), reject(실패))

    const 변수명 = new Promise((resolve,reject) => {
        // resolve('');
        // reject('');
    });

Promise 객체는 state(상태)와 result(결과)를 프로퍼티로 갖는다.

Promise의 3가지 상태

• Pending(대기):비동기 처리 로직이 아직 완료되지 않은 대기상태
• Fulfilled(이행/성공):비동기 처리 로직이 완료된 후 결과 값을 반환 한 상태
• Rejected(실패):비동기 처리 로직이 실패하거나 오류가 발생한 상태

Pending -> fulfilled가 되면 result는 resolve(value) 즉, resolve함수로 전달된 값이 된다. Pending -> rejected가 되면 result는 reject(error) 즉, reject 함수로 전달된 error가된다. promise의 상태가 fulfilled가 되면 then()을 이용하여 처리 결과 값을 받을 수 있고, rejected가 되면 catch()로 실패한 처리 결과 값을 받을 수 있다.

    const 변수명 = new Promise( (resolve, reject) => {
        setTimeout(() => {
            resolve('OK')
        },1000)
    });
    변수명.then((value) => {
      console.log(value);
    });

promise는 callback 패턴과는 다르게, 에러 상태를 관리함으로써 에러 처리가 가능해졌다.

    const promise1 = new Promise( (resolve, reject) => {
        setTimeout(() => {
          if('1' == '1'){
            resolve('ok');
          } else{
              reject('error');
          }
        },1000)
    });
    promise1.then((value) => {
      console.log(value);
    });
    promise1.catch((value) => {
      console.log(value);
    });

조건문이 '참'이 되면 resolve로 then()이 실행되고, 그렇지 않으면 catch()가 실행된다.

프로미스는 후속 처리 메서드를 체이닝 하여 여러 개의 프로미스를 연결하여 사용할 수 있다.

const promise1 = () => new Promise((resolve, reject) => {
  setTimeout(() => {resolve("🥚")},1000)
});
const promise2 = (step1) => new Promise((resolve, reject) => {
  setTimeout(() => {resolve(`${step1} -> 🐣`)},1000)
});
const promise3 = (step2) => new Promise((resolve, reject) => {
  setTimeout(() => {resolve(`${step2} -> 🐥`)},1000)
});

promise1() //
.then((step1) => promise2(step1))
.then((step2) => promise3(step2))
.then((result) => console.log(result))

// 🥚 -> 🐣 -> 🐥

매개변수(Parameter1)란? 함수의 정의할 때 작성하는 함수의 입력 변수 인자(arguments)란? 함수를 호출할 때 전달하는 실제 입력 값

나머지 매개변수(Rest parameters)

매개변수의 갯수가 정해져 있지 않은 가변인자에 접근하는 방법으로 arguments를 사용하는 방법과 나머지 매개변수를 사용하는 방법이 있다.

1. arguments

함수 안에서 함수의 인자와 관련된 정보를 배열로 담아 갖고 있는 객체 유사배열객체로 배열과 사용방법이 유사한 배열 형태의 객체이다. 배열은 아니기 때문에 배열의 내장 메서드(foEach,map,filter 등)은 사용할 수 없다. 화살표함수에는 arguments가 없다.

    function showName(name){
      console.log(arguments); // { "0": "Joy", "1": "Tom"}
      console.log(arguments.length); // 2
      console.log(arguments[0]); // "Joy"
      console.log(arguments[1]); // "Tom"
    }
    showName('Joy','Tom');

2. Rest parameters

나머지 매개변수란 지정한 인자를 제외한 나머지 인자들을 배열로 묶어서 나타내는 구문

    function showName(a, b,...names){
      console.log(a);
      console.log(b);
      console.log(names);
    }
    showName(); // []
    showName('Joy'); // "Joy"
    showName('Joy','Tom'); // "Tom"
    showName('Joy','Tom','Mike','Jane','Alex'); // ["Mike", "Jane", "Alex"]

a와 b에 순서대로 Joy와 Tom이 들어가고 그 이후에 남는 나머지 인자들은 모두 names라는 이름으로 사용 가능

    function add(...numbers){
      let result = 0;
      numbers.forEach(function(sum){
        return result += sum;
      });
      numbers.forEach( num=>(result += num) );
      console.log(result); // 화살표함수
    };
    add(1,2,3); // 6
    add(1,2,3,4,5,6,7,8,9,10); // 55

arguments와 다르게 배열의 메서드를 사용할 수 있다.

요약

나머지 매개변수는 정해지지 않은 갯수의 인자를 배열로 나타내주고 위치는 마지막 매개변수 자리에 들어간다. arguments는 유사배열객체이기 때문에 배열 메서드를 사용할 수 없고 인자 전체를 담기 때문에 나머지 매개변수처럼 일부만 사용할 수 없다는 단점이 있어 배열의 메서드나 인자들의 일부만 사용할 때는 나머지 매개변수를 사용하는게 좋다.

2. 전개구문(Spread syntax)

전개구문은 뭉쳐있는 여러개의 값들을 개별적인 값들의 목록으로 만들 때 사용된다. 배열 또는 객체를 펼쳐주는 역할을 한다.

  let arr1 = [1,2,3];
  let arr2 = [4,5,6];
  let arr3 = [...arr1,...arr2];
  console.log(arr3); // [1,2,3,4,5,6]

1. 배열 복사

JavaScript에서 배열을 새로운 변수에 할당하는 경우 새로운 배열은 기존 배열을 참조하기 때문에 새로운 배열을 변경하는 경우 원본 배열 역시 변경됐다. 배열의 복사는 slice 또는 map 등으로 가능

  var arr1 = ['1','2']; 
  var arr2 = arr1.slice();
  arr2.push('3'); 
  console.log(arr2); // [ "1", "2", "3" ]
  // 원본 배열은 변경되지 않는다.
  console.log(arr1); // [ "1", "2" ]

  var arr1 = ['1','2']; 
  var arr2 = arr1.map(function(item){
    return item;
  });
  arr2.push('3'); 
  console.log(arr2); // [ "1", "2", "3" ]
  // 원본 배열은 변경되지 않는다.
  console.log(arr1); // [ "1", "2" ]

ES6의 Spread 연산자를 사용하면, 새로운 복사된 배열을 생성할 수 있다.

    // ES6 spread operator
  var arr1 = ['1','2']; 
  var arr2 = [...arr1]; 

  arr2.push('3'); 
  console.log(arr2); // [ "1", "2", "3" ]
  // 원본 배열은 변경되지 않는다.
  console.log(arr1); // [ "1", "2" ]

2. 배열 병합

기존에 두 개의 배열을 결합할 때 concat 메서드를 사용했다. ES6에서는 spread 연산자로 좀 더 깔끔한 배열 병합이 가능하다.

    // 기존
    var arr1 = [1,2,3]; 
    var arr2 = [4,5,6]; 
    var arr = arr1.concat(arr2); 
    console.log(arr); // [ 1, 2, 3, 4, 5, 6 ] 

    // ES6 spread operator
    var arr1 = [1,2,3]; 
    var arr2 = [4,5,6]; 
    var arr = [...arr1, ...arr2]; 
    console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]

    var arr1 = [1,2];
    var arr2 = [0, ...arr1, 3, 4];
    console.log(arr2); // [0, 1, 2, 3, 4]

구조분해할당 구문은 배열이나 객체의 속성을 분해해, 그 값을 변수에 담을 수 있게 하는 표현식이다.

1. 배열의 구조분해할당

배열 값을 각각 꺼내오고자 할 때

1) 기존

    const arr = [1,2,3,4,5];

    console.log(arr[0]); // 1
    console.log(arr[1]); // 2

배열명에 대괄호를 붙인 뒤 부르고자 하는 index번호를 넣어 해당 데이터를 호출할 수 있다. 2) 구조분해할당 사용

    const [one, two, three] = arr;

이렇게 작성할 수 있으며 오른쪽의 배열을 분해해 좌변에 위치한 변수들에 각각 할당한다.

배열 구조분해할당의 활용

1) 일부 반환값 무시(불필요한 배열 요소 버림)

공백과 쉼표를 사용하여 불필요한 배열 요소를 버릴 수 있다.

const [one, ,two] = [1,2,3,4,5];

console.log(two); // 3

할당된 변수가 없으면 생략된다.

2) 기본값 설정

할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 클 때, 할당할 값이 없으면 undefined로 취급된다. 할당할 값이 없을 때 기본으로 할당해 줄 값이 기본값을 설정하여 에러를 방지할 수 있다.

const [one, two, three] = [1,2];
console.log(three); // undefined

const [one=3, two=4, three=5] = [1,2];
console.log(three); // 5

3) 변수 교환

이미 할당된 변수를 바꾸려면

1) 기존

let one = 1;
let two = 2;
//one에 two 값을 넣고, two에 one값을 넣고 싶다면?
let three = one;
one = two;
two = three;

three라는 (불필요한)변수를 만들어 기존 값 one을 담아둔다.

2) 구조분해할당

    [a,b] = [b,a];

임시 변수를 쓰지 않아도 된다.

4) '...'로 나머지 요소 가져오기

배열 앞쪽에 위치한 값 몇개만 필요하고 그 이후의 나머지 값들은 한데 모아서 저장하고 싶을 때 '...'(점 세개)를 붙일 후 매개변수를 추가하면 나머지 요소를 가져올 수 있다.

    let [one, two, ...rest] = [1,2,3,4,5];

    console.log(one); // 1
    console.log(two); // 2

    console.log(rest[0]); // 3
    console.log(rest[1]); // 4
    console.log(rest.length); // 3

2. 객체의 구조분해할당

1) 기존

const obj = {
    id : 1,
    name : 'joy',
    age : '20',
    city : 'seoul'
};

console.log(obj.id); // 1
console.log(obj.name); // joy
console.log(obj.age); // 20
console.log(obj.city); // seoul

2) 구조분해할당

const obj = {
    id : 1,
    name : 'joy',
    age : '20',
    city : 'seoul'
};
const { id, name, age, city } = obj;

console.log(obj.id); // 1
console.log(obj.name); // joy
console.log(obj.age); // 20
console.log(obj.city); // seoul

객체를 분해할 때도 배열처럼 기본값을 줄 수 있다.

const obj = {
    id : 1,
    name : 'joy',
    age : '20',
    city : 'seoul'
};
const { id, name, age, city, gender } = obj;

console.log(obj.gender); // undefined

const obj = {
    id : 1,
    name : 'joy',
    age : '20',
    city : 'seoul'
};
const { id, name, age, city, gender = 'femail } = obj;
console.log(obj.gender); // femail

중첩구조분해

const obj = {
    one : {
        two : {
            three : 'Hi'
        },
    },
};
console.log(obj.one.two.three);

const obj = {
    one : {
        two : {
            three : 'Hi'
        },
    },
};

const { one:{ two:{ three }, }, } = obj;
console.log(three); // Hi

요약

• 구조분해할당은 간결하고 직관적인 코드작성을 가능하게 한다.
• 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요할 경우, 객체나 배열을 변수로 '분해'하는 문법인 구조분해할당을 활용한다.
• 이외에도 함수의 매개변수가 많거나 기본값이 필요한 경우에도 활용할 수 있다.

1. 함수 선언식

• 함수 선언은 function으로 시작한다.
• 선언 된 함수는 호출 될 때마다 실행된다.
• 함수 실행 시 함수의 이름을 호출하면 된다.

  2. 함수 표현식

• 자바스크립트에서는 함수를 하나의 값으로 취급하기 때문에 함수를 변수에 값을 대입하듯이 표현식으로 정의 할 수 있다.
• 변수에 저장된 함수는 함수명이 따로 필요하지 않으며, 변수 이름을 통해서 호출한다.

  /* 함수 선언식 */
  function sum(a, b){
    console.log(a + b);
  }
  sum(10, 20); //30
  

/* 함수 표현식 */ const sum = function(a, b){ console.log(a + b); } sum(10, 20); //30

/* 화살표 함수 */ const sum = (a,b) => a + b; sum(10, 20); //30

# 화살표 함수
function이라는 키워드 없이 arrow(=>)를 이용해 함수를 생성하는 방법
화살표 함수는 기본적으로 익명함수 이기 때문에
화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.

- 화살표 함수는 return 명령어 없이도 함수 실행을 종료시키고 값을 반환한다.
- 중괄호 없이 바로 실행 코드가 있다면 return명령어가 보이지 않아도 자동으로 들어간다.
- 반대로 중괄호가 열려있다면 값이 자동으로 return되지 않기 때문에
값을 꼭 반환해야 하는 함수의 경우에는 별도로 리턴을 써줘야 한다.

## 화살표 함수 사용방법
```java
    x => { return x * x }
    x => x * x //명령어가 한줄 일 때 중괄호를 생략할 수 있으며 return도 생략 가능
    x => {} // 매개변수가 없을 경우
    (x, y) => {} //소괄호 생략 불가능
    () => {} //소괄호 생략 불가능
    () => ({ a:1 }) //객체 반환 시 소괄호 사용

화살표 함수의 this

일반 함수는 함수가 실행될 때 함수 자신의 스코프 안에 자기 자신인 this가 존재하지만 화살표 함수는 자신의 스코프 안에 this가 존재하지 않는다.

어떤 변수를 찾을 때 자기 scope내에 없으면 외부 상위 scope에 접근해 찾게 되는데 그렇기 때문에 화살표 함수에서의 this는 외부의 상위 스코프 this를 가리킨다.

e.stopPropagation()

상위요소로 해당 이벤트를 전달하지 않고 자신만 이벤트를 감지하도록 만든다. 즉, 부모 엘리먼트로의 이벤트 전달을 막아준다. !codepen[dhwlduswlddj/embed/qByWBVO?default-tab=js%2Cresult&editable=true]

e.preventDefault()

html 웹 브라우저의 기본적인 동작들은 다양하다.

1. a 태그에서 href 속성을 이용한 사이트 이동
2. onSubmit을 했을때, 페이지가 새로고침 되는 고유의 브라우저 동작 즉, preventDefault()는 이러한 고유의 브라우저 동작을 막아준다.. !codepen[dhwlduswlddj/embed/abjobjO?default-tab=js%2Cresult&editable=true]

전자화된 시스템의 가장 중요한 특징은 복제다. 프로그래밍에서 복제

    var a = 1;
    var b = a; // a에 담긴 1이라는 값을 복제한 것과 같다.
    b = 2;
    console.log(a); // 1

값을 변경한 것은 변수 b이기 때문에 변수 a에 담겨있는 값은 그대로이다. 즉 변수 b의 값에 변수a의 값이 복제된 것이다.

참조

    var a = {'id':1} //참조데이터타입
    var b = a;
    b.id = 2;
    console.log(a.id); // 2

변수 b에 담긴 객체의 id 값을 2로 변경했을 뿐인데 a.id의 값도 2가 되었다.

비유하자면 복제는 파일을 복사하는 것과 같고 참조는 윈도우의 바로가기를 만드는 것과 같다고 할 수 있다. 바로가기를 통해 만든 파일은 원본 파일에 대한 주소 값이 담겨있다. 바로가기에 접근하면 컴퓨터는 바로가기 링크에 저장된 원본의 주소를 참조해서 원본의 위치를 알아내고 원본에 대한 작업을 하게 된다. 원본 링크를 변화시키면 바로가기에 변화된 내용이 적용되는 것과 같다고 볼 수 있는 것 다시 말해, 저장 장치의 용량을 절약할 수 있고 원본 파일을 사용하고 있는 모든 복제본이 동일한 내용을 유지할 수 있게 된다.

    var a = 1;
    var b = {'id':1};

변수 a에 담긴 값은 데이터형이 숫자이고 변수 b는 객체이다. 숫자는 원시데이터형(기본)이다. 자바스크립트에서 원시 데이터형을 제외한 모든 데이터 타입은 객체로 다른 말로 참조 데이터형(참조 자료형)이라고도 부른다. 데이터형은 복제되고 참조 데이터형은 참조된다.

=> 변수에 담겨있는 데이터가 원시형이면 그 안에는 실제 데이터가 들어있고, 객체면 변수 안에는 데이터에 대한 참조 방법이 들어있다고 할 수 있다.

함수

참조, 복제와 같은 것들이 함수와는 어떻게 관련되어 있는지 알아보는 예제

    var a = 1;
    function func(b){ //함수정의 - 매개변수 값 변경
        b = 2;
    }
    func(a);
    console.log(a); //1

원시(기본)데이터 타입을 인자로 넘겼을 때 코드이다.

    var a = {'id':1};
    function func(b){
        b = {'id':2}; // 새로운 객체를 만들었다,
    }
    func(a);
    console.log(a.id); //1

참조 데이터 타입을 인자로 넘겼을 때 코드이다. func()의 매개변수는 인자와 같다 => b=a b는 새로운 객체를 만들어 담았다. 이는 b가 가리키는 객체를 변경하는 것이기 때문에 a에 영향을 주지 않는다. 하지만 아래는 다르다.

    var a = {'id':1};
    function func(b){
        b.id = 2;
    }
    func(a);
    console.log(a.id); //2

b는 객체 a를 참조한다. 이 값이 속성을 바꾸면 그 속성이 소속된 객체를 대상으로 수정 작업을 한 것이 되기 때문에 b의 변경은 a에도 영향을 미치게 된다.

• 데이터 타입이란 데이터의 형태를 의미한다.
• 데이터 타입은 기본형(원시)과 참조형(객체)이 있다. => 객체가 아닌 데이터 타입과 객체 데이터 타입이라고도 한다.

래퍼 객체(wrapper object)

    let str = 'coding';
    console.log(str.length); // 6
    console.log(str.charAt(0)); // 'c'

위의 코드에서처럼 문자열은 프로퍼티와 메소드를 가지고 있다. 하지만 문자열은 객체가 아니다. 그 이유는 문자열은 기본(원시) 데이터 타입이지만 문자열과 관련된 어떤 작업을 하려고 할 때 자바스크립트는 내부적으로 / 임시로 문자열 객체를 만들고 사용이 끝나면 바로 제거하기 때문이다.

    let str = 'coding';
    str.prop = 'everybody';
    console.log(str.prop); // undefined

str.prop을 하는 순간 자바스크립트는 내부적으로 String객체를 만든다. prop프로퍼티는 이 객체에 저장되지만 이 객체는 곧 제거된다. 그렇기 때문에 prop이라는 속성이 저장된 객체는 존재하지 않게 되는 것이다.

이렇게 임시로 생성된 객체를 래퍼 객체라고 한다. 원시 데이터 타입 별 래퍼객체

• 숫자 : Number
• 문자열 : String
• 불리언 : Boolean
• null / undefined : 존재X

Object는 객체의 가장 기본적인 형태를 가지고 있는 객체(아무것도 상속받지 않은 순수한 객체)이다. 자바스크립트에서는 값을 저장하는 기본적인 단위로 Object를 사용한다. 자바스크립트의 모든 객체는 Object를 부모로 한다.(Object를 상속 받음) 즉, 모든 객체는 Object의 prototype을 상속 받는다. 따라서 모든 객체들에 공통으로 기능을 추가 하고 싶다면 Object의prototype프로퍼티에 해당 기능을 추가하면 된다. 이렇게 활용하면 Object의 prototype을 이용해 모든객체가 사용할 수 있는 메소드를 만들 수 있다는 말과 같다.

Object API(Object가 가진 메소드)

Object API사용법 중 keys()와 toString()에 대해 알아보자

Object.keys();

어떤 객체가 있을 때 객체가 가지고 있는 여러가지 키 값들을 리턴해주는 메소드

    //Object.keys();
    let person = {'name':'Oh', 'age':'25', 'city':'seoul'};
    console.log(Object.keys(person)); //['name', 'age', 'city']

Object.prototype.toString();

어떤 객체가 있을 때 그 객체가 담고 있는 어떤 값들이 무엇인가, 또는 그 객체의 상태를 사람이 보기 좋게 문자열로 출력 해주는 메소드이다.

    //Object.prototype.toString();
    let arr = new Array(1,2,3);
    console.log(arr.toString()); // 1,2,3
    => 객체는 암시적으로 Object라는 부모 객체를 갖고 있다.
        따라서 Object에 정의되어 있는 toString과 같은 메소드를 사용할 수 있는 것이다.

=> Object.keys();는 결국 Object.keys = function(){}과 같으며 여기서 Object는 생성자 함수일 것이다. 하지만 Object.prototype.toString();은 Object.prototype.toString = function(){}이라는 뜻으로 프로토타입이라는 프로퍼티에 저장되어 있는 객체를 유전자로 가진 객체가 생성되는 것이다. 즉 쉽게 말해 Object는 모든 객체의 부모이고 중간에 prototype이 들어간 API는 모든객체에서 상속하여 사용할 수 있다는 것이며 이 말은 곧 우리가 만드는 애플리케이션에서 모든 객체가 공통적으로 가져야 하는 기능이 있다면 위 기능을 통해 수정하고 만들 수 있다는 뜻이다.

Object 확장

Object API의 상속을 이용하여 우리가 필요한 Object 객체를 확장한 기능을 구현 할 수 있다. 객체의 값 중 내가 입력한 값이 있다면 true, 없다면 false를 리턴해주는 예제

    Object.prototype.contain = function(value){ //체크하려는 값 이름
        for(var name in this){ //하나하나 값을 찾기 위해 for in문 사용
            if(this[name] === value){
                return true;
           }
       }
       return false;
   }
   var o = {'name':'Oh', 'city':'Seoul'}
   console.log(o.contain('Oh')); // true
   var a = ['Oh','admin','root'];
   console.log(a.contain('Seoul')); // false

이렇게 Object API 상속을 이용하여 모든 객체가 사용하는 메소드를 만들 수 있지만 Object객체는 확장하지 않는 것이 바람직하다. 왜냐하면 모든 객체에 영향을 주기 때문이다. 확장한 코드에 아래 코드를 실행해보자

    for(var name in o){
        console.log(name);
    }

o라는 변수에 내가 넣은 키 값은 name,city두가지 인데 결과는 name,city,contain이 나온다. 즉,프로토타입에 추가한 메소드가 함께 출력된다.

이런 혼란을 피하기 위한 방안으로 해당 객체의 소속인지를 체크할 수 있는 hasOwnProperty()를 사용하여 인자로 전달된 속성의 이름이 해당 객체의 속성인지의 여부를 판단한다. 만약 prototpye으로 상속 받은 객체라면 false

• 자바스크립트가 기본적으로 가지고 있는 객체
• 프로그래밍을 하는데 기본적으로 필요한 도구 => 내장객체가 중요한 이유

프로그래밍이라는 것은 언어와 호스트 환경에 제공하는 기능들을 통해서 새로운 소프트웨어를 만들어내는 것이기 때문에 내장 객체에 대한 이해는 프로그래밍의 기본이라고 할 수 있다.

자바스크립트 내장객체

• Object
• Function
• Array
• String
• Boolean
• Number
• Math
• Date
• RegExp 자바스크립트가 동작하는 호스트환경이 제공하는 API는 더 많이 있고 이것을 함께 이용하여 우리가 소프트웨어를 만들게 되는 것이다. 이 중 우리가 필요한 객체를 직접 만들고 사용할 수 있으며 이런 것을 사용자 정의 객체라고 한다. 우리는 이 두가지(내장객체, 사용자정의객체)를 섞어 활용하여 사용할 수 있다.

배열의 확장

자바스크립트의 내장 객체 중 배열이라는 것을 확장해보자.

    let arr = new Array('Seoul', 'New York', 'Tokyo', 'Shanghai');

    function getRandonFromArray(arr){
        let index = Math.floor(Math.random() * arr.length); 
        return arr[index];
    }
    console.log(getRandomFromArray(arr));

함수 getRandomFromArray 안의 Math.floor(Math.random() * arr.length)을 주어 Array안에 들어있는 배열들을 랜덤하게 추출할 수 있도록 하였다. Math.random으로 0이상1미만의 소수들이 랜덤으로 추출되고 arr.length를 곱해 최솟값 0부터 최댓값 4미만의 값의 랜덤 범위를 주었다. Math.floor로 소수점 이하를 제거하여 0,1,2,3이 나오게 하였다. 결과로 인덱스값에 해당되는 값을 랜덤으로 가져와서 실행시킬 수 있다.

이 코드를 수정하여 함수를 배열 객체에 포함시켜 그 함수가 마치 배열에 내장된 메소드인 것처럼 기능을 사용할 수 있다.

    Array.prototype.random = function(){
        let index = Math.floor(Math.random() * this.length);
        return this[index];
    }
    let arr = new Array('Seoul', 'New York', 'Tokyo', 'Shanghai');
    console.log(arr.random());

Array생성자 함수의 property(프로퍼티)중 prototype(프로토타입)의 메소드로 random을 추가하였다. 유전자 역할의 prototype을 통해 random메소드를 new생성자를 이용해 만든 Array객체와 연결해 상속시켜 주었다. 여기서 random메소드 안의 this는 new생성자를 이용해 만든 Array객체 자체를 가리키게 된다.

• 상속이란? 객체는 연관된 변수나 메서드등으로 이루어진 작은 프로그램이라고 할 수 있다. 상속은 객체의 로직을 그대로 물려 받아 또 다른 객체를 만들 수 있는 기능을 의미한다. 상속받은 객체는 부모객체의 어떤 기능은 제외하고 추가하면서 기존의 로직을 수정하고 변경해서 새로운 객체를 만들 수 있게 한다. =>로직을 재활용하게 할 수 있다.

    function Person(name){ //생성자로 쓰일 함수
        this.name = name;
    }
    Person.prototype.name = null;
    Person.prototype.introduce = function(){
        return 'My name is ' +this.name;
    }


    function Programmer(name){ //생성자로 쓰일 함수
        this.name = name;
    }
    Programmer.prototype = new Person();

    var p = new Programmer('joy');
    console.log(p.introduce());

새로운 Programmer라는 생성자를 만들었다.

1.new Programmer라는것을 통해서 새로운 빈 객체를 만들었고 프로퍼티 name의 값으로 인자joy를 지정했다. 2.p.introduce하게 되면 'My name is joy'라는 결과가 나온다.

Programmer라는 생성자 안에는 introduce라는 메서드가 정의 되어있지 않은데 introduce의 결과가 나오게 된 이유는? introduce는 Person 객체에 prototype이라는 프로퍼티의 메서드로 정의되어있고 prototype을 통해 Programmer가 Person의 introduce를 상속받았다.

어떤 객체를 상속받고 싶다면 그 객체를 생성자의 prototype에 할당시키면 된다.

상속의 활용 - 프로토타입

프로토타입이란? 말 그대로 객체의 원형으로 유전자의 역할을 한다고 볼 수 있다. 함수는 객체이며 생성자 또한 함수이자 객체이다. 객체는 property(프로퍼티)를 지닐 수 있고 prototype(프로토타입)이라는 property(프로퍼티)는 이미 용도가 약속되어 있는 유전자 역할의 특수한 프로퍼티이다.

    function Ultra(){}
    Ultra.prototype.ultraProp = true;

    function Super(){}
    Super.prototype = new Ultra();

    function Sub(){}
    Sub.prototype = new Super();

    var o = new Sub();
    console.log(o.ultraProp); //true

세개의 생성자가 정의되어 있다. o변수에 Sub생성자를 통해 객체를 만들어 담았다. 그리고 o.ultraProp을 실행했다. Sub생성자에는 ultraProp을 가지고 있지 않다. 하지만 Sub생성자는 Super생성자를 상속받았고, Super생성자에도 ultraProp은 없지만 Ultra생성자를 상속 받았다. 이 Ultra생성자에 ultraProp이 존재하며 o.ultraProp의 결과는 true가 나온다. 이는 연속적인 상속으로 연결된 고리를 따라 실행됐기 때문이며 이것을 prototype chain(프로토타입체인)이라고 한다.

this = '이것'

this는 자바스크립트 함수 안에서 사용하는 키워드이다. this는 함수안에서 사용할 수 있는 일종의 약속되어있는 변수인데, 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. 그리고 변수안의 값은 함수를 어떻게 호출하냐에 따라 달라진다. 즉 상황에 따라 this가 바라보는 대상이 달라진다고 할 수 있다.

인스턴스란? 비슷한 속성을 가진 여러개의 객체를 만들기 위해 생성자 함수를 사용하는데 이렇게 생성된 객체를 인스턴스라 부를 수 있고 .prototype을 통해 만들어 낸 것이 인스턴스라 볼 수 있다.

1) 함수에서 this

함수호출

function f(){
    if(window === this){
        console.log('window === this');
    }
}
f(); // window === this

this는 함수 안에서 전역객체인 window를 의미한다.

2) 메서드에서 this

메서드의 호출

    var o = { // o변수에 객체를 정의해서 할당함
        f : function(){  // 프로퍼티f의 값이 함수 => 메서드
            if(o === this){
                console.log('o === this');
            }
        }
    }
    o.f(); // o === this

메소드 호출 => 객체를 담고있는 변수 o와 메서드 안의 this의 값이 같은지 확인

어떤 객체에서 그 메서드를 호출하면 this로 메서드가 소속되어 있는 객체에 접근 할 수 있기 때문이다.

위의 함수 호출 코드처럼 함수가 어느 객체에 소속되어 있지 않은 경우에 호출하면 this === window. 메서드로 호출하면 this === o. 즉, 그냥 함수에서의 this는 전역객체인 window였고 메소드에서 this는 객체였다.

이것은 같다고 할 수 있다. 그 이유는, 전역변수나 전역객체는 window가 암시적으로 생략되어 있고 실제로는 window라는 객체의 메소드가 된다. 그렇기 때문에 this값이 window가 된다는 것은 메서드로 호출 시 this값이 그 메서드의 소속인 객체를 가리킨다는 것과 같은 말이라고 할 수 있다..

3) 생성자의 호출

    var funcThis = null;

    function Func(){
        funcThis = this;  // var를 사용하지 않은 함수 내 지역변수는 전역변수가 된다.
    }
    var o1 = Func();   //일반 함수 호출
    if(funcThis === window){
        console.log('window');
    }
    var o2 = new Func();   //생성자 호출 -> 
    if(funcThis === o2){
        console.log('o2');
    }

일반함수로 호출 시 -> 함수 안에서 this는 window를 가리킨다. 생성자로 호출 시 -> this는 생성될 객체를 가리킴 => 1.생성자를 만들면 자바스크립트는 비어있는 객체를 만들게 된다. 2.생성자 안의 this는 생성자가 새로 만든 객체가 된다.

4) apply로 호출했을 때 this

    var o = {}
    var p = {}
    function f(){
        switch(this){
            case o :
                console.log('o');
                break;
            case p :
                console.log('p');
                break;
            case window :
                console.log('window');
                break;
        }
    }
    f();
    f.apply(o);
    f.apply(p);

스위치문 괄호안에 어떤 값이 들어가면 그 값과 같은 case안에 들어있는 구간이 실행된다.(break를 만날 때 까지) 스위치는 if문과 대체제관계에있다. f();를 함수로 호출하게 되면 this는 window를 의미해서 case-window를 실행한다. f.apply();는 f 함수는 객체이기 때문에 메소드를 가질 수 있고 내장메서드인 apply를 가지고 있다. apply를 호출하면서 첫번째 인자로 o를 주게 되면 f함수가 실행이 되면서 this값이 o가 된다.

• =>함수를 어떻게 호출하냐에 따라서 어디에 소속되는지 달라진다.

코어자바스크립트 - this

JavaScript에서의 this는 매우 중요한 개념으로, 함수가 어떻게 호출되느냐에 따라 동적으로 결정됩니다. 여러 상황에서 this의 동작을 이해하는 것이 중요합니다. this는 함수를 호출할 때 결정된다.

전역 공간: 전역에서 함수가 호출되면 this는 전역 객체 브라우저에서는 window, Node.js에서는 global (전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당한다) var로 변수를 선언하더라도 실제 자바스크립트 엔진은 어떤 특정객체의 프로퍼티로 인식하기 때문에 var로 변수를 선언하는 대신 window의 프로퍼티에 직접 할당하더라도 결과적으로 똑같이 동작한다. 그러나 '삭제'명력에 대해서는 그렇지 않다.

메서드 호출: 함수와 메서드를 구분하는 유일한 차이는 "독립성" 함수: 그 자체로 독립적인 기능을 수행함 메서드: 자신을 호출한 대상 객체에 관한 동작을 수행함 메서드로의 호출 : 점 표기법, 대괄호 표기법 ( 뭐가 됐든 그 앞에 객체가 명시돼 있는 경우에는 메서드로 호출한 것) 객체의 메서드로 함수가 호출될 때, this는 해당 메서드를 소유한 객체를 참조 객체 내부의 함수에서 this를 사용하면 this는 그 함수가 속한 객체

함수 호출: 실행컨텍스트를 활성화할 당시에 this가 지정되지 않은 경우 this는 전역 객체를 바라본다고 함 => 함수가 독립적으로 호출될 때, this는 전역 객체 이는 메서드의 내부 함수에서도 동일하게 적용

콜백 함수: 콜백 함수에서 this는 함수를 호출한 주체에 따라 결정 주로 이벤트 핸들러나 비동기 함수의 콜백에서 발생 콜백함수의 제어권을 가지는 함수(메서드)가 콜백함수에서의 this를 무엇으로 할지를 결정하며, 특별히 정의하지 않은 경우에는 기본적으로 함수와 마찬가지로 전역객체를 바라봄. 예) 대표적으로 setTimeout, eventHandler

생성자 함수: 생성자함수?: 어떤 공통도니 성질을 지니는 객체들을 생성하는 데 사용하는 함수 함수가 new 키워드와 함께 생성자로 사용될 때, this는 새로 생성된 인스턴스

명시적 바인딩 call 또는 apply 메서드를 사용하여 this를 명시적으로 지정 가능 이를 통해 함수 호출 시 특정 객체에 this를 바인딩 가능

call : 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령 (함수를 그냥 실행하면 this는 전역객체를 참조하지만 call메서드를 이용하면 임의의 객체를 this로 지정 가능) apply : 두번째 인자를 배열로 받음 bind : this 및 함수에 넘길 인수를 일부 지정해서 새로운 함수를 만듦

화살표 함수의 예외사항 : 화살표 함수는 실행 컨텍스트 생성 시 this를 바인딩하는 과정이 제외 즉, 이 함수 내부에는 this가 ㅇ예 없으며, 접근하고자 하면 스코프체인상 가장 가까운 this에 접근

this 인자를 받는 메서드: 일부 메서드는 콜백 함수 내에서 this 값을 제어하기 위해 별도의 this 인자를 제공합니다. 요소를 순회하면서 콜백 함수를 반복 호출하는 내용의 일부 메서드는 별도의 인자로 this를 받기도 함

객체지향프로그램(Object Oriented Programing)은 좀 더 나은 프로그램을 만들기 위한 프로그래밍 패러다임으로 기능별로 로직을 구분해서 정리하는 방식 중 하나이다.

즉, 프로그래밍하려는 대상을 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다.

객체지향의 특성

1) 부품화 : 프로그램의 로직들을 기능별로 나눠 부품화 하는 것 2) 은닉화, 캡슐화 : 로직을 온전히 부품화 하기 위해 내부동작법은 숨기고 사용방법만 노출하는 것 (= 내부의 동작 방법을 '객체' 안으로 숨기고 사용자에게는 그 부품의 사용방법인 '메소드'만을 노출하는 것) 3) 추상화 : 현실 또는 가상의 존재를 프로그램에서 사용할 용도에 맞게 설계하는 것

생성자와 new

'객체'란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다.

일반적으로 객체를 만드는 방법이다.

var person = {}; // 빈 객체 생성
person.name =  'a';   
person.introduce = function(){
return 'My name is' + this.name;
}
console.log(person.introduce());

위의 코드는 객체를 정의하는 부분에 분리가 되어 있어 코드의 집중도가 다소 떨어진다. 객체를 정의 할 때 값을 셋팅하는 코드로 쓰는 것을 지향한다.

    var person = {
        'name' : 'egoing',
        'introduce' : function(){
            return 'My name is '+this.name;
        }
    }

그런데 (만약 다른 사람의 이름을 담을 객체가 필요하다면) 유사한 객체의 정의를 여러번 반복해야 할 때가 있다. 객체의 구조를 재활용할 수 있는 방법이 필요하고 '생성자'를 사용하면 된다.

생성자(constructor)는 객체를 만드는 역할을 하는 함수이다.

함수를 호출할 때 new를 붙이면 '생성자'라고 하며 비어있는 객체를 만든 후에 이를 리턴한다. 즉, 함수 앞에 new가 붙으면 리턴 값은 객체가 된다.

    function Person(){}
    var p = new Person(); // var p = Person();일 때 p에 담기는 값은 undefined로 존재하지 않는다.
    p.name = 'egoing';
    p.introduce = function(){
        return 'My name is ' +this.name;
    }
    console.log(p.introduce()); // My name is egoing

var p = new Person();은 생성자가 되고 변수 p에는 Person{}이라는 빈 객체가 담기게 된다. 이 코드는 객체 리터럴을 통해 객체를 만들었을 때와 같다. 여러번 반복해야 할 때 코드 중복이 일어난다.

function Person(name){  // 생성자로 쓰일 함수 정의 //this = {}; 암시적으로 빈 객체가 만들어짐
    this.name = name;
    this.introduce = function(){
        return 'My name is' + ' ' + this.name;
    } 
};
// 이런 초기 세팅을 '초기화'라고 부름 (Person이라는 생성자가 만들어 놓은 빈 객체가 어떤 프로퍼티, 메소드를 가져야 하는지를 생성자 함수 안에 기술하는 것을 통해 객체에 대한 정보등을 셋팅 해 주고 이걸 초기화)

var p1 = new Person('a'); // 생성자 person의 인자로 a를 전달한다.
console.log(p1.introduce()); // 생성자 person에서 프로퍼티 name을 'a'로 정의

var p2 = new Person('b');
console.log(p2.introduce());

생성자 내에서 이 객체의 프로퍼티를 정의하고 있다. 생성자 함수는 일반함수와 구분하기 위해 첫글자를 대문자로 표시한다.

생성자의 특징

자바스크립트에서 객체를 만드는 주체는 함수이다. 함수에 new를 붙이는 것을 통해 객체를 만들 수 있다. 객체 리터럴 문법으로 객체를 만드는 것 보다 간단하고 읽기 쉽게 만들 수 있다.

전역객체

전역객체(Global object)는 특수한 객체이다.

function f(){
    console.log('hello');
    }
f();
window.f(); // window가 객체이며 점 뒤의 f()는 속성이 된다. 속성에 함수가 왔으므로 메소드이고 f()함수는 사실 window라고 하는 전역객체의 메서드이다.

결과적으로 f();와 window.f();는 모두 실행이 된다. 객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주됨. 자바스크립트에서 모든 객체는 기본적으로 전역객체의 프로퍼티이다.

전역객체 API

API

Application Programming Interface의 약자로, 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치이다. 이 조작 장치는 프로그래밍 언어를 통해서 조작할 수 있는데 자바스크립트의 API는 크게 자바스크립트 자체의 API와 자바스크립트가 동작하는 호스트 환경의 API로 구분된다.

전역객체의 API는 호스트 환경에서 필요에 따라서 추가로 정의하고 있다. 전역객체의 이름도 호스트환경에 따라서 다른데, 웹브라우저에서 전역객체는 window이지만 node.js에서는 global이다. 즉 node.js와 같은 경우 자바스크립트 문법의 window와 같은 전역 객체 역할을 하는 것이 global인것이다.

- arguments

함수 안에서 함수의 인자와 관련된 정보를 갖고 있는 객체이다. 사용방법이 배열과 비슷하여 유사배열이라고도 한다. 자바스크립트 함수는 arguments라는 변수를 사용할 수 있으며 배열을 담는 것으로 약속되어 있다.

function sum(){
  var _sum = 0;
  for(var i=0; i < arguments.length; i++){
    console.log(i + ':' + arguments[i]); // 0:1, 1:2, 2:3, 3:4
    _sum += arguments[i];
  }
  return _sum;
}
console.log('result:' + sum(1,2,3,4));

1.sum이라는 매개변수를 정의하지 않은 함수를 만듦. 2.i=0, i<arguments.length, i++ 이 반복문을 실행한다. 3.arguments에는 사용자가 전달한 인자가 들어가 있고 배열처럼 .length를 통해 sum()인자의 갯수를 알아옴. 4.arguments[i]는 sum인자의 index값을 알아옴. 5.return _sum 값을 알 수 있음.

=> arguments.length를 통해 이 객체를 포함한 함수가 가지고 있는 인자의 갯수를 파악할 수 있다. arguments[i]를 통해 이 객체를 포함한 함수에 들어온 인자의 자리수마다의 값을 파악할 수 있다.

arguments.length -> 함수가 가지고 있는 인자가 몇개인지 function(함수이름).length -> 함수가 정의하고 있는 매개변수가 몇개인지

함수의 호출

기본적으로 함수를 호출하는 방법이다.

function f(){}
f();

자바스크립트 함수는 객체이며 객체에는 속성이 있고 속성에는 값과 함수가 올 수 있다. 속성이 값인것을 property라고 하고 함수는 method라고 한다. 함수f는 객체 function이 가지고 있는 내장함수(내장 method)를 상속받는다.

- apply / call

함수를 호출 할 때 call과 apply를 사용하면 첫번째 인자 자리에 this로 사용할 인자값을 넘겨줄 수 있다.

const mike = {
    name: 'mike',
};
function update(birth, occupation){
    this.birth = birth;
    this.occupation = occupation;
}
update.apply(mike, ['May', 'singer']);   //mike = this로 사용할 인자값, 두번째 부터는 update함수가 사용할 인자들을 적은 것
console.log(mike);
// 'name' : 'mike', 'birth' : 'May', 'occupation' : 'singer'

update.call(mike, 'May', 'singer');
console.log(mike);

위 코드에서 this로 사용할 mike라는 객체를 인자로 넘기면 이 해당함수는 update함수가 mike 객체의 메서드인 것 처럼 사용할 수 있다. apply는 매개변수로 인자 리스트 즉 배열을 전달한다.. 'this'에 대한 공부

자바스크립트에서 함수도 객체이며(일반객체처럼 취급 될 수 있다) "값"이다.

함수는 값이기 때문에 변수, 객체, 배열, 함수의 리턴값, 함수의 인자값이 될 수 있다.

- 변수

데이터를 저장할 수 있는 공간으로 변할수 있는 값이다.

변수 명명 규칙

1. 첫글자로 달러($), 언더바(_), 알파벳이 와야한다.
2. 두번째 글자부터는 숫자도 가능하다.
3. 자바스크립트 예약어를 사용할 수 없다.(var, let,...)
4. 띄어쓰기가 불가하다.
5. camelcase표기법을 권장한다.

함수가 변수에 담길 때
function a(){} => var a = function(){}
// 함수의 정의가 a 변수에 담겼으며 함수가 값으로 쓰인 것

- 객체

객체는 key, value로 구성된다. 이런 key, value의 쌍을 property라고 하며 property는 어떠한 값을 나타내기 때문에 함수가 들어갈 수 있는 것이다. => 객체의 property값이 함수일 때 method(메소드)라고 한다.

객체의 사용

• []대괄호 사용 => console.log(obj['a']);
• . 점사용 => console.log(obj.a); //단, 인덱스 문자열이 변수명명 규칙에 맞는 경우에 한해

- 배열

첫번째 요소, 두번째 요소, 세번째 요소 등 순서가 있는 컬렉션이 필요할 때 사용한다. 배열의 index값에 함수가 들어갈 수 있다.

var process = [
    function(x){ return x + 10 }, // 배열의 요소로 함수가 들어감.
    function(x){ return x * x },
    function(x){ return x / 2 },
]

- 함수의 리턴값

함수의 반환된 결과 값을 return이라 하며, return은 값을 반환한다는 의미이므로 '값'의 자리에 함수가 들어갈 수 있다.

function f(매개변수){
    ~~~~~~~~
}
return f[매개변수]

- 함수의 인자값

function cal (func, num){ // 첫번째 인자 : func, 두번째 인자 : num
    return func(num); // 괄호 = 함수를 호출한다는 뜻
}
function increase (num){
    return num + 1 ;
}
console.log(cal(increase, 1));

=> console문을 보면 cal();함수에 첫번째 인자로 increase, 두번째 인자로1을 넣는데, cal();함수는 func, num가 각각 첫번째, 두번째 매개변수이므로 func = increase, num = 1이 들어가게 되고 return increase(1);이 실행된다. 여기서 increase(num); 이라는 함수에 num=1을 넣어 실행하면 1+1인 2가 된다.

결과적으로 increase라는 함수의 이름이 cal이라는 함수의 인자로 전달이 되었고 호출되었다.

이렇게 함수의 인자로 함수가 들어가는 경우를 콜백이라고 한다.

- 클로저

내부함수가 외부함수가 포함하고 있는 변수에 접근할 수 있는 것을 가르킨다.

function outter() {
  var title = 'coding everybody'; // 외부함수에 정의 되어 있는 지역변수
  function inner() {
    console.log(title);
  }
  inner();
}

정의된 변수를 사용할 수 있는 소스코드의 집합을 scope라고 하며, 자바스크립트에서 함수를 선언할 때마다 생성되는 것을 scope라고 한다.

내부 scope에서 외부 상위 scope의 변수에 접근이 가능하도록 접근할 때 연결 형식으로 만들어진 것을 scope chain 이라고 한다.

스코프(scope)

• 함수레벨스코프 : 함수 내부에 선언된 변수만 지역변수로 취급한다.(if,for, while,..등 {...} 코드블럭 내부에 선언된 변수는 전역변수로 취급한다.

• 블록레벨스코프 : 함수 내부는 물론, if문이나 for문등의 코드블럭{...}에서 선언된 변수도 지역변수로 취급한다.)

=> var : 함수레벨스코프 / let,const : 블록레벨스코프

호이스팅

함수가 실행되기 전, var변수 또는 함수 선언들이 스코프내의 최상단으로 올라가 읽히는 것이다.

console.log(a);
var a = 10;
console.log(a);

자바스크립트는 위에서 아래 순서대로 코드를 실행한다. 뒤에 선언된 변수 a가 앞에서 참조되었음에도 실행이 된다. 그 이유는 변수 호이스팅이 발생했기 때문이다. 함수가 실행되기 전 자바스크립트가 선언을 호이스팅한 것이다. =>var는 호이스팅되며 let과 const도 호이스팅이 되지만 방식이 다르다.

var, let, const 차이

- 중복선언 가능여부

• var - 중복선언이 가능하다.(이 경우 마지막에 할당된 값이 변수에 저장된다.)
• let, const - 중복선언이 불가능하다.(이미 선언한 변수를 다시 선언할 경우 에러 발생)

- 재할당 가능여부

• var, let - 변수의 값의 재할당이 가능하다.(변수 선언 및 초기화 이후 반복해서 다른 값을 재할당 할 수 있다.)
• const - 값의 재할당이 불가능한 상수이다.(변하고 싶지 않은 값들을 만들 때 사용)

  var a = 5;
  a = 4;
  a = 3;
  let b = 1;
  b = 2;
  b = 3;
  const c = 10;
  c = 15; // 이미 선언되었다는 에러

  - 변수 스코프

• var - 함수레벨스코프 : 함수내부에 선언된 변수만 지역변수로 한정, 나머지는 모두 전역변수로 취급한다.
• let, const - 블록레벨스코프 : 함수 내부는 물론 모든 코드블럭{}에서 선언된 변수를 지역변수로 취급한다.

- 변수 호이스팅 방식

• var - 변수 선언 -> undefined로 정의(초기화)함 => 선언과 초기화가 동시
• let, const - 변수 선언 -> 선언만 하고 정의(초기화)는 하지 않음 => 선언과 초기화가 분리 => 그래서 let,const도 호이스팅이 발생하긴 하지만 값을 참조할 수가 없어서 호이스팅이 발생하지 않은 것처럼 보인다. ex)

  let a = 10;
  if(true){
    console.log(a);
    let a = 20;
  }

  전역변수 a가 있음에도 지역변수 앞에서 참조시 에러가 발생한다. 전역변수와 같은 이름의 지역변수를 선언하면 지역변수가 전역변수보다 우선순위가 되기 때문에 지역변수 a의 선언이 호이스팅되었고 값은 참조 되지 않아 a에 접근할 수 없게 된다.

유효범위(Scope)는 변수의 수명을 의미한다. 변수는 유효범위가 존재하는데 전역변수 또는 지역변수로 나뉜다.

1) 전역변수

    var vscope = 'global';
    function fscope(){
        console.log(vscope);
    }
    fscope();
    // 결과 : 'global'

함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수는 스크립트 전체에 접근이 가능한 변수이다. 함수 fscope()내에서 vscope을 호출 했을 때 함수 내에서는 해당 변수가 없었기 때문에 거슬러 올라가 밖에서 선언된 vscope의 값 global이 반환된 것이다.

2) 지역변수

    function fscope(){
        var vscope = 'local';
        console.log(vscope);
    }
    fscope();
    // 결과 : 'local'

vscope 이라는 변수가 함수 내에서 선언되었다. 이는 작성된 지역에서만 사용될 수 있는 변수로 지역변수가 된다.

    function fscope(){
        var vscope = 'local';
        console.log(vscope);
    }
    console.log(vscope);
    // 결과 : undefined

지역변수는 작성된 함수 내의 지역에서만 접근이 가능하기 때문에 만약 밖에서 vscope의 값을 호출 한다면 undefined가 뜨게 된다.

자바스크립트의 지역변수는 함수에서만 유효하다.

var

var를 쓰는 것과 쓰지 않는 것의 차이

    var vscope = 'global';
    function fscope(){
        vscope = 'local';
        console.log(vscope);
    }
    fscope();
    console.log(vscope);

결과는 둘 다 local이 된다.

함수 밖에서도 vscope의 값이 local인 이유는 함수 fscope의 지역변수를 선언할 때 var를 사용하지 않았기 때문이다. var를 사용하지 않은 지역변수는 전역변수가 된다. 따라서 " vscope = 'local'; " 에서 전역변수의 값을 local로 변경하게 된 것이다.

다시말해, 함수 내에서 var를 빼고 작성하게 되면 이미 작성된 변수의 값을 찾아 거슬러 올라가며, 일치하는 전역변수를 찾아 이를 변경한 것이다.

실제로 수많은 변수들이 작성되고, 함수에 따라 같은 변수명이어도 다른 값을 지니거나 필요로 할 수 있기 때문에, 전역변수를 사용해서 계속 활용하고자 할 경우 의도치 않는 변수를 불러올 가능성이 있다.

그래서 어떠한 함수 내에서 변수를 사용하고자 할 때는 이미 밖에서 선언된 것이 있더라도 되도록 지역변수를 선언하는 것으로 혼란을 방지하고자 하는 것이다.

    function a(){
        var i = 0;
    }
    for(var i = 0; i < 5; i++){
        a();
        console.log(i);
    } // for문 안에서 i는 전역변수

위의 코드에서는 함수 내에 var를 붙여 변수를 선언하여 지역변수가 되었고 때문에 아래 for문의 i에 영향을 주지 않는다. 그러나 var를 작성하지 않았다면 i=0이라는 전역변수가 되어 for문으로 a()를 실행하면서 i=0으로 만들기 때문에 계속 i<5가 되어 무한히 반복하게 된다.

이렇게 전역변수를 사용할 경우 반복문에서 종료조건을 걸었음에도 무한히 반복되는 오류가 발생할 수 있다.

전역변수 사용

1) 객체의 속성

불가피하게 전역변수를 사용해야 하는 경우 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법이 있다.

    var MyApp = {}
    MyApp.calculator = {
        'left' : null,
        'right' : null
    }  
    MyApp.calculator.left = 10;
    MyApp.calculator.right = 20;
    function sum(){
        return MyApp.calculator.left + MyApp.calculator.right;
    }
    console.log(sum());
    // 결과 : 30

2) 익명함수

익명함수를 이용해 전체를 감싸준 후 뒤에 ()를 붙여 바로 실행시키는 방법이다. 이렇게 하면 MyApp은 익명함수의 지역변수가 되는 것이다.

    (function(){
      var MyApp = {}
      MyApp.calculator = {
          'left' : null,
          'right' : null
      }
      NyApp.coordinate = {
          'left' : null,
          'right' : null
      }
      MyApp.calculator.left = 10;
      MyApp.calculator.right = 20;
      function sum(){
          return MyApp.calculator.left + MyApp.calculator.right;
      }
      console.log(sum());
    // 결과 : 30
  }())

정적 유효범위

자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖는다. 이러한 유효범위의 방식을 정적 유효범위(static scoping)/렉시컬 스코핑(lexical scoping)이라고 한다.

    var i = 5; // 전역변수
    function a(){
        var i = 10; //지역변수
        b();
    }
    function b(){
        console.log(i);
    }
    a();

var i=5;는 전역변수이다. a()안의 i는 함수 내 지역변수이다.

코드를 보면 a()함수 안에서 다시 b()가 선언되었다. 이때 함수b()안에서 console.log(i)의 i는 값을 찾아 거슬러 올라간다. 그리고 자신의 블록을 벗어났을 때 가장 먼저 만나는 i는 전역변수 i = 5이기 때문에 b();의 결과는 전역변수 5의 값을 갖는다.

즉, 함수가 호출된 시점(사용될 때)이 아닌 선언된 시점에서 유효범위를 갖는다.

함수의 용도

1) 값으로서의 함수

JavaScipt에서는 함수도 객체이며 일종의 값이다. JavaScipt에서는 함수가 값이 될 수 있다.

    function a() {}

이것은 a라는 변수에 담긴 함수이다. 따라서 var a = function(){}이라 할 수 있고, 함수 a는 변수 a에 담겨진 값이다.

이처럼 함수는 변수에 담길 수 있을 뿐 아니라 객체의 값으로도 담길 수 있다.

    a = {
        b : function() {}
        }

b는 key값을 지니면서 변수의 역할을 한다. 이런것을 속성(property)라고 하며 이 속성에 담긴 값이'함수'라면 이것을 "메서드"라고 한다.

객체 안에 들어있는 함수의 값을 "메서드"라고 부른다.

2) 인자로서의 용도

    function cal(func, num) {
        return func(num)
    }
    function increase(num) {
        return num+1
    }
    console.log(cal(increase, 1));

다시 해석해 보자면

    function cal(increase, 1) {
        var func = increase(1) {
            return 1+1
        }
        // = func(1) => 2
    }

increase라는 함수가 인자로 들어가 func라는 변수에 담겼고 num에 1이 들어가며 func(1)을 호출하는데 func(1)은 increase(1)이므로 값은 2가된다.

3) 배열로서의 함수

    var process = [
        function(input){ return input + 10;},
        function(input){ return input * input;},
        function(input){ return inpur / 2;}
    ];
    var input = 1;
    for(var i = 0; i < process.length; i++){
        input = process[i](input);
    }
    console.log(input);

process라는 배열의 index(0,1,2)값에 각각 다른 함수가 값으로 들어가 있다. for문에서 process.length조건에 따라 i가 0~2까지 진행되며, 각 index의 함수를 순서대로 실행한다. input의 값은 처음 1로 선언되었고 반복문이 순서대로 실행됨에 따라 input의 값은 변한다. 순서대로 11, 121, 60.5가 되면서 console값은 60.5가 된다.

이렇게 변수, 매개변수, 리턴값 등 다양한 용도로 쓰일 수 있는 데이터를 first-class citizen(object)처럼 부른다. 1급 객체

콜백(callback)

함수의 인자로 함수가 사용되는 경우를 콜백(callback)이라고 한다.

var numbers = [20,10,9,8,7,6,5,4,3,2,1];
var sortfunc = function(a,b){ // sort라는 메소드를 실행될 때 원소들을 비교하는 것
if(a>b){
    return 1;
    } else if(a<b){
        return -1;
      } else{
          return 0;
        }
}
console.log(numbers.sort(sortfunc));

위 예제를 보면 sort()라는 메소드의 인자로 sortfunc()라는 함수가 들어간다.

이때 함수의 인자로 쓰인 sortfunc함수가 콜백함수가 되고, 이 콜백의 결과가 인자로 들어가며 sort()의 결과가 결정된다.

비동기 처리

쉽게 얘기하자면 동기처리는 매 작업을 처리할 때 항상 첫단계부터 실행하는 것이고, 비동기처리는 필요한 단계에서만 처리를 실행하는 것이다.

그 예시로 홈페이지의 알림창을 보면 된다. 우리에게 알림이 +9가 떴다고 하자. 우린 이걸 확인하기 위해 알림창을 누른다. 그러고 나면 알림은 다시 0이 된다.

이때 홈페이지는 새로고침(reload) 되지 않고 알림창만 떴다가 닫힌다. 이것이 비동기 방식인 것이다. 동기방식이었다면 우리가 알림창을 눌렀을 때 홈페이지가 처음부터 불려오며 리로드되고, 알림창을 닫았을 때 또 다시 처음부터 불려왔을 것이다.

그러나 비동기 방식을 사용했기 때문에 홈페이지 전체를 불러올 필요없이 필요한 부분의 정보만이 처리되었다.

Ajax

JS에서는 Ajax를 쓸 때 비동기 처리를 할 수 있다. Ajax

아래 예시에서는 jQuery를 이용한 문법으로 Ajax를 이용했다.

$.get();    // jQuery에서의 Ajax사용 문법

클로저(closure)

내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.

1) 내부함수 / 외부함수

function outter() {
  var title = 'coding everybody'; // 외부함수에 정의 되어 있는 지역변수
  function inner() {
    console.log(title);
  }
  inner();
}

outter라는 함수 안에 inner라는 함수가 작성되었다. 이때 inner를 내부함수, outter를 외부함수라고 한다.

inner함수 내용을 보면 console문이 title을 불러오는데 inner내에는 존재하지 않는다. 그러면 그 바깥으로 건너가 찾게되고, var title을 발견하면 이를 찾아불러온다.

2) 클로저

이렇게 내부함수에서 외부함수에 있는 지역변수에 접근하는 것을 클로저(closure)라고 한다.

여기서 더 나아가 외부함수의 실행이 끝나고 소멸한 뒤에도 내부함수가 외부함수의 변수에 접근할 수 있는 이것이 클로저인 것이다.

function outter() {
  var title = 'coding everybody';
  return function() {
    console.log(title);
  }
}
var inner = outter();
inner()

외부함수의 outter내에 return 값으로 내부함수를 작성하였다. return을 하였기 때문에 이는 실행이 종료된 상태라 할 수 있다.

그런데 위 예문을 실행해보면 'coding everybody'가 뜬다.

이것은 클로저의 특성으로, 클로저는 내부함수가 외부함수의 값에 접근할 수 있을 뿐 아니라 외부함수가 종료된 이후에도 내부함수를 통해 접근할 수 있는 것이다.

3) 클로저의 응용

var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(){
        return i;
    }
}
for(var index in arr) {
    console.log(arr[index]());
}

위 예문을 보면 arr라는 배열에 첫번째 for문을 돌려서 i가 0~4인동안 반복하고, 해당 원소에는 return i를 하는 함수를 담았다.

그리고 그 아래 for문에서 arr 배열의 index만큼 반복시켜 해당 index에 해당하는 원소의 함수를 실행시켰다. 그렇다면 우리가 원하는 결과는 이전 return i에 따라 console창에 0~4이 출력되어야 할 것이다.

하지만 원하는 결과가 나오지 않는다.

이유는 첫번째 for문에서의 함수가 return하고자 하는 i는 외부함수의 지역변수가 아니기 때문이다. 즉, 접근이 불가하다.

이를 원하는 결과가 나오도록 수정

var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(id) {
        return function(){
            return id;
        }
    }(i);
}
for(var index in arr) {
    console.log(arr[index]());    // 결과 : 0, 1, 2, 4
}

위 코드를 보면 첫번째 for문에서 return i를 하던 함수 바깥에 외부함수를 만들고 바로 실행을 시켰다. 그리고 i를 받아 매개변수 id에 들어갈 수 있도록 하였다.

function(id) { ~~~ }(i);

이렇게 하면 외부함수의 id=i가 되었고, 그 덕에 내부함수에서 매개변수 id에 접근해 원하던 대로 i(=id)를 return할 수 있게 됐다.

이처럼 원래는 접근하지 못하던 값에 클로저를 이용하면 접근할 수 있게 된다.

이렇게 분리되는 코드의 부품을 '모듈'이라고 하며 이 과정을 '모듈화'라고 한다.

모듈(module)

본인이 사용하는 환경에 따라서 그 환경에 맞는 모듈화 방법을 익히는 것이 중요하다.

모듈화 장점

• 자주 사용되는 코드를 별도 파일로 만들어 재활용할 수 있다.
• 코드를 수정 할 때 필요한 로직을 빠르게 찾을 수 있다.
• 필요한 로직만을 로드 해 메모리 낭비를 줄일 수 있다.
• 한번 다운로드 된 모듈은 웹브라우저에 의해 저장되기 대문에 로드할 때 필요한 시간과 네트워크 트래픽을 절약할 수 있다.

라이브러리

라이브러리는 모듈과 비슷한 개념이라고 할 수 있다. 모듈이 프로그램을 구성하는 작은 부품과 같은 로직을 의미한다면, 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 코드들의 집합을 의미한다.

정규표현식

정규표현식은 문자열에서 특정한 문자를 찾아내거나 패턴화하여 다른 텍스트로 치환 할 때 사용하는 도구이다. 긴 작업량을 한 줄로 끝낼 수 있다. 정규표현식은 하나의 언어이면서, JS안에 속해있는 기능이라 할 수 있다.

정규표현식 생성

정규표현식은 두가지 단계로 이루어진다.

1) 컴파일 : 원하는 대상을 찾는, 즉 패턴을 찾는 단계

2) 실행 : 찾은 대상에 대한 구체적인 작업을 하는 단계