[ 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) 파라미터(매개변수) 정의하기

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 = (a, b) => {
  return a + b;
};

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


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

 

 

 

# 함수 매개변수 초기화

함수

 

함수 매개변수 초기화

 

 

# 콜백함수 

 

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)