함수

• 함수는 반드시 호출을 해야 실행이 된다.
• 매개변수(parament) : 함수와 메서드 입력변수 명( ex. x)
• 인수(argument): 함수와 메서드의 입력값(ex. 3)
• 함수를 파라미터로 선언하고, 인수로 실행한다

function add(x, y){
    return x + y;
}

add(3, 5)

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

add(10,20)

function add(a = 100, b = 200) {
    return a + b;
}



function add({ a = 100, b = 200 }) {
  console.log(a+b);
}

add({b: 300}); // 400

• 여기서 a,b는 파라미터, 10과 20은 아규먼트
• 입력된 값(아규먼트)가 우선된다.
• return은 아예 함수 종료
• break : 가장 가까운 반복문 하나 탈출
• add(undefined,10) : a는 유지하고, b에만 닶을 넣고싶을때 이용

1.스코프

• 블록스코프와 함수 스코프의 차이
  • 블록 스코프는 var는 살아남고, let은 이용 못함
  • 함수 스코프는 둘다 밖에서 아예 쓸 수 없음

1-1 함수스코프

• 함수 안에 선언된 변수들은 함수 내에서만 유의미하다.
• 함수 밖에서 선언된 변수들은 함수 안에서 사용할 수 있다.
• 함수내에 변수가 선언되어 있으면, 전역변수로 같은 변수가 선언되어 있어도 함수내에 변수를 우선한다.

let k = 10;
function viewk() {
    console.log(k);
}
function changek() {
    k += 10;
    console.log(k)
}
viewk()   -> 10
changek()   ->20

1-2. 블록 스코프

• 블록안에서 선언된 변수는 블록 안에서만 실행 된다.
• 블록은 반복문이나 조건문등의 블록을 의미한다.
• var을 통해서 블록안에서 변수를 선언하게 되면 이는 전역스코프와 함수스코프만을 이용하겠다는 뜻이므로
  해당 변수를 블록 안에서 선언하여도 전역스코프로 취급된다.
• 하지만 let을 통해 선언하면 블록스코프를 가지게 되므로, 해당 블록 내에서만 접근할 수있다.

let yy = 100
if (true) {
    let yy = 10
    colsole.log(yy)
}
console.log(yy)

출력
10      
100

let k = 10;
function viewk() {
	console.log(k);
}
function changek(){
    let k = 20;
    console.log(k)
}
viewk()   //10
changek()  //20
viewk()    //10

2. 함수선언문과 함수표현식

2-1) 호이스팅

• 자바스크립트 엔진은 생성단계에서 한번 선언문을 쭉 훑고 선언문들을 환경 레코드(enviroment recod) 에 기록해둠

  • 변수 호이스팅(variable Hoisting) : var, let, const
    var키워드로 선언한 것은 undefined로 값을 초기화 해둔다.
    let, const로 하면 식별자는 기록해두지만, 값을 초기화하지 않는다.(일시적 사각지대)

    함수 표현식에서 변수가 기록되고, 그 값은
    var의 경우 undefined, let,const의 경우 초기화가 이루어지지 않은 상황에서
    함수를 호출하면, 데이터 타입은 undefined는 호출될 수 없기 때문에 타입에러가 발생
    let 이나 const는 아직 환경레코드에 기록된 값이 없기 때문에 Reference error가 발생

  • 함수 호이스팅(function hoistion) : 함수를 선언과 동시에 완성된 함수객체를 생성하여 환경레코드에 기록해 둔다.선언전에도 함수를 사용할 수 있다.

console.log(add1(10, 20)); // 30
console.log(add2(10, 20)); // 30
console.log(mul1) // undefined
console.log(mul1(10, 20)); // not a function
console.log(mul2); // Cannot access 'mul2' before initialization
console.log(mul2(10, 20)); // 위와 같은 애러
console.log(mul3) // mul3 is not defined, 호이스팅이 안되었기 때문


function add1(x, y) {
    return x + y;
}

function add2(x, y) {
    return x + y;
}


var mul1 = function (a, b) {
    return a * b;
}

let mul2 = function (a, b) {
    return a * b;
}

2-2) 함수 선언문

        function add2(x, y) {
            return x + y;
        }

💡 함수 선언문으로 선언된 함수는 함수 호이스팅이 발생한다. 런타임 이전에 함수 객체가 생성이 되므로 함수가 정의되기 전에 함수를 호출할 수 있다. 미리 함수 호출해도 가능, 클로저 상황에 많이 사용.

2-3) 함수 표현식

        console.log(mul(10, 20));
        let mul = function (a, b) {
            return a * b;
        }

