jennet1 님의 블로그

JS [함수] 본문

WEB/JS

JS [함수]

jennet1 2024. 9. 20. 21:41

1. 함수란?

- 특정 작업을 수행하는 코드 블록이며 코드를 재사용 하고 모듈화 하는데 유용함.

  • function 키워드를 사용하여 선언하고 함수 호출 시 필요한 매개변수를 전달하여 다양한 상황에 맞게 사용가능
function sumResult(n) {  // function (함수의 이름)(전달받는 값) // 없으면 공백
  let sum = 0;
  for(let i = 0; i < n; i++) {
      sum += i;
  }
  return sum;
}

console.log(sumResult(4)); 
// 6

함수에 전달할 값이 없고 함수에서도 리턴값이 없으면 다음과 같이 함수를 사용할 수 있다.

function voidStr() {
  console.log("출력");
}

voidStr();

2. 화살표 함수란?

  • ES6에서 도입된 함수 표현식의 짧은 문법이다.
  • 일반 함수보다 짧고 간결하게 사용이 가능하다.

화살표 함수를 써야 하는 이유

  • 코드가 짧아지고 가독성이 좋다.
  • 일반 함수는 자신의 this 를 가지지만 화살표 함수는 부모의 컨텍스트 this 그대로 사용한다.
let sumResulton = (n) => {
  let sum = 0;
  for(let i = 0; i < n; i ++) {
        sum += i;  
  }
  return sum;
}


console.log("화살표 함수 : ", sumResulton(10));
// 45

3. 백틱 이란?

  • ES6 에서 도입된 문자열을 처리하는 새로운 방식이며 문자열 안에서 변수를 쉽게 삽입할 수 있고 여러 줄에 걸친 문자열도 쉽게 작성할 수 있다.
let str = "비둘기"
let strback = `하늘색 ${str} 가 바닥에 있는 먹이를 먹고 있다.`;
console.log(strback);
//하늘색 비둘기 가 바닥에 있는 먹이를 먹고 있다.

백틱을 사용하는 이유

  • 문자열 안에 변수 삽입 : 복잡한 문자열 연결을 + 연산자로 하지 않고 백틱을 사용해 가독성 높은 코드 작성 가능
  • 여러 줄 문자열 : 긴 텍스트를 처리할 때 줄바꿈 처리가 훨씬 쉬워진다.

'WEB > JS' 카테고리의 다른 글

JS [DOM TEXT]  (0) 2024.09.21
JS [DOM]  (0) 2024.09.21
배열 다루기  (0) 2024.09.20
문자열 다루기  (0) 2024.09.20
JS [변수]  (0) 2024.09.19