티스토리 뷰

언어/JavaScript

[JavaScript] function(함수)

github.com/zlrloy 2023. 7. 9. 12:16

함수엔 input과 output이 중요하다.

하나의 함수에 한가지 일만 하도록 작성한다.

함수를 무언가를 동작하는 것이기 때문에 동사형태로 이름을 지정해야 한다.

 

자바스크립트에서의 함수는 타입이 없기 때문에 숫자가 문자열로 변환되어 출력된다.

다른 함수에서 타입이 중요한 경우 자바스크립트가 난해할 수 있다.

이것을 보완하고자 typescript가 나왔다. typescript는 명확하고 개발을 더 쉽게 만들어준다.

 

 

 

 

 

데이터 반환하기|

function addTen(num) {
  return num + 10;
}
const result = addTen(5);
console.log(result)     //15

 

 

 

 

 

텍스트 문자열의 연결

function textConcatenation() {
  const text = "1 더하기 1는 " + (1 + 1);
  return text;
}

console.log (textConcatenation())     //2

※ const text = "1 더하기 1은" + 1 + 1; 로 입력할 경우 '1 더하기 1은 11' 이라고 출력된다.

왼쪽부터 순서대로 실행되기 때문이다.

그러므로 수학식으로 1 + 1이 먼저 계산되도록 소괄호'()'로 묶어줘야 한다.

 

 

 

 


ES6(ECMA Script 2015) 문법

 

① function 대신 arrow '=>' 추가

 

ex1. function 함수를 arrow 함수로 변환

//function 사용
function welcome(name) {
  return "안녕하세요 " + name
}

//ES6
const welcome = (name) => "안녕하세요 " + name;

 

ex2. arrow 함수를 function 함수로 변환

// ES6
const handleBio = (nickname, bio) => {
  const user = {
    nickname: nickname,
    bio: bio,
  }
  return user;
}


//function 사용
function handleBio (nickname, bio) {
  const user = {
  nickname: nickname,
  bio: bio,
  }
  return user;
}

 

 

 

② back tick (``)으로 string 작성

ex. 개행(줄바꿈) (\n 사용하지 않아도 가능!)

const detail = `자세히
보아야

예쁘다.`;

console.log (detail)

 

 

 

repeat() 문자열 반복

console.log ('*'.repeat(5))   //*****

 

 

 

④ IIFE: Immediately Invoked Function Expression

함수를 선언하자마자 호출하는 즉시실행함수입니다.

함수의 선언을 괄호로 묶어 호출하듯이 ()를 붙이면 된다. 잘 쓰이지 않지만 함수를 바로 실행하고 싶을 때 유용하다.

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

 

 

 

참고. 변수 사용 ${}

const name = 'J';
const hi = `안녕하세요. 저는 ${name}입니다.`;
Total
Today
Yesterday