async

async란? AsyncFunction 객체를 반환하는 하나의 비동기 함수를 정의한다. 암시적으로 promise를 사용해 결과를 반환하는 것이다.

function fetchUser() {
    //do network request in 10 secs...
    return "오복";
}
const user = fetchUser();
console.log(user);

이렇게 시간이 걸리는 작업을 하는 경우, js는 원래 동기 언어이기 때문에 저 작업이 끝나는 동안 다른 작업을 수행할 수 없다. 그래서 비동기 처리를 해야 하는데, 이걸 promise로 만든다면

function fetchUser() {
    //do network request in 10 secs...
    return new Promise((resolve, reject) => {
        resolve("오보깅");
        });
}
const user = fetchUser();
user.then(console.log);
console.log(user);

이걸 async로 변경하면 어떨까?

async function fetchUser() {
    //do network request in 10 secs...
    return "오보깅";
}
const user = fetchUser();
user.then(console.log);
console.log(user);

function 앞에 async를 달아주면 자동으로 promise를 만들어준다니! 훨----씬 간결해진 것을 확인할 수 있다.

await

await란? promise를 기다리기 위해 사용한다. async function 내에서만 사용이 가능하다.

배가 고프니까 바나나랑 사과를 따와보자.

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
    }

async function getApple() {
    await delay(3000);
    return "apple";
    }

async function getBanana() {
    await dealay(3000);
    return "banana";
    }

이렇게 3초를 기다리면(await) 바나나와 사과를 획득할 수 있다. 이걸 같이 따오는 함수를 만들어보자.

function pickFruits() {
    return getApple().then(apple => {
        return getBanana().then(banana => `${apple} + ${banana}`);
        });
    }

pickFruits().then(console.log);

흡사 콜백 지옥을 연상케 한다... async와 await를 사용해 바꿔보자.

async function pickFruits() {
    const apple = await getApple();
    const banana = await getBanana();
    return `${apple} + ${banana}`;
    }

getApple(), getBanana()가 일을 끝낼 때까지 await 하고 둘이 같이 return 해 줘! 확실히 이전의 코드보다 직관적인 걸 확인할 수 있다.

근데 getApple도 getBanana도 3초씩 걸리면 3초 걸려 사과 받고 3초 걸려 바나나 받고... 비효율적이다. 이 두 과정이 연관되어있지 않기 때문에 기다리지 않게끔 바꿔주자.

async function pickFruits() {
    const applePromise = getApple();
    const bananaPromise = getBanana();
    const apple = await getApple();
    const banana = await getBanana();
    return `${apple} + ${banana}`;
    }

3초만에 바나나와 사과를 같이 따올 수 있게 됐다! 그렇지만 이것도 코드가 너무 난잡하지 않나? promise의 다른 api를 활용해보자.

await 병렬 처리

promise에 내장되어 있는 all() api를 사용해보자. all api는 promise 배열을 전달할 경우 모든 promise들이 병렬적으로 다 받을 때까지 모아주는 api다.

function pickAllFruits() {
    return Promise.all([getApple(), getBanana()]).then(fruits =>
    fruits.join(' + ')
    );
}
pickAllFruits().then(console.log);

getApple, getBanana라는 promise를 배열로 묶어서 얘네가 다 받아질 경우 fruits에 모아주는 것이다. 이때 배열을 묶어주는 join을 사용한다.

그 뒤 pickAllFruits이 성공적으로 수행한다면(then) console.log를 수행하게 하는 것이다.

한 가지 기능을 추가해보자. 바나나와 사과 중 먼저 딸 수 있는 선착순 과일 1개를 받아오고 싶다면?

function pickOnlyOne() {
    return Promise.race([getApple(), getBanana()])
}

pickOnlyOne().then(console.log);

race는 먼저 처리된 걸 가져오는 api다. 위의 코드는 바나나와 사과에 속도 차이가 없으나 속도 차이가 있는 경우 유용하게 사용이 가능하다.

Promise란? 자바스크립트에서 제공하는 비동기 처리를 위한 object로 정해진 장시간의 기능을 수행한 뒤 성공(메시지와 결과값) 혹은 에러를 전달해준다.

마치 펀딩처럼 미리 결제해두고 이후에 상품을 받아보는 것처럼! promise는 두 가지에 초점을 맞춰야 한다.

• state 기능 수행 중인지 기능 수행을 마친 뒤 성공했는지 실패했는지 등의 상태 pending(수행 중) -> fulfilled(수행 완료) or rejected(수행 실패)

• producer vs consumer 우리가 원하는 데이터를 제공하는 사람 vs 데이터를 사용하는 사람

코드로 알아보자. 우선 promise를 만드는 코드는 이러하다. 클래스이기 때문에 new를 달아주는 것을 잊으면 안 된다.

const promise = new Promise((resolve, reject) => {
    });

promise의 생성자는 executor라는 콜백 함수를 전달해 줘야 하는데, 이 콜백 함수는 두 가지의 다른 콜백 함수를 받는다.

• resolve 기능을 정상적으로 수행한 뒤 결과를 전달하는 콜백 함수
• reject 기능을 전달하다가 문제가 생겼을 때 호출하는 콜백 함수 promise의 executor는 바로 실행되기 때문에 불필요한 네트워크 통신을 만들고 싶지 않다면 주의해야 한다.

producer

어떤 값을 수행한 뒤 오복이(우리 집 강아지)라는 값을 가져오는 producer를 만들어보자.

const promise = new Promise((resolve, reject) => {
    console.log('blah blah');
    setTimeout(() => {
        resolve('오보깅');
        resect(new Error('no network'));
    }, 2000};
});