💡 함수 표현식으로 선언된 함수는 변수 호이스팅이 발생하며, undefined로 초기화된다. 그러므로 함수 선언문으로 선언한 함수는 함수가 정의되기 전에 함수를 호출할 수 없다.

console.log(add1(10, 20));
        console.log(add2(10, 20));
        // 호이스팅 되어서 위로 올라갑니다!
        function add1(x, y) {
            return x + y;
        }

        console.log(mul(10, 20));
        let mul = function (a, b) {
            return a * b;
        }

        function add2(x, y) {
            return x + y;
        }

3.클로져

• 폐쇠된 공간 안에 데이터에 접근하기 위한 테크닉입니다.

• 폐쇠된 공간 안에 데이터에 접근하기 위한 테크닉
• 내부 함수의 외부 함수 접근(권한) 테크닉

• 그러면 왜 사용할까요?
  • 변수 은닉과 메모리 효율
  • 코드 효율(또는 완전성)을 극대화하기 위해 사용

function 제곱(x) {
    function 승수(y) {
        return y ** x
    }
    return 승수
}
재곱(2)(10)  // 출력 100
let 제곱2 = 제곱(2)
제곱2(10)   

let 제곱3 = 제곱(3)
제곱3(10)

// 위랑 동일
function 제곱(x) {
    return function(y) {
				return y ** x
		}
}

• 이런 식으로 재사용 하기 수월하다.

<비교해보기>

const x = 100;

function a() {
  const x = 1;
}

function b() {
  console.log(x);
}

a(); // 100
b(); // 100   //바라보는게 x 선언된 값임


// 비교대상

const xx = 100;

function a() {
  const xx = 1;
  function b() {
      console.log(xx);
  }
  b();
}

a();    //출력 1

4. 생성자 함수

• 일반 함수와 기술적 차이 없음
• 함수 이름 첫글자는 대문자
• 반드시 new 연산자를 붙여서 실행
• 유사 객체를 여러개 만들때 사용

function User(name) {
  this.name = name;
  console.log(this.name);
}

let user = User("jina");

user.name //출력: undefined

function User(name) {
  this.name = name;
  console.log(this.name);
}

let user = new User("Jina");
user.name // jina 출력

• 마찬가지로 함수 안에 있는 내용에 접근할 수 있다.

5. 캡슐화와 추상화

• 추상화 : 코드의 구성을 잘 묶어두면, 자세히 코드를 보지 않아도 내용을 알 수 있다.
  "복잡한 것은 몰라도 되고, 이것만 써"
• 캡슐화: 처리하는 함수를 하나로 묶는 것이고, 외부로부터 내부를 감싸 숨기는 개념을포함하는거

6. 콜백함수

• 나중에 호출되는 함수
• 함수를 함수의 인수로 전달하고, 필요하면 인수로 전달한 그 함수를 다중에 콜백하겠다.

function add(x, y) {
    return x + y;
}

function mul(x, y) {
    return x * y;
}

function cal(a, b){
    return a(10, 10) + b(10, 10);
}

cal(add, mul);

7. 화살표 함수(에로우 펀션)

• 함수의 축약버전
• 삼항 연산자로도 많이 사용된다.
• 인수가 하나도 없을 땐 괄호를 비워두면 된다.
• 중괄호는 본문이 여러줄로 구성 되어 있음을 알려준다.

let func = function(arg1,arg2, ...argN) {
    return expression;
}

let func = (arg1,arg2, ...argN) => expression

8.즉시 실행 함수

• 선언되는 즉시 실행이 되는 함수
• 엔터 치는 순간 바로 실행 된다
• 익명 즉시 실행 함수, 기명 즉시실행 함수 있는데, 별 차이 없다.
• 왜 사용하나:
  1. 외부에서 실행할 필요가 없는 경우
  2. 함수 스코프를 가지기 때문에 안에 있는 메모리는 휘발 된다.(메모리 효율)
• 언제 쓰나?
  • 렌더링 되고 바로 사용 해야 하는 뭔가가 있을때

(function () {
  var a = 1;
  var b = 2;
  return a + b;
}());

8. 엄격모드

• 모던 자바스크립트를 사용하기 위한 코드다.
• 변경되면서 하위호환성 문제가 생겼다. 그래서 ES5에서는 활성화 되지 않도록 설계

function test() {
    x= 10
}
console.log(x)   // 10이 출력됨

• 함수 밖에서는 호출이 안되야지 정상임
• 거의 엄격모드를 적용하지 않은 곳이 많다.

function test() {
    'use static'
    k= 10
}
console.log(k)   // k is not defined

---

점점 더 어려워지는 자바스크립트😭

그래도 한문제 풀릴때마다 즐거워서 놓을 수 없다 🤣