함수를 사용하는 이유?

함수 > 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)
 function 


한번만 사용하는 게 아닌 여러번 반복하기 위해서 이런 함수를 사용한다.


이런 함수는 재사용이 가능하다. 
자바스크립트 
여러번 사용하고 싶다 > 함수는 어떤 코드를 재사용

정의:
선언:
function 함수이름() {
 실행할 문장 넣기 
}

다 만들어놓은 함수를 호출해야한다. 

 

---

// let num1 = 2;

// let num2 = 3;

// let sum = num1 + num2;

// document.write("두수의 합은" + sum);

// 위에는 그냥 코딩한 거라면 진짜 함수는 사용하는 것은?

function addNumber() {

  let num1 = 2;

  let num2 = 5;

  let sum = num1 + num2;

  alert(sum);

}

//이렇게 호출한다

addNumber();

// addNumber();

함수 선언하는 위치는 상단, 하단 상관없이 스크립트가 해석이 될 때 먼저 분석되는 부분이다. 

addNumber();

function addNumber() {

  let num1 = 2;

  let num2 = 5;

  let sum = num1 + num2;

  alert(sum);

}

 

function > 뜻 기능 *함수*

자료는 매개변수
함수를 만드는 중
결과를 리턴값이라 생각함

 

---

스코프(scope)... 범위

ㄴ 변수를 선언하고 변수가 사용되는 범위

ㄴ변수의 사용 범위를 정확하게 알 수 있음

ㄴ  Scope를 우리말로 번역하면 '범위'라는 뜻을 가지고 있습니다. 즉, 스코프(Scope)란 '변수에 접근할 수 있는 범위'라고 할 수 있는데요. 자바스크립트에선 스코프는 2가지 타입이 있습니다. 바로 global(전역)과 local(지역)

(출처: https://medium.com/@su_bak/javascript-%EC%8A%A4%EC%BD%94%ED%94%84-scope-%EB%9E%80-bc761cba1023)

 

ㄴ한 함수에서 사용할 수 있는 변수: 지역변수(local)

ㄴ 스크립트 전체에서 사용할 수 있는 변수: 전역 변수 (global)

 

ㄴ 중괄호(블록스코프), 함수)

함수 스코프(function-scoped)
자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 됩니다. 그러므로 함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있다.

 

지역 스코프(Local Scope)는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미입니다.

 

var a = 1; // 여기가 전역 스코프

function print() {

  //여기는 지역 스코프

  var a = 111;

  console.log(a);

}

print(); //지역함수의 스코프안에 있는 거 지역스코프에서 있어서 111이 나옴

console.log(a); //전역 스코프 에 있는 a  그래서 1이 나옴

---

호이스팅: 끌어올린다.

변수를 선언하고 할당을 분리해서 하는 경우

 

(https://mozzi-devlog.tistory.com/7)

JavaScript로 개발을 진행하다 보면 호이스팅이라는 말을 들어본 경험이 있을 것이다.
보통은 호이스팅이라 하면 코드가 실행되기 전에 함수, 변수의 선언을 맨 위로 끌어올린다고 설명한다.
하지만 실제로 끌어올리는 것은 아니다. 

 

호이스팅이란 코드가 실행되기 전에 변수 및 함수에 대한 메모리를 설정하는 것이다.

 

function hoist(a) {

  return a + 1;

}

var hoistV = "var hoist";

const hoistC = "const Hoist";

let hoistL = "let Hoist";

console.log(hoistV); // 코드가 실행되기 전 메모리에 undefined로 자동으로 초기화 된다

console.log(hoistC); // 코드가 실행되기 전 메모리에 초기화 되지 않은 상태로 저장된다

console.log(hoistL); // 코드가 실행되기 전 메모리에 초기화 되지 않은 상태로 저장된다

//함수의 경우 함수 전체에 대한 참조가 함께 저장된다.

 

function hoist(a) {

  return a + 1;

}

var hoistV = "var hoist";

const hoistC = "const Hoist";

let hoistL = "let Hoist";

//함수의 경우 함수 전체에 대한 참조가 함께 저장된다.

// 함수호출

console.log(hoist(2));

// var 호출

console.log(hoistV);

// const 호출

console.log(hoistC);

// let 호출

console.log(hoistL);

> hoist(2) > 2+1 = 3 이 되어서 호출 됨

> var 호출에서는 선언 전 접근하여 메모리에 초기에 저장된 undefined가 출력된다.(ver는 잘 사용되지 않지만 유효 범위는 함수 scope라고 보면 됨) (함수스코프, 재선언, 재할당 가능)
> const와 네 번째 let의 경우에는 변수가 초기화되지 않아 Reference Error가 발생한다.*참조오류( let랑 const는 블록 영역의 범위를 가진다. block안에서 중괄호로 된 거에서만 사용되거나 함수 내에서만 사용됨)

 

gpt 지식 얻기

 

---

 

var	함수스코프, 재선언, 재할당 가능 // 오래된 방식으로 변수를 선언하며, 호이스팅과 중복 선언 문제가 있습니다. 사용을 피하는 것이 좋습니다.
let	블록스코프/함수스코프, 재선언 불가능, 재할당 가능 // 블록 스코프를 갖고, 재할당이 가능한 변수를 선언할 때 사용됩니다.
const	블록스코프/함수스코프, 재선언, 재할당 불가능 // 블록 스코프를 갖고, 재할당이 불가능한(상수) 변수를 선언할 때 사용됩니다. 그러나 객체나 배열 내부의 속성은 수정할 수 있습니다.

function calSum(n) {

  let sum = 0;

  for (let i = 1; i < n + 1; i++) {

    sum += i;

  }

  console.log(sum);

}

calSum(10);

 

함수 안에 let을 선언해서 

출력 > 55이 나옴

 

function calSum(n) {

  let sum = 0;

  for (let i = 1; i < n + 1; i++) {

    sum += i;

  }

  sum = 100;

  console.log(sum);

}

calSum(10);

 

출력하기전에 sum=100;을 재할당하였더니 

출력은 그냥 100으로 나온다. 

그러므로 재할당할 경우를 순서 잘잡고 해야한다. 

 

console.log(x); // ReferenceError: Cannot access 'x' before initialization

let x = 10;

> 위의 코드에서 x 변수가 호이스팅되지만, 변수를 선언하기 전에 x를 출력하려고 하면 ReferenceError가 발생합니다.

 

if (true) {

  let y = 20;

}

console.log(y); // ReferenceError: y is not defined

y 변수는 if 블록 내에서 선언되었으므로 블록 외부에서는 접근할 수 없습니다. 이것이 let의 블록 스코프 특성 때문에 발생하는 것입니다.

 

따라서 

if (true) {

  let y = 20;

  console.log(y);

}

 

블록안에 출력하기전에 선언을 하여서 실행해야 오류가 나지 않는다. 

 

---

 

var 변수는 함수의 시작 부분에서 선언을 해주기 (호이스팅이 생긴다.)

 

---

 

교재 236페이지 > 선언된 함수 재사용 해가지고 선언된 함수는 유효한 범위내에서 얼마든지 재사용할 수 있다는 것을 확인.