이걸 이용하는 코드도 추가해 보자.

consumers: then, catch, finally

promise
  .then((value) => {
      console.log(value);
  })
  .catch(error => {
      console.log(error);
  });
  .fianlly(() => {
      console.log('finally');
  });

• then: 성공했을 때 수행할 행동을 관리한다.
• catch: 실패했을 때 수행할 행동을 관리한다.
• finally: 성공과 실패에 관계없이 무조건 수행할 행동을 관리한다.

그럼 이제 promise를 chaining 해 보자.

Promise chanining

const fetchNumber = new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
});

fetchNumber
    .then(num => num*2)
    .then(num => num*3)
    .then(num => {
        return new Promise((resolve, reject) => {
            setTimeout(() => resolve(num-1), 1000);
        });
    })
    .then(num => console.log(num));

then은 값을 바로 전달할 수도 있고 또 다른 promise를 전달할 수도 있다. 결과는, 3초 뒤 5가 출력된다.

이렇게 promise를 chaninig 했을 때는 에러의 핸들링이 굉장히 중요하다.

닭을 받아오고 닭에게 달걀을 얻고 요리하는 기능을 만들어보자. 우선 각 기능별 prommise가 필요하다.

const getHen = () =>                //닭 받아오기
    new Promise((resolve, reject) => {
        setTimeout(() => resolve('닭'), 1000);
    });
const getEgg = hen =>                //달걀 받아오기
    new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${hen} => egg`), 1000);
    });
const cook = egg =>                    //요리하기
    new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${egg} => food`), 1000);
    });


getHen()
  .then(hen => getEgg(hen))  
  .then(egg => cook(egg))
  .then(food => console.log(meal));

이때 받아오는 value가 하나의 다른 함수인 경우 .then(GetEgg)로 간결히 작성할 수 있다.

getHen()
    .then(getEgg)
    .then(cook)
    .then(console.log);
    .catch(console.log);

달걀이 떨어졌을 때 다른 재료를 받아올 수 있게 해보자.

getHen()
    .then(getEgg)
    .catch(error => {
        return 'bread';
        })

then(getEgg) getegg를 했다면 egg를 전달하지만 아닐 경우 error를 catch 하고 계란 대신 빵을 리턴해준다. 이런 식으로 promise를 연결해 chain을 만들고 에러를 핸들링하면 콜백 지옥보다 훨씬 보기 간결하고 유지보수성도 높은 코드를 완성할 수 있다.

동기(Synchronous)? 호이스팅 된 이후, 코드가 하나하나씩 동기적으로 처리되는 언어다. 서버에서 요청을 보낸 뒤 해당 요청에 대한 응답이 돌아올 때까지 다른 작업을 수행할 수 없다.

console.log(1);
console.log(2);
console.log(3);

결과는, 1 2 3 코드가 위에서부터 아래로 순차적으로 실행되는 것을 확인할 수 있다.

비동기(Asynchronous)? 요청을 보냈을 때 응답이 언제오든 다음 작업을 수행할 수 있다.

setTimeout이라는 web api로 예시를 들어보자. setTimeout은 내가 지정한 시간이 됐을 때 callback 함수를 전달해주는 api로 Timehandler로 callback 함수를 지정하고 시간을 지정해주는 timeout 인자가 있다. 이때 시간의 단위는 ms로 1초를 표현하고 싶다면 1000으로 지정해 줘야 한다.

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

결과는, 1 3 2 동기적 처리였다면 1을 출력하고 1000ms를 기다리고 2를 출력하고 3을 출력했을 텐데, 비동기 처리이므로 1초를 기다리는 동안 밑에 있는 2를 출력한 것이다.

그렇다면 비동기적인 처리를 위해 콜백 함수를 달아 콜백 지옥을 체험해보자!

HTTP란? Hypertext Transfer Protocal의 약자로 Hypertext를 주고받을 수 있는 규약이다.

클라이언트가 서버에게 data를 request(요청)할 수 있고 서버가 이에 response(응답)할 수 있는 방식이다. 이떄 Hypertext는 비단 웹사이트에서 이용되는 링크 뿐만 아니라 전반적으로 쓰이는 문서, 이미지 등의 리소스를 포함한다.

이렇게 서버에게 데이터를 요청해 받아오는 방법으론 AJAX가 있다.

AJAX란? Asynchronous Javascript and XML의 약자로 웹페이지에서 서버에게 동적으로 데이터를 주고받을 수 있는 기술이다.

그럼 이때 XML은 뭘까?

XML이란? HTML처럼 데이터를 표현할 수 있는 방법 중 하나이다.

그러나 XML은 불필요한 태그가 과도하게 필요해 가독성이 떨어지고 파일의 사이즈가 커진다. 이를 대체하기 위해 나온 것이 바로 JSON이다.

JSON이란? JavaScript Object Notation의 약자로 key와 value로 이뤄진 데이터 포맷이다.

JSON은 브라우저 뿐만 아니라 모바일에서 서버와 데이터를 주고받을 때, 서버와 통신하지 않아도 object를 file system에 저장할 때도 많이 사용된다. 그렇다면 JSON의 특징은 무엇일까?

• 데이터를 주고받을 때 사용할 수 있는 가장 간단한 포맷이다.
• 텍스트를 기반으로 해 가볍고 가독성이 좋다.
• 데이터를 서버와 주고받을 때 직렬화하기 위해 사용한다.
• 컴퓨터 언어나 플랫폼에 제약을 받지 않고 대부분의 언어에서 사용 가능하다.

