[ HTML + CSS + 자바스크립트] 10.1 ~ 10.5

[ 코딩 자율학습 ]

HTML+CSS+자바스크립트

10.1) 함수란

／／ ３단 출력
for (let i = 1; i <= 9; i++) {
  console.log(`3 * ${i} = ${3 * i}`);
}
// 3 * 1 = 3
// 3 * 2 = 6
// 3 * 3 = 9
// 3 * 4 = 12
// 3 * 5 = 15
// 3 * 6 = 18
// 3 * 7 = 21
// 3 * 8 = 24
// 3 * 9 = 27

< 함수 > 

: 어떤 목적을 갖고 작성한 코드를

모아둔 블록문

: 재사용하기 유용

10.2) 함수를 정의하는 방법

1. 함수 선언문

2. 함수 표현식

3. 화살표 함수

function gugudan() {
  for (let i = 1; i <= 9; i++) {
    console.log(`3 * ${i} = ${3 * i}`);
  }
}
gugudan(); // 함수 실행

// 3 * 1 = 3
// 3 * 2 = 6
// 3 * 3 = 9
// 3 * 4 = 12
// 3 * 5 = 15
// 3 * 6 = 18
// 3 * 7 = 21
// 3 * 8 = 24
// 3 * 9 = 27

- 함수 선언문 -

: function 키워드로 함수를 정의하는 방법

// 네이밍 함수
const gugudan = function gugudan() {
  for (let i = 1; i <= 9; i++) {
    console.log(`3 * ${i} = ${3 * i}`);
  }
};
gugudan(); // 함수 호출


// 익명함수
const gugudan = function () {
  for (let i = 1; i <= 9; i++) {
    console.log(`3 * ${i} = ${3 * i}`);
  }
};
gugudan(); 



// 3 * 1 = 3
// 3 * 2 = 6
// 3 * 3 = 9
// 3 * 4 = 12
// 3 * 5 = 15
// 3 * 6 = 18
// 3 * 7 = 21
// 3 * 8 = 24
// 3 * 9 = 27

- 함수 표현식 - 

: 함수도 변수에 할당

: 할당된 변수명으로 호

: 식별자 有 - 네이밍 함수

: 식별자 無 - 익명 함수

const gugudan = () => {
  for (let i = 1; i <= 9; i++) {
    console.log(`3 * ${i} = ${3 * i}`);
  }
};
gugudan(); // 함수 호출


// 3 * 1 = 3
// 3 * 2 = 6
// 3 * 3 = 9
// 3 * 4 = 12
// 3 * 5 = 15
// 3 * 6 = 18
// 3 * 7 = 21
// 3 * 8 = 24
// 3 * 9 = 27

- 화살표 함수 -

10.3) 함수 기능 확장하기

function gugudan(dan) {
  for (let i = 1; i <= 9; i++) {
    console.log(`${dan} * ${i} = ${dan * i}`);
  }
}
gugudan(3); // 3단
gugudan(5); // 5단
gugudan(8); // 8단

//dan - 매개변수

< 매개변수 >

: 함수를 정의할 때 외부에서 전달하는 데이터를

함수에서 받을 수 있도록 정의 하는 변수

 

< 인수 >

: 소괄호 안에 전달하고 싶은

데이터 적는 것

function sum(num1, num2) {
  const result = num1 + num2;
  return result;
}
const result1 = sum(10, 20);
const result2 = sum(50, 100);

console.log(result1 + result2);

//180
// return 문이 있어서 외부로 반환 가능

< return 문 >

: 함수 외부로 데이터를 반환

10.4) 함수의 특징 이해하기

1. 함수 스코프

2. 블록 스코프

 

< 함수 스코프 >

function sum() {
  let a = 10; // 지역스코프
  console.log(`함수 내부: ${a}`);
}
sum();
console.log(`함수 외부: ${a}`);

// 함수 내부: 10
// 함수 외부: 10

1).  내부 - 지역 스코프

: 외부에서 참조하려하면 오류 발생

let a = 10; // 전역스코프
function sum() {
  console.log(`함수 내부: ${a}`);
}
sum();
console.log(`함수 외부: ${a}`);

// 함수 내부: 10
// 함수 외부: 10

2) 외부 - 전역 스코프

: 내, 외부 모두 참조 가능

let a = 10; // 전역 스코프
{
  let b = 20; // 지역 스코프
  console.log(`코드 블럭 내부 a: ${a}`);
  console.log(`코드 블럭 내부 b: ${b}`);
}
console.log(`코드 블럭 내부 a: ${a}`);
console.log(`코드 블럭 내부 b: ${b}`); // 에러 뜬다

// 코드 블럭 내부 a: 10
// 코드 블럭 내부 b: 20
// 코드 블럭 내부 a: 10

< 블록 스코프 >

:  let 과 const 키워드로

선언한 변수에 한해서만 적용

( var 은 적용 X )

console.log(num);
var num = 10;
// undefined

< 함수 호이스팅 >

: 호이스팅

= 선언부를 자신의 스코프

최상위로 끌어올리는 것

: var 키워드로 선언한 변수에만 적용

printHello();
function printHello() {
  console.log("Hello");
}

// Hello

function printHello() {
  console.log("Hello");
}
printHello();
// Hello

- 함수 호이스팅 예시 -

함수가 두 번째로 나온건데

호이스팅돼서 첫 번째로 나와서

쓰인 것처럼 표현

printHello();
var printHello = function printHello() {
  console.log("Hello");
};

// 에러

var printHello;
printHello();
var printHello = function printHello() {
  console.log("Hello");
};

// 에러

- 예외 -

: 함수 표현식으로 정의된 함수

화살표 함수 방식으로 정의된 함수

10.5) 즉시 실행 함수 사용하기

(function init() {
  console.log("initialized!");
})();

//initialized!

< 즉시 실행 함수 >

: 함수를 정의하면서 동시에

실행까지 하는 함수