jinsangYoo/javascript-basic-grammer-04.md

## javascript-basic-grammer-04.md

      
    Raw
  

              javascript-basic-grammer-04.md
            
          
    개요


javascript 재학습하면서 잊고 있던것, 긴가민가 했던것 재학습하면서 기록

선언적 함수, 익명 함수 비교

선언적 함수


일반적인 함수 사용법

function aa() {
  alert('함수 A');
}
aa();
익명 함수


함수 자료형

var aa = function() { alert('함수 A'); };
var aa = function() { alert('함수 B'); };
aa();
선언적 함수와 익명 함수 차이


익명 함수의 경우 다음과 같이 사용하면 선언하기 이전에 변수를 사용했기 때문에 오류가 발생하고 실행되지 않음

aa();
var aa = function() { alert('함수 A'); };
var aa = function() { alert('함수 B'); };

웹브라우져는 script 태그 내부의 내용을 한줄씩 읽기 전에 선언적 함수부터 읽음

선언적 함수의 경우 다음과 같이 사용하면 2번 -> 3번 -> 1번 순서로 실행됨


// 1
aa();
// 2
function aa() { alert('함수 A'); }
// 3
function aa() { alert('함수 B'); }

위 코드는 3번 함수가 실행됨

선언적 함수와 익명 함수 실행 순서 연습


다음 코드는 선언적 함수가 먼저 생성되고 익명함수가 나중에 생성되어 익명함수가 실행됨

var aa = function() { alert('함수 B'); };
function aa() { alert('함수 A'); }
aa();
매개변수


함수를 호출하는 쪽과 함수를 연결하는 매개가 되는 변수이므로 매개변수
선언되어 있는 매개변수보다 더 많은 매개변수를 전달하면 초과된 매개변수는 무시됨
선언되어 있는 매개변수보다 적은 수의 매개변수를 전달하면 나머지 매개변수는 undefined로 입력됨

가변 인자 함수


매개변수 개수가 변할수 있는 함수
자바스크립트의 모든 함수안에서 arguments가 있음

매개변수의 배열이다.


function sumAll() { 
  alert(typeof(arguments) + ': ' + arguments.length); 
}
sumAll(1,2,3,4,5,6,7,8,9,0);
내부 함수


외부 함수 안에 내부 함수를 정의
단, 내부 함수는 내부 함수를 포함하는 함수에서만 사용할수 있음

function a() {
    function b() {
        return "c";
    }
  alert(b());
}
// a.b(); // 실패: TypeError: a.b is not a function
a();
자기 호출 함수


다른 개발에게 영향을 주지 않게 다음 코드 처럼 함수를 만들어 사용하는 경우가 있음
함수를 생성하자마자 호출하는 이런 함수를 자기 호출 함수 라고 함

(function () {
  // TODO
})();
인코딩, 디코딩


escape()/unescape()

영문 알파벳과 숫자, 일부 특수문자(@, *, -, _, +, ., /)를 제외하고 모두 인코딩
1바이트 문자는 %XX의 형태로, 2바이트 문자는 %uXXXX 형태로 변환


encodeURI()/decodeURI()

escape() 함수에서 인터넷 주소에서 사용되는 일부 특수 문자(:, ;, /, =, ?, &)는 변환하지 않음


encodeURIComponent()/decodeURIComponent()

알파벳과 숫자를 제외한 모든 문자를 인코딩
UTF-8 인코딩과 같음


Infinity, NaN


특별한 숫자

0 으로 숫자를 나누면 Infinity 값이 할당됨
음수를 0으로 나누면 -Infinity 이기 때문에 변수 == Infinity 가 false 임

그래서 isFinite()를 사용해야함


var value = -10 / 0;
if (value == Infinity) {
    alert("Infinity");
}
else {
    alert("not Infinity");
}

변수의 값이 Infinity, NaN인지 체크 하는 함수

isFinite(): number가 무한한 값인지 확인

추가 설명: 유한한 값인지 확인하는 것이다. 유한의 값이면 true, infinity 일경우 false


var value = -10 / 0;
if (isFinite(value) == true) {
    alert("not Infinity");
}
else {
    alert("Infinity");
}

isNaN(): number가 NaN인지 확인

추가 설명: NaN을 확인할 때는 반드시 isNaN() 함수를 사용해야 함


if (isNaN(NaN)) {
    alert("NaN");
}
else {
    alert("not NaN");
}
숫자 변환함수


Number() 외에도 숫자 변환 함수를 제공

Number() 함수의 단점을 보완하고자 만들어진 함수들

parseInt(string): string을 정수로 바꾸어 줌

추가 내용

0으로 시작하면 8진수로 판단하고 8진법으로 변환함
0x로 시작하면 16진수로 생각하고 16진법으로 변환함
parseInt() 함수의 두 번째 매개변수에 진법을 입력하면 앞의 수를 해당 진법의 수로 인식함


parseFloat(string): string을 유리수로 바꾸어 줌

추가 내용

중간에 e가 들어가면 e의 앞부분에서 끊어버리는 것이 아니라 자릿수로 인식함


Number() 함수는 숫자로 바꿀 수 없으면 NaN으로 변환
parseInt, parseFloat 는 숫자로 변환할 수 있는 부분까지는 모두 숫자로 변환