어떻게 object를 직렬화해서 json으로 변환하고 직렬화된 json은 어떻게 다시 object로 변환하지? 코드로 JSON을 쓰고 .을 찍으면 parse, stringify 두 가지가 나온다.

배열 -> JSON

stringify는 object를 json으로 변환할 수 있다.

json = JSON.stringify(['apple', 'banana']);
console.log(json);

결과는, ["apple", "banana"]

배열 타입처럼 보이는 json으로 변환되어 나온다.

Object -> JSON

const puppy = {
    name: '오복이',
    color: 'brown',
    size: null,
    bite: () => {
        console.log(`${name}이 물었다!`);
        },
    };

json = JSON.stringify(puppy);
console.log(json);

결과는, {"name":"오복이","color":"brown","size":null}

object 타입처럼 보이는 json으로 나오지만 bite라는 함수는 변환되지 않은 것을 확인할 수 있다. 함수는 object에 있는 data가 아니라 제외된 것이다. symbol처럼 js에만 있는 특별한 데이터 역시 제외된다.

이때 json으로 변환되는 걸 더 통제하고 싶으면 어떡하지?

Q. puppy object에서 name만 json으로 변환하고 싶어요! A. 그럼 원하는 property 이름만 전달하세요!

json = JSON.stringify(puppy,["name"]);

결과는, {"name": "오복이"} 이렇게 해당하는 property만 변환해준다.

혹은 callback 함수를 사용할 수도 있다.

json = JSON.stringify(puppy, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return value;
});

이렇게 콜백 함수의 형태를 갖춘 뒤 조작하고 싶은 부분을 조작해주면 된다. 예시를 들어보자. "key에 name이 들어오면 멍멍이라고 설정하고 key가 name이 아닌 경우엔 원래의 value를 사용하고 싶어!"

json = JSON.stringify(puppy, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? '멍멍이' : value;
});

결과는, {"name":"멍멍이","color":"brown","size":null} name의 value가 변경되어 json으로 변환된 것을 확인할 수 있다.

JSON -> Object

json을 object로 변환할 때는 parse(json)이 사용된다.

JSON.parse()란? JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성하는 객체이다. 선택적으로, reviver 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있다.

const puppy = {
    name: '오복이',
    color: 'brown',
    size: null,
    bite: () => {
        console.log(`${name}이 물었다!`);
        },
    };
json = JSON.stringify(puppy);
const obj = JSON.parse(json);
console.log(obj);

object에 parse라는 api로 변환하고자 하는 json을 전달하면 된다. 결과는, {name: "오복이", color: "brown", size: null}

그럼 함수도 한 번 찍어보자.

obj.bite();

결과는, Uncaught TypeError: obj.jump is not a function at 아까 함수는 object에 있는 data가 아니라 제외됐는데 그걸 다시 object로 만들었으니 당연히 포함되지 않는 것을 확인할 수 있다.

for of

for of 반복문은 배열의 원소를 하나씩 꺼내온다. array만 반복이 가능한 forEach와 다르게 내부에 [Symbol.iterator]를 가진 객체라면 어떤 객체든 반복할 수 있는 강력한 반복문이다.

for in

for in 반복문은 배열의 순서(index)를 가져온다. 일반적으로 Object에 있는 key에 차례로 접근할 때 사용하는데 그 외에는 사용하지 않는 것을 권장한다. 해당 요소뿐만 아니라 prototype chain을 따라 확장 속성들도 함께 접근되기 때문이다.

for(let 인덱스 in 배열){
    }
fot(let 요소 of 배열){
    }
-------------------------
let array = ["가", "나", "다"];

for (let i in array) {
    console.log(`${i}번째 요소는 ${array[i]}`);
}

for (let item of array) {
    console.log(item);
}

예시 코드의 array 배열의 인덱스는 0, 1, 2로 i가 0인 채로 한 번, 1인 채로 한 번, 2인 채로 한 번 반복문을 실행한다. 예시 코드의 array 배열의 요소는 "가", "나", "다"로 item이 "가"인 채로 한 번, "나"인 채로 한 번, "다"인 채로 한 번 실행된다.

forEach

정확히 말하자면 forEach는 반복문이 아니라 함수이다. Array의 Prototype을 상속받은 객체가 사용할 수 있는 함수로, 인자로 함수를 받아 각 배열의 요소에 해당 함수를 적용한다.

참고자료

N-log

변수: 값을 저장할 목적으로 사용하며 이후에 변경될 수 있는 값

상수: 값을 저장할 목적으로 사용하며 이후에 변경할 수 없는 값

ECMAScript6의 등장 이전엔 var로 변수를 선언했다. 그러나 var로 선언한 변수는 중복해서 선언할 수 있고 마지막에 할당된 값을 저장한다.

간단한 코드로 예시를 들어보자.

var num = 10;

if (num == 10) {
    var num = 20;
    console.log("num in if : ", num); // num in if : 20
}

console.log(num); // 20

이러한 경우 if문 밖에서도 변수에 접근이 가능해져 코드를 분석하는데 어려움이 생긴다.

당연히 프로젝트의 규모가 커질수록 개발자는 더욱 헷갈리게 된다. 이를 보완하기 위해 나온 것이 let과 const이다.

위의 예시를 let으로 변경해보자.

let num = 10;

if (num == 10) {
    let num = 20;
    console.log("num in if : ", num); // num in if : 20
}

console.log(num); // 10

if문 안에서 선언된 num에 if문 밖에서는 접근할 수 없다. 이때 scope를 벗어난다고 하는데 scope는 변수의 접근을 결정하는 변수의 범위를 뜻한다.

let

