[ javascript ] 05. 템플릿 리터널 , 함수, 내장함수

# 템플릿 리터널, 함수, 내장함수 

 

# 템플릿 리터널

 

백틱(`)을 사용

let test='hi';
let output  = `철수 ${hi}`
console.log( output )

 

• 함수 생성방법
• 파라미터정의하기
• 반환값
• 익명함수
• 즉시실행함수

 

# 함수

함수는 하나의 단위로 실행할 수 있도록 명령문을 그룹 한 것입니다.

동일한 코드가 여러 곳에서 반복되는 것을 방지하려면 함수를 사용하여 해당 코드를 래핑하고 재사용할 수 있습니다.

 

1) 함수 생성하는 방법

함수 선언식

함수 표현식

 

함수 정의

function 함수이름() {
 실행문;
}

 

함수 호출

함수는 정의 후 함수를 호출해야 실행됩니다.

함수명();

 

함수 선언식

함수는 funciton 예약어와 함수이름 abc 함수 블록{}으로 되어 있습니다.

function abc() {
	console.log('안녕 철수');
	console.log('안녕 영희');
}
abc();

 

함수 표현식

함수를 변수에 담아서 생성할 수 있습니다.

let abc = function() {
	console.log('안녕 철수');
	console.log('안녕 영희');
}
abc();

 

 

2) 파라미터(매개변수) 정의하기

전달받을 값을 담는 이름 : 인자 , 매개변수, parameter

함수를 호출할 때 실제로 넘기는 값(데이터)   : 인수, argument

function 함수이름(파라미터) {
 실행문
}
함수이름( 값 )

function 함수이름(파라미터1, 파라미터2, ... 파라미터n) {
  실행문;
}
함수이름(값1, 값2, ... 값n);

function message( x  ) {
 console.log( x + '입니다' );
}

message( 10  );

함수

 

3) 반환값

return 키워드를 사용하여 함수에서 값을 반환합니다.

함수에서 return을 하게 되면 return 아래에 있는 코드는 실행되지 않습니다. 

return은 함수를 종료시키는 구문이기도 합니다.

function 함수이름(파라미터1, 파라미터2, ... 파라미터n) {
  return 반환값;
}
let 변수 = 함수이름(값1, 값2, ... 값n);

 

예)

function multiply( x , y ) {
  reutrn x * y ;
}

console.log( multiply( 10, 20 ) );

함수

 

응용)

function createEl(type, height, width) {
	const el = document.createElement(type);

	el.style.height = height;
	el.style.width = width;

	return el;
}


createEle('div','300px','200px');

 

function createEle(type, height, width) {
	const el = document.createElement(type || 'div');

	el.style.height = String(height || 100) + 'px';
	el.style.width = String(width || 100) + 'px';

	return el;
}

 

 

4) 익명함수

함수의 이름이 존재하는 않음

function() {
	console.log('hello');
}


let abc = function() {
	console.log('안녕 철수');
	console.log('안녕 영희');
}
abc();

 

 

5) 즉시 실행 함수

(function() {
  console.log('안녕')
})()

(function hello() {
  console.log('안녕')
})()

 

 

스코프 제어: 즉시 실행 함수를 사용하면 함수 내에서 정의된 변수들이 전역 스코프를 오염시키지 않습니다. 이를 통해 변수 충돌을 방지하고 코드의 안정성을 높일 수 있습니다.

모듈화: 즉시 실행 함수를 사용하여 모듈 패턴을 구현할 수 있습니다. 이를 통해 코드를 모듈 단위로 분리하고 독립적으로 유지할 수 있습니다.

캡슐화: 함수 내부의 변수와 함수들을 외부에서 접근할 수 없도록 보호할 수 있습니다. 이를 통해 코드의 내부 상태를 숨기고 보호할 수 있습니다.

의존성 주입: 즉시 실행 함수를 사용하여 외부에서 의존성을 주입할 수 있습니다. 이를 통해 모듈 간의 의존성을 명확하게 관리할 수 있습니다.

명시적인 스코프: 즉시 실행 함수를 사용하면 함수 내부의 변수들이 함수 스코프 내에 존재하게 됩니다. 이를 통해 변수들의 스코프가 명확해지고 코드의 가독성을 높일 수 있습니다.

 

 

 

6) 화살표 함수

// 기존 함수 표현식
const add = function(x, y) {
  return x + y;
};

// 화살표 함수
const add = (x, y) => x + y;

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

console.log(add(1, 2));


즉시실행함수
( () => {
	함수코드;
})()

 

 

 

항목	설명
문법이 간결함	중괄호({})와 return 생략 가능 (단일 표현식일 때)
this 바인딩 없음	일반 함수는 this가 동적으로 바인딩되지만, 화살표 함수는 상위 스코프의 this를 유지함
익명 함수로 사용	이름 없이 변수에 담아 사용

 

바인딩이란 

어떤 이름(식별자)을 값 또는 함수, 객체, this, 스코프 등에 연결(결합)하는 것

 

종류 설명 예시

변수 바인딩	변수 이름에 값을 연결	let x = 10; → x는 10에 바인딩
함수 바인딩	함수 이름에 함수 정의 연결	function sayHi() {}
this 바인딩	함수 내부에서 this가 어떤 객체를 가리킬지 결정	obj.method() 호출 시 this = obj
스코프 바인딩	변수나 함수가 어느 범위(스코프)에 묶이는지	함수 내부 변수는 그 함수 스코프에 바인딩

 

# 함수 매개변수 초기화

형식1)

// 함수를 선언합니다.
function print(name, count) {
  // 함수 매개변수 초기화
  if (typeof count === "undefined") {
    count = 1;
  }

  // 함수 본문
  console.log(`${name}이/가 ${count}개 있습니다.`);
}

// 함수를 호출합니다.
print("사과");

 

형식2)

// 함수를 선언합니다.
function print(name, count) {
  // count가 전달되지 않았을 경우 기본값 1로 설정
  if (typeof count === "undefined") {
    count = 1;
  }

  // 메시지를 출력합니다.
  console.log(`${name}이/가 ${count}개 있습니다.`);
}

// 함수를 호출합니다.
print("사과");

 

형식3)

// 함수를 선언합니다.
function print(name, count = 1) {
  console.log(`${name}이/가 ${count}개 있습니다.`);
}

// 함수를 호출합니다.
print("사과");

 

 

 

# 콜백함수 

콜백 함수	다른 함수에 인수로 전달되어 호출되는 함수
사용 목적	비동기 처리, 이벤트 처리, 반복 처리 등

function callTest( callback ) {
	// 10회 반복
    for( let i = 0 ; i < 10 ; i++ ){
    //매개변수로 전달된 함수를 호출합니다
    callback();
    }
}

callTest( function(){
   console.log('함수를 호출합니다.');
})


결과)
함수를 호출합니다.
함수를 호출합니다.
함수를 호출합니다.
함수를 호출합니다.
함수를 호출합니다.
함수를 호출합니다.
함수를 호출합니다.
함수를 호출합니다.
함수를 호출합니다.
함수를 호출합니다.

 

 

# 표준내장함수

함수명	설명
parseInt()	문자열을 정수로 변환합니다.
parseFloat()	문자열을 실수로 변환합니다.

let a ='100';
let b ='50.123';
let c ='1205호';

console.log( parseInt(a);
console.log( parseInt(b);
console.log( parseFloat(b);
console.log( parseInt(c);

결과
100
50
50.123
1025

 

 

+ 타이머함수 

함수명	설명
setTimeout( 함수, 시간 )	특정 시간 후에 함수를 실행
setInterval( 함수, 시간 )	특정 시간마다 함수를 실행
clearInterval( 변수 )	특정 시간마다 실행하던 함수 호출을 정지

1초 1000(밀리초)

 

setTimeout( function(){
  console.log('1초 후에 1번만 실행');
}, 1000)


setInterval( function(){
  console.log('1초 마다 실행');
}, 1000)


let id  = setInterval( function(){
  console.log('1초 마다 실행');
}, 1000)

//5초 후에
setTimeout( function(){
    //타이머 제거 
	clearInterval(id)
},5000)