[JavaScript] 함수 및 출력함수

01. 함수(Function)

- 함수 : 일련의 명령어를 묶어 재사용 가능한 코드 블럭을 만들 수 있도록 하는 개념 => 조직화, 모듈화, 반복코드 최소화

function 함수명(매개변수 리스트) {
	//반복사용할 코드
}

- 함수에는 기본적인 선언적 함수, 이름이 없는 익명함수, 선언되자마자 실행되는 즉시 실행 함수(IIFE), 화살표 함수등이 있음

* 선언적 함수와 익명 함수의 차이점 : 선언적 함수의 경우 호이스팅이 발생돼 선언되기 전 호출이 가능함

- 이름이 같은 함수가 선언돼있는 경우, 가장 마지막에 입력된 값이 저장함 -> 이름이 같을 때는 더 나중에 선언된 것으로 

var 함수 = function() { console.log("익명 함수"); }
function 함수() { console.log("선언적 함수"); }

함수(); // 익명 함수

-> 변수의 재선언을 가능하게 하며, 함수 스코프만을 지원하는 var의 경우에만 생기는 문제이므로, let이나 cosnt 사용하면 방지가능

 

- 화살표 함수(Arrow Function) : 기존의 함수 선언 방식을 간소화할 수 있는 방식

const add = (a, b) => a+b;
// const add = (a, b) => { return a+b; }
// function add(a,b) { return a+b; }

-> 본문이 하나의 표현식인 경우 중괄호{}와 return을 생략가능

• this의 바인딩이 일반적인 함수와는 다르게 작동함 -> 랙시컬 스코프의 정적 바인딩

	정적 바인딩(Static Binding)	동적 바인딩(Dynamic Binding)
적용된 함수 타입	화살표 함수(=>)	일반 함수(function)
this 결정 시점	함수 정의 시점	함수 호출 시점
메서드 호출 시 this	상위 스코프의 this를 그대로 참조	호출한 객체 또는 호출 컨텍스트의 this를 참조
스코프 유형	렉시컬 스코프(Lexical Scope)	다이나믹 스코프(Dynamic Scope)

const obj = {
  value: 42,
  regularFunction: function() {
    console.log(this.value);  // 일반 함수에서는 'this'가 obj를 가리킴
  },
  arrowFunction: () => {
    console.log(this.value);  // 화살표 함수에서는 'this'가 상위 스코프를 참조 (여기선 전역 객체나 undefined)
  }
};

obj.regularFunction();  // 42
obj.arrowFunction();    // undefined (상위 스코프의 'this' 참조)

 

- 클로저(Closure) : 자신이 포함하고 있는 외부함수보다 내부 함수가 더 오래 유지돼 외부 함수 밖에서 내부함수가 호출되더라도 외부 함수의 지역변수에 접근할 수 있는 함수 -> 자신이 생성될 때의 환경을 기억하는 함수

function outer() {
  let counter = 0;

  function inner() {
    counter++;
    console.log(counter);
  }

  return inner;  // inner 함수 반환
}

const count = outer();  // outer 함수 실행, inner 함수 반환
// 결국 외부함수는 소멸하지만, 내부함수가 자신의 선언당시 스코프를 기억하여 이후에도 그 스코프에 접근할 수 있음
count();  // 1
count();  // 2

* 스코프 체인(Scope Chain)

- 자바스크립트에서 변수와 함수 등을 찾는 메커니즘으로, 렉시컬 스코프(정적 스코프)를 사용 -> 현재 실행 중인 스코프에서 식별자를 찾지 못하면, 상위 스코프로 이동해 검색하는 구조

- 동작방식 : (현재스코프에서 검색시작) -> (상위 스코프로 이동) -> (전역 스코프까지 검색) -> (ReferenceError)

let value = "global";

function one() {
    let value = "local";
    outterTwo();
    function innerTwo(){
        console.log(value);
    }
    innerTwo();
}

function outtertwo(){
    console.log(value);
}

one(); //global,local
outterTwo(); //global

-> 렉시컬 스코프를 가진 자바스크립트에서는 함수의 선언 위치를 기억하여 자신과 상위스코프를 지정함

 

02. 출력함수

- console.log() : 브라우저 콘솔에 출력하는 함수로, console객체를 사용함 => console.error(),console.info() 등이 존재함

console.log("콘솔함수입니다.");

- document.write() : 브라우저 화면에 출력하는 함수로, HTML 문서에 직접 내용을 추가, 디버깅용 주로 사용,실제사용 거의 없음

document.write(" 브라우저 화면에 출력합니다. <br>");
//브라우저 화면에 뜨기 때문에 html에서 사용하는 <tag>를 사용할 수 있음

- alert() : 팝업 출력되는 함수로, 간단한 경고 창을 표시함

alert("경고합니다.");

- confirm() : 팝업 출력되는 함수로, 확인과 취소가 각각 true와 false로 반환함

let value = confirm("확인이나 취소를 눌러주세요");
if(value){
    console.log("확인입니다.");
} else console.log("취소합니다.");

- prompt() : 팝업 출력되는 함수로, 입력값을 문자열로 저장하여 받음

let valueP = prompt("입력을 문자열로 저장합니다.");

- innerHTML : 특정 HTML요소의 내용을 변경, 동적 웹 콘텐츠 업데이트에 많이 사용됨

<h1 id="demo"> 원래 내용입니다. </h1>
<script>
	document.getElementById("demo").innerHTML = "변경될 내용입니다."
</script>