let은 변수 생성 키워드로 변수의 재선언이 불가하나 재할당은 가능하다. 변수명을 헷갈려서 재선언하는 것을 방지하면서도 값을 재할당하고 싶을 때 사용한다.

const

const는 상수 생성 키워드로 변수의 재선언, 재할당 모두 불가능하다.

프로그램을 더 읽기 쉽고 빠르고 안정적으로 만들기 위해 사용된다. 프로그램에서 해당 변수의 값을 다시 바꾸지 않을 예정일 때 사용한다.

const와 let의 사용이 헷갈린다면 일단 const로 선언한 뒤, 이후에 값을 재할당하고 싶을 때 let으로 교체하는 것을 추천한다.

호이스팅이란? 변수 선언은 코드가 실행되기 전에 처리되기 때문에 코드 중 어느 위치에 작성해도 코드 최상위에 선언한 것과 동일하다. 이렇게 변수 선언이 함수 또는 전역 코드 최상위로 이동하는 것을 호이스팅이라고 한다.

다만 호이스팅은 실제로 코드가 최상위로 이동되는 것은 아니고 자바스크립트 parser가 내부적으로 끌어올려 처리하는 것이다.

참조

MDN

객체지향 프로그래밍이란? 모든 데이터를 객체로 취급하고 처리 요청을 받은 객체는 객체 내부에 있는 기능을 갖고 처리한다.

그렇다면 객체 지향 프로그래밍의 특징은 어떤 것들이 있을까?

은닉성

tv를 뜯지 않아도 리모콘으로 필요한 조작을 할 수 있는 것처럼 내부 주고는 private으로 감춰놓고 명령어만 public으로 공개해 밖의 간섭을 방지하고 다른 사람이 만든 클래스의 객체도 뜯어보지 않고 제공되는 기능들을 사용할 수 있다.

상속

유산 상속받듯이 protected나 public으로 지정한 변수와 메소드들을 물려받는 것이다. 부모 클래스가 갖고 있는 것들을 자식 클래스가 상속 받아서 새로운 기능을 더해서 사용할 수 있으므로 자식 클래스에 같은 기능을 중복해 쓰지 않아도 된다는 것이 장점이다.

추상 클래스

추상 클래스에는 abstract가 붙는다. 얘는 강아지라는 동물이야, 얘는 고양이라는 동물이야는 가능하지만 얘는 포유류라는 동물이야라고는 하지 못하는 것처럼 특정 개체를 무엇이라고 부르기엔 너무 추상적이라는 뜻이다. 자식 클래스들의 공통분모 역할만을 위한 클래스이다.

다형성

상속받은 것들에 추가적인 기능을 더해 새로운 형태를 만들어낼 수 있는 성질이다.

인터페이스

상속은 트리구조의 상하관계가 뚜렷해 한 자식이 두 부모에게 상속받기 어렵거나 불가능한 경우가 있다. 이때 사용하는 게 인터페이스로 좀 더 자유롭게 사용이 가능하다.

객체 지향 프로그래밍은 모든 데이터를 객체로 취급하기 때문에 코드의 재사용이 가능하고 분석, 설계의 전환이 쉬우나 처리 속도가 상대적으로 느린 편이고 설계 역시 많은 시간이 소요된다.

그렇다면 함수형 프로그래밍은 뭘까? 왜 나왔을까?

함수형 프로그래밍이란? 자료 처리를 수학적 함수의 계산처럼 취급하고 순수 함수를 강조하는 프로그래밍으로 실행 순서와 관계없어 비절차형이라고도 한다.

순수함수란? 동일한 입력값을 넣었을 때 동일한 입력값을 반환하여 외부에 영향을 받지 않는 함수이다.

그렇다면 순수 함수가 아닌 경우는 어떤 경우일까? 예시로 알아보자.

1. 외부 요인에 따라 리턴 값이 변경되는 경우

   function lorem(a, b){
    return a + b + c;
   }

   이때 c는 외부의 변수로, c로 인해 return값이 달라졌으므로 순수함수가 아니다.

2. 인자를 직접 변경하는 경우

   function lorem(a, b){
    c = b
        return a + b + c
   }

   이때 들어온 인자 b가 c에 이해 변경되어 return 값이 달라졌으므로 순수함수가 아니다. 함수형 프로그래밍은 위의 경우가 아닌 순수함수를 사용해 상태 제어보다 빠른 처리에 초점을 둔 방법이다.

   함수형 프로그래밍과 객체지향 프로그래밍의 차이

   1. 함수 지향 프로그래밍에서는 함수 자체가 일급 객체가 된다. 객체 지향 프로그래밍에서는 클래스(또는 객체)가 일급 객체가 된다.

일급 객체란? 객체를 변수나 데이터에 할당할 수 있고 객체의 인자로 사용할 수 있고 객체의 리턴 값으로 리턴할 수 있는 객체

2. 객체 지향 프로그래밍에서 프로그램이 객체들의 상호작용이라면 함수 지향 프로그래밍은 상태 값을 갖지 않은 함수 값들의 연속이다.

둘 다 반복적인 일을 처리할 기능을 만드는 방법이지만 방식이 다를 뿐이다. 자바스크립트는 공교롭게도 이 둘을 모두 지원한다.

그렇다면 대체 왜 자바스크립트에서 함수형을 쓸까?

함수형 프로그래밍을 했을 때의 핵심적인 기능은

1. Filter
2. Map
3. Reduce
4. Find 등이 있다. ES5부터는 이미
5. Array.prototype.map
6. Array.prototype.filter
7. Array.prototype.reduce
8. Array.prototype.find 등의 메소드들을 이미 지원했다. 하지만 이 메소드들은 key, value의 쌍으로 이뤄진 object 등에선 적용할 수 없다. 이런 답답함들을 해결하기 위해 원하는 대로 기능을 구현하기 위해 함수형을 도입한 것이다.