자바스크립트의 실행 순서


웹브라우져에게 처리를 부탁하는 함수는 현재 실행 중인 다른 코드의 실행이 끝나기 전에는 실행되지 않음

setTimeout()


setTimeout(function() {
  alert('Set Timeout');
}, 0);

while (true) { }

위 예제는 경고창을 출력하지 못함

"0초 후에 집에 택배 좀 보내줘 했지만 회사 일이 끝나지 않았으므로 집에와서 택배를 확인할 수 없는 것"과 같음


반복문, 콜백에서의 문제

다음 예제를 실행하면 모두 3이 출력됨

for문 끝난 다음에 i를 참조하기 때문에 발생


for (var i = 0; i < 3; ++i) {
    setTimeout(function() {
        alert(i);
    }, 0);
}

따라서 0, 1, 2를 따로 복사 해두어야 함

다음 예제는 자기 호출 함수와 클로저를 활용해 해결한 방법
다음 예제는 반복문을 실행하는 동안 클로저가 생성되어 변수 closed_i에 값을 저장할 수 있음


for (var i = 0; i < 3; ++i) {
    (function (closed_i) {
        setTimeout(function() {
            alert(closed_i);
        }, 0);
    })(i);
}

다른 해결 방법으로는 forEach() 메서드를 활용하는 방법이 있음

[0, 1, 2].forEach(function (i) {
    setTimeout(function() {
        alert(i);
    }, 0);
});
디폴트 파라미터


"매개변수가 undefined 자료형이면 값을 넣는다" 라고 이해하면 됨
undefined를 체크하는 방법

function test(a, b, c) {
  if (!b) { b = 52; }
  if (!c) { c = 273; }
  alert(a + ":" + b + ":" + c);
}
test(1, 2);

짧은 조건문을 활용하는 방법

function test(a, b, c) {
  b = b || 52;
  c = c || 273;
  alert(a + ":" + b + ":" + c);
}
test(1, 2);

기본 매개변수 - ECMAScript 6 문법을 활용하는 방법

다만, 매개변수의 순서가 굉장히 중요함
뒤에 있는 매개변수에만 사용


function test(a, b = 52, c = 273) {
  alert(a + ":" + b + ":" + c);
}
test(1, 2);

화살표 함수 - ECMAScript 6 문법을 활용하는 방법

before 익명 함수


function () { }

ECMAScript 6 에서 추가된 화살표 함수(Arrow Function)

() => { }

차이점: 내부에서 사용하는 this 키워드의 의미가 다름

익명함수: 함수 자체에 바인딩되어 있는 객체(window 객체 또는 프로토타입 객체가 될수도 있음)
화살표함수: 전역 객체(웹 브라우져 환경에서는 window 객체)

babel 사용시 익명함수로 단순 변환해버리므로, this 키워드를 주의하지 않고 사용하면 문제가 발생할 수 있음
코드가 한줄이라면 중괄호 생략 가능
return 키워드를 사용하지 않아도 값을 리턴


const multiply = (a, b) => a * b;
alert(multiply(1, 2));
alert(multiply(3, 4));
전개 연산자(스프레드 연산자, Spread Operator) - ECMAScript 6


객체 또는 배열에 대한 값 복사를 수행함

참조가 끊어짐
참조를 끊는 방법 중 하나


마침표 3개(...)를 찍어 표기하는 연산자
가변 매개변수 함수를 만들때 사용

전개 연산자로 받는 매개변수의 이름을 arguments 라고 정의해버리면, 기존의 arguments 객체가 덮어씌어지므로 다른 이름을 사용하자
반드시 가장 뒤에 딱 하나만 사용해야함

다른 매개변수와 조합할때 전개 연산자가 앞에 있을 경우 어디까지 가변 매개변수인지 명확하지 않아짐


function test(...numbers) {
  alert(number[0]);
  alert(number[1]);
  alert(number[2]);
}

test(1, 2, 3);

함수를 호출할 때의 전개 연산자

배열의 요소를 하나하나 매개변수로 전달하고 싶을때 사용
ECMAScript 5

모든 함수에 apply() 메서드가 있음

첫번째 매개변수는 함수 내부에서 활용할 this 키워드 객체
두번째 매개변수는 매개변수 배열을 넣게 됨


function test(a, b, c, d) {
  alert(a + ":" + b + ":" + c + ":" + d);
}
var array = [1,2,3,4];
// 1:2:3:4 출력됨
test.apply(null, array);

ECMAScript 6

function test(a, b, c, d) {
  alert(`${a}:${b}:${c}:${d}`);
}
var array = [1,2,3,4];
// 1:2:3:4 출력됨
test(...array);
function test(a, b, c, d) {
  alert(`${a}:${b}:${c}:${d}`);
}
var array = [3,4];
// 9:8:3:4 출력됨
test(9, 8, ...array);
// 3:4:3:4 출력됨
test(...array, ...array);

객체를 전개할 수 있음

속성이 중복될 경우 뒤에 있는 것이 우선됨


const foo = { name: 'Taro', age: 25 };
const bar = { name: 'Jiro', location: 'Tokyo' };
// { name: "Jiro", age: 25, location: "Tokyo" } 출력됨
console.log({ ...foo, ...bar });