또한 함수형으로 프로그래밍을 하다 보면 객체 지향 프로그래밍보다 더욱 추상화할 수 있는 요소가 많아지는데 단순 변수에 값을 변화시키는 걸 넘어 조건문, 반복문 등 다양한 것들을 추상화시킬 수 있다. 추상화가 가능하다는 것은 코드의 재사용성이 올라간다는 것이고 당연히 생산성이 좋아진다는 의미이다.

이러한 장점은 Node.js에서도 큰 역할을 한다! 이것에 관해선 자바스크립트 기본을 다진 뒤 node.js 역시 공부할 예정이므로 그때 다시 다뤄봐야겠다.

참고자료

오늘도 끄적끄적 얄팍한 코딩사전

명령형 프로그래밍에 대해 검색하자 선언형 프로그래밍의 예시가 함께 나왔고 이 둘을 비교하며 보자 빠르게 이해되었다.

명령형 프로그래밍이란? HOW 어떻게 할 것인가

선언형 프로그래밍이란? WHAT 무엇을 할 것인가

예시를 들어보자.

이 글을 작성하는 지금은 비오는 새벽으로 부침개가 먹고 싶어졌다. 명령형: 나는 밀가루에 김치를 넣고 반죽을 팬에 부쳐 부침개를 만들어 먹을 것이다. 선언형: 나는 부침개를 먹을 것이다.

명령형 방식은 내가 '어떻게' 할지에 초점을 맞춰 이에 대한 단계를 나열해야 하고 반대로 선언형은 내가 '무엇을' 원하는지에 초점을 맞춘다.

이제 코드로 예시를 들어보자. 다음은 명령형 프로그래밍으로 작성한 예시이다.

function double (arr) {
  let results = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(arr[i] * 2);
  }
  return results;
}

배열을 파라미터로 받고 각 요소들에 2를 곱하는 코드이다. "배열을 파라미터로 받고~ 조건문 안에서~ result 값을 계속 push하고~ " 배열을 반복하는 기능을 수행하는 방법에 대한 단계를 설명하고 있으며 results 값을 바꿔 상태를 변경하고 있다.

이걸 선언형 프로그래밍 방식으로 바꾸면 어떻게 될까?

function double (arr) {
    return arr.map((item => item*2)
}

아까와 달리 어떻게 하는 단계가 아닌 무엇을 하는지에 대해 적은 코드이다. 이렇게 바꾸는 방법을 명령형 방식을 추상화 시켰다고 한다.

그렇다면 추상화는 뭘까?

추상화란? 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려내는 것 마치 책에서 줄거리를 뽑아내듯이!

왜 추상화를 하지?

• 사용자가 낮은 수준의 코드를 작성하지 않기 위해
• 코드의 중복을 방지하고 재사용성을 향상시키기 위해
• 사용자에게 영향을 끼치지 않고 독립적으로 클래스의 내부 구현을 변경하기 위해
• 중요한 세부 정보만 사용자에게 제공해 보안을 향상시키기 위해

그럼 이제 함수지향과 객체지향에 대해 알아보자.

참고 자료

제원's 개발공부 MDN

프로그래밍 패러다임은 너무나 많은 종류가 있다. 구조적 프로그래밍, 비구조적 프로그래밍, 절차지향 프로그래밍,,, 그중 자바스크립트는 다중 패러다임 프로그래밍 언어에 속한다.

자바스크립트는 여러가지의 패러다임을 갖고 있는 언어로 함수형, 명령형, 프로토타입 기반의 객체 지향형이다. 함수형은 ECMAScript에서 람다가 추가되며 지원하기 시작했다.

그렇다면 과연 자바스크립트로 개발할 때 어떤 패러다임에 초점을 맞춰야 할까?

언제 객체 지향으로 프로그래밍을 하고 언제 함수형으로 프로그래밍을 할까? 모든 기능과 기술은 필요에 따라 학습하고 사용한다. 우리는 어떤 것을 필요로 할 때 어떤 패러다임에 초점을 맞춰서 개발해야 할까?

나는 명령형 프로그래밍, 함수형 프로그래밍, 객체지향 프로그래밍의 배경부터 이해해보기로 했다.

선언형 프로그래밍

- 논리형 프로그래밍

- 함수형 프로그래밍

명령형 프로그래밍

- 객체지향 프로그래밍

- 절차지향 프로그래밍

타 프로그래밍 언어는 오류와 예외를 구분하지만 자바스크립트는 모두 오류로 칭한다. 그렇다면 타 프로그래밍 언어에서는 어떤 걸 오류라고 하고 어떤 걸 예외라고 할까?

오류란? 큰 의미로 오류와 예외를 모두 포함한다. 작은 의미로는 프로그램을 실행하기 전에 발생하는 문법적 오류들을 포함한다.

괄호 개수가 다르거나 철자를 잘못 쓴 경우에 오류의 작은 의미에 해당된다.

예외란? 프로그램을 실행하며 발생하는 논리적 오류를 포함한다.

가령 undefined 자료형을 일반적 객체 혹은 함수처럼 다뤘을 때처럼 논리적인 오류가 발생했을 때 예외에 해당된다.

오타는 수정하면 되지만 예외는? 예외의 처리 방법은 기본 예외 처리와 고급 예외 처리로 나뉜다.

기본 예외 처리

간단하게 조건문 등으로 예외가 발생할 경우를 따져 예방한다.

고급 예외 처리

고급 예외 처리 방법은 try catch finally 구문으로 try 키워드, catch 키워드, finally 키워드를 사용해 예외를 처리하는 방법이다.

try {
    예외 발생 시
        { catch (excepthion) {
            여기서 처리한다.
            }    finally {
                여기는 무조건 실행한다.
                }

만약 catch 구문이나 finally 구문이 필요치 않다면 해당 부분을 생략한다.

try {
    예외 발생 시
        } catch (exception) {
            여기서 처리한다.
            }
-------------------------------
try {
    예외 발생 시
        } finally (exception) {
            여기는 무조건 실행한다.
            }

예외 객체

예외가 발생했을 때 어떤 예외인지 알기 위해 사용한다. 예외 객체는 catch 구문의 괄호 안에 들어있는 변수를 나타낸다. 변수이므로 원하는 이름으로 정할 수 있으나 통상적으로 exception을 사용한다.

강제 예외 발생

그렇다면 내가 예외인 상황을 사전에 규정하고 싶은 경우에는 어떻게 할까? 그럴 경우 throw 키워드로 예외를 발생시킨다.

throw '강제 예외';

이 글을 끝으로 기본적인 문법에 대한 정리를 마쳤으므로 자바스크립트의 더 세부적인 사항들을 공부하고자 한다.

생성자 함수: 객체를 만드는 함수

2. let 객체이름 = new Object();

생성자 함수는 이렇게 생겼다. 일반적인 함수와 구분하기 위해 생성자 함수의 이름은 대문자로 시작한다.

function 함수이름(property) {
    this.property = property;
    }

Ex. function Test(name, price) {
    this.name = name;
        this.price = price;
    }

이렇게 생성자 함수를 만든 뒤 new 키워드와 함께 사용해 객체를 생성한다.

function 함수이름(property) {
    this.property = property;
    }

let 객체이름 = new 함수이름(key, value);
------------------------------------------
Ex. function Test(name, price){
    this.name = name;
        this.price = price;
    }

    let snack = new Test("꼬깔콘", 1000);

new 키워드란? new 키워드를 앞에 붙이지 않으면 생성자 함수가 아닌 일반 함수 호출이 된다. 보통의 함수는 return(반환값)을 해야 하는데 new가 없는 상태에서 return도 없다면 일반함수에 return값이 없는 상태이므로 값이 들어가지 않는다.

이렇게 만든 객체는 점 표기법으로 property 값을 읽거나 추가하거나 삭제할 수 있다.

property 값 읽기

user.name // jieun
user.age // 24

property 값 추가하기

user.job = "Dev";

property 값 삭제하기

delete user.hobby;

Prototype

생성자 함수로 만든 객체는 프로토타입이라는 공간에 메소드를 지정해 모든 객체가 공유하도록 만들 수 있다.

대부분의 사람들은 미리 class를 만들어둔다. 하지만 class는 한 번 만들면 변경하지 못한다. 이런 때를 위해 자바스크립트는 프로토타입을 갖고 있다. 프로토타입은 원형이란 뜻인데, 이미 생성한 class를 변경할 수는 없으니 원형을 마치 VR처럼 띄워서 프로토타입을 변경하는 것이다. 해당 문서의 스코프 내에서 실제로 클래스가 변경된 것처럼 사용할 수 있게 만든 것이다.

Prototype을 사용한 method 생성

// 생성자 함수
function User(name, age) {
    this.name = name;
    this.age = age;
}

// 프로토타입에 메소드를 선언

User.prototype.print = funtion(){
    console.log(`${user.name}의 나이는 ${user.age}입니다. `);
    };

 // 객체를 생성
 let user = new User("지은", 24);

 메소드 호출
 user.print();

Object

객체: key와 value로 이뤄진 property들을 담을 수 있는 자료형

Method

메소드: 객체의 property 중 자료형이 함수인 property

객체 생성

객체를 생성하는 방법은 다음과 같다.

1. let 객체이름 = new Object();

2. let 객체이름 = {};

1. let 객체이름 = {};

중괄호{} 안에 property를 넣어준다. property는 콜론(:)을 기준으로 좌측에 key, 우측에 value가 들어간다.

let 객체이름 = {
    key: "value",
    key: "value"
};

마치 key와 value의 쌍들로 배열 만드는 모양새인데, 만약 객체에 메소드를 추가하고 싶다면 어떨까?

다음은 배열로 객체를 만든 예시이다.

let snack = [
    { name: '꼬깔콘',
         price: 1200 },
      { name: '새우깡',
          price: 1200 },
      { name: '고래밥',
          price: 1000 }
       ];

이 객체에 1번의 방법으로 메소드를 추가하면 어떨까?

let snack = [
    { name: '꼬깔콘',
         price: 1200,
            print: function(){
          console.log(`${this.name}의 가격은 ${this.price}이다.`}
          },
      { name: '새우깡',
         price: 1200,
            print: function(){
          console.log(`${this.name}의 가격은 ${this.price}이다.`}
          },
        { name: '고래밥',
         price: 1000,
            print: function(){
          console.log(`${this.name}의 가격은 ${this.price}이다.`}
          }
       ];

this: 객체에 있는 속성을 메소드에서 사용할 경우, 자신이 갖고 있는 속성임을 분명히 표시해야 한다. 이때 사용하는 키워드가 this이다.

??? 이렇게 만들 바에 함수를 빼는 게 낫지 않나??? 함수를 외부로 빼온 예시이다.

let snack = [
    {name: '꼬깔콘', price: 1200},
       {name: '새우깡' ,price: 1200},
        {name: '고래밥', price: 1000}
];

function printSnack(snack){
    console.log(`${snack.name}의 가격은 ${snack.price}이다.`);
}

그러나 여긴 한 가지 문제가 있다. 자바스크립트는 객체 지향 프로그래밍 언어기 때문에 snack.print() 형태로 코드를 작성해야 한다. print()메소드는 snack 객체의 '기능'이기 때문이다. 그래서 자바스크립트는 '생성자 함수'와 '프로토타입'이 있다.

생성자 함수에 관한 내용은 object-2 게시글에 추가하기로 한다.

함수는 내가 다시 쓸 것 같은 기능을 정의해두는 코드의 집합체이다.

나는 이걸 쿠키커터라고 이해하기도 한다. 쿠키를 만들 때마다 커터를 만들 수는 없으니까 쿠키 반죽을 원하는 쿠키 커터로 가공해서 모양있는 쿠키 반죽으로 만들어내는 것이다.

어떤 값을 함수에 넣어서 원하는 처리를 하는데, 이 처리를 다시 또 쓰고 싶을 때 함수로 만들어내는 것이다.

이때 쿠키반죽을 매개변수라고 하고, 가공한 쿠키 반죽을 리턴 값이라고 한다.

return 값이란? 함수에서 결과를 반환할 때 사용한다. return문이 실행되면 코드가 종료된다.

자바스크립트에서 함수를 만들 때는 세 가지 방법이 있다.

1. 익명 함수

익명 함수는 말 그대로 이름을 붙이지 않은 함수이다.

let 함수이름 = funtion(){
    코드
   };

2. 선언 함수

function 함수이름(){
    코드
    };

3. 화살표 함수

화살표 함수 = 람다식 = Arrow Function은 ECMAScript6에서 새롭게 제공하는 함수 선언 방식이다.

let 함수이름 = () = > {
    코드
];

그럼 대체 언제, 어떤 함수를 사용해야 할까? 이걸 선택하기 위해선 함수에 대한 더 많은 이해가 필요하다.

Scope

스코프는 변수나 함수가 작동하는 범위를 말한다.

지역 변수

함수 스코프 내에서만 사용 가능한 변수

전역 변수

어디서나 사용 가능한 변수

함수 안에 변수를 선언하면 그 변수는 해당 함수 내에서만 사용할 수 있다. 이 지역 변수와 전역 변수의 개념은 함수에서도 나타난다. 지역 함수는 함수 스코프 내에서만 사용할 수 있는 함수고 전역 함수는 어디서나 사용 가능한 함수이다.

콜백 함수

자바스크립트에서는 함수를 변수에 저장할 수 있다. 또한 함수를 저장한 변수를 함수의 매개변수로 사용할 수 있는데, 이때 이 매개변수로 쓰이는 함수를 콜백 함수라고 한다.

while 반복문

while(조건){
    실행할 문장;
    }

while 반복문은 가장 기본적인 반복문이다. 조건이 True인 경우, 실행할 문장을 무한 반복한다. 그렇기 때문에 조건을 False로 만들 수 있는 문장이 있어야 한다.

do while 반복문

do while문은 조건을 따지기 전에 문장 하나를 실행하고 조건을 따지는 것이다.

do{
    먼저 실행할 문장;
   } while (조건)

for 반복문

for 반복문은 반복하고 싶은 횟수를 정하고 싶은 경우 사용한다.

for(언제부터; 언제까지; 어떻게;) {
    실행할 문장;
}

for문은 횟수를 정하기 위한 변수가 필요하다. 만약 내가 0부터 10까지 출력하고 싶다면?

let a = 0;

for(a=0; a<11; a++){
    console.log(a);
   }

언제부터? a=0 언제까지? a<11 어떻게? a++ -> a는 0부터, a가 11보다 작을 때까지, a에 1씩 더하면서, 실행할 문장을 실행한다.

제어문이란? 프로그램의 흐름을 제어하는 문장

프로그램의 흐름을 컨트롤하는 문장은 조건문, 선택문, 반복문 세 가지가 있다.

조건문

나는 조건문을 충족하는 조건에 따라 실행할 문장이 달라지는 구조라고 이해한다. 조건문이 True라면 실행할 문장을 실행하는 것이다.

if 조건문

if(조건){
    실행할 문장;
    }
--------------------
if(나 개발자 되면){
    자취할 거야;
    }
--------------------
if( a == 2 ){
    console.log("a는 2입니다.");
    }

if else 조건문

조건이 충족되지 않았을 때 실행할 문장을 추가하고 싶을 때 else를 사용한다.

if(조건){
    실행할 문장;
    } else {
        실행할 문장;
       }
-------------------
if(나 개발자되면){
    자취할 거야;
    } else {
        부모님이랑 살아야지 뭐;
       }
-------------------
if(a == 2){
    console.log("a는 2입니다.");
    } else {
        console.log("a는 2가 아닙니다.");
       }

중첩 조건문

조건문 안에 조건문을 사용하는 방법이다.

if(조건){
    if(조건){
            실행할 문장;
        } else {
                실행할 문장;
 } else { 
         if(조건) {
    실행할 문장;
        } else {
        실행할 문장;
        }
    }
--------------------
if(취업한다면){
    if(개발자라면){
            행복하겠다;
        } else {
                슬프겠다ㅠㅠ;
 } else { 
         if(알바한다면) {
    서비스직은 피해야지;
        } else {
        저는 백수예요;
        }
    }

if else if 조건문

if else if 조건문은 중복되지 않는 세 가지 이상의 조건을 구분할 때 사용한다.

if(a=2){
    console.log("a=2입니다.");
    } else if (a=3) {
        console.log("a=3입니다.");
            else {
                console.log("a는 2도 3도 아닙니다.");

선택문

switch문

switch문은 객관식 문제처럼 어떠한 조건에 대해 해당하는 대답이 정해져있는 경우 사용한다. 변수에 저장된 값과 case의 값이 일치하는 경우 실행할 문장을 실행한다.

swtich(a % 2) {
    case 0:
            console.log("짝수입니다.");
             break;
        case 1:
            console.log("홀수입니다.");
              break;
      }

break 키워드 switch 조건문이나 반복문을 빠져나갈 때 사용한다. 코드를 읽다가 break 키워드를 만나는 경우, 해당 조건문이나 반복문을 벗어난다.

사칙연산자

• 덧셈 연산자 +
• 뺄셈 연산자 -
• 곱셈 연산자 *
• 나눗셈 연산자 /
• 나머지 연산자 %

논리연산자

• 논리 부정 연산자 !
• 논리합 연산자 ||
• 논리곱 연산자 &&

복합 대입 연산자

• 숫자 덧셈 후 대입 연산자 +=
• 숫자 뺄셈 후 대입 연산자 -=
• 숫자 곱셈 후 대입 연산자 *=
• 숫자 나눗셈 후 대입 연산자 /=

증감 연산자

• 후위 덧셈 연산자 변수++
• 전위 덧셈 연산자 ++변수
• 후위 뺄셈 연산자 변수--
• 전위 뺄셈 연산자 --변수

  • 전위 연산자: 문장 실행 전 값을 변경
  • 후위 연산자: 문장 실행 후 값을 변경

자료형 확인 연산자

• typeof : 해당 변수의 자료형을 추출

일치 연산자

• 같은지 비교 ===
• 다른지 비교 !==

연산자의 우선순위

1. ()
2. 단항 연산자(--, ++, !)
3. 산술 연산자(*, /, %, +, -)
4. 비교 연산자(>, >=, <, <=, ==, ===, !==, !=)
5. 논리 연산자(&&, ||)
6. 대입 연산자(=, +=, -=, ==, ===, !=. %=)

동적 언어란?

• 타 언어에서 컴파일 과정 중 수행하는 일들을 런타임(실행 도중)에 수행하는 언어

따라서 변수의 타입을 미리 선언할 필요가 없다. 런타임 도중에 자동으로 파악해줄 것이다. 따라서 한 번 String으로 선언한 변수를 이후에 Number로 재선언하는 것 역시 가능하다.

변수란? 데이터값을 저장하는 공간

다음은 ECMAScript 표준에 명시된 7가지의 자료형이다.

ECMA Script는 자바스크립트를 표준화하기 위해 만들어졌다.

1. Number

Number 자료형은 숫자 데이터를 나타내기 위한 자료형으로 정수 뿐만 아니라 +Infinity, -Infinity, and NaN(Not a number) 역시 표현 가능하다.

2. String

String 자료형은 텍스트 데이터를 나타내기 위해 사용한다.

3. Boolean

Boolean은 논리적 요소를 나타내며 true, false 두 가지 값을 가진다.

4. Undefined

undefinde는 변수에 값이 등록되기 전 기본값을 의미한다. 변수는 선언되었으나 값을 할당하지 않은 경우로 초깃값을 undefined로 가진다.

• 값을 할당하지 않음
• 메서드와 선언에서 변수가 할당받지 않음
• 함수가 값을 return하지 않음

5. Null

Undefined가 미정의라면 Null은 의도적으로 값을 비운 상태이다. 주로 객체를 담을 변수를 초기화할 때 사용된다.

6. Symbol

unique identifier(유일한 식별자)를 만들고 싶을 때 사용한다. 변경 불가능한 기본값으로 객체 속성의 프로퍼티 키로 사용된다. (자바스크립트의 객체 프로퍼티 키는 String과 Symbol만 사용할 수 있음)

7. Objects

1~6의 자료형은 하나의 데이터를 담는 원시형 자료형이라면 objects는 다양한 데이터를 담을 수 있는 객체이다. 객체는 여러개의 property를 담을 수 있다. 이때 property는 한 쌍으로 이뤄진 key와 value를 말한다. 이 객체에 대해선 다음 velog에서 더 자세히 기술하기로 하자.

한 가지의 자료형을 추가하고자 한다.

8. Array

배열(array)은 여러개의 데이터를 한 번에 다룰 수 있는 자료형이다.

let 배열 이름 = [data, data, data]

Ex. let phone = [galaxy note10, galaxy note10+, iphone11, galaxy10]

배열은 인덱스와 요소를 포함한다. 인덱스는 배열이 갖고 있는 data의 번호표이며 0부터 시작한다. 요소란 배열 안의 data 하나하나를 뜻하며 각 배열의 요소를 사용하고 싶을 땐 다음의 형식을 사용한다.

배열이름[index]

Ex. phone[0] ---> galaxy note 10
    phone[2] ---> iphone11

참조

• MDN Web Docs
• 2ssue's dev note
• javascript.info
• javascript.info

JAVA SCRIPT

객체 지향 인터프리터 언어이며 웹 브라우저에서 사용할 목적으로 개발되었다. 프로토타입 기반의 다중 패러다임 언어로 명령어, 객체 지향, 함수 프로그래밍 스타일을 지향한다.

자바스크립트의 활용

1. 웹 클라이언트 어플리케이션 개발
2. 웹 서버 개발(node.js)
3. 모바일 어플리케이션 개발(react native)
4. 데스크톱 어플리케이션 개발(nw.js)
5. 게임 개발(unity script)
6. 데이터베이스 관리(mongoDB)

참고

MDN