chapter.12 인수(Argument) 와 반환 (retrun)

 

 

1. 인수(Argument)란?

인수(Argument)는 함수를 호출할 때 전달하는 값이다. 함수는 인수를 받아서 무언가 작업을 수행하게 된다.

그리고 숫자, 문자열, 배열, 객체 등 다양한 타입을 인수로 전달할 수 있다.

function greet(name) {  // name은 파라미터 = 매개변수
  console.log("Hello, " + name);
}

greet("코마"); // "코마"는 아규먼트
// 출력: Hello, 코마

 

 

 

---

 

2.  반환(Return)이란?

 

함수가 결과값을 반환하는 것으로 함수를 호출한 쪽에 값을 돌려주는 것이다.

반환값이 있으면, 그 값을 다른 변수에 저장하거나 다른 함수의 입력으로 사용할 수 있다.

 

function 함수이름(파라미터) {
  return 반환값;
}


function add(a, b) {
  return a + b;  // 결과값을 반환
}

let result = add(2, 3); // add 함수의 반환값을 result에 저장
console.log(result);    // 출력: 5

 

 

 

---

 

3.  예시

 

<script>
    console.log(createParagraph("1. 자바스크립트" , "red"));
    console.log(createParagraph("2. 방대하고 귀여워" , "yellow"));
    console.log(createParagraph("3. 내 머리속에 쭉쭉 들어와 줘", "green"));
    
    function createParagraph( content, color ){
    const p = document.createElement("p");
    p.textContent = content;
    p.style.color = color;
    document.querySelector('#container').append(p);

    return `방금 만든 태그의 콘텐츠 : ${content}, 색상 : ${color}`
}

function sample(){
    console.log('반환 기능 테스트');
    
    return "짜잔" // 맨 밑 부분에 추가하는 것이 바람직하다. 진행 되다가 return문을 만나면 함수가 끝나버리기 때문에
}

console.log(sample()); //  기능은 있지만 남은 게 없다.
        
</script>

 

 

위의 스크립트를 분석해보려 한다.

 

    console.log(createParagraph("1. 자바스크립트" , "red"));
    console.log(createParagraph("2. 방대하고 귀여워" , "yellow"));
    console.log(createParagraph("3. 내 머리속에 쭉쭉 들어와 줘", "green"));

 

createParagraph 함수에 각각의 인수를 넣은 값을 반환받아 출력하려고 한다

** 이때 함수는 호이스팅이 되어 함수 내용이 아래에 선언되어 있어도 값을 출력할 수 있다.

 

  function createParagraph( content, color ){
    const p = document.createElement("p");
    p.textContent = content;
    p.style.color = color;
    document.querySelector('#container').append(p);

    return `방금 만든 태그의 콘텐츠 : ${content}, 색상 : ${color}`
}

 

createParagraph 함수에는 매개변수로 content와 color가 들어있다.

 

document.createElement를 사용해서 p태그를 생성했고, 

각각의 매개변수를 textContent 와 style.color에 할당 했다.

 

그 이후 document.querySelector로 #container를 가진 요소 안에 p를 추가했다.

 

해당 과정을 거쳐 반환 값을 템플릿 리터럴로 `방금 만든 태그의 콘텐츠 : ${content}, 색상 : ${color}` 를 출력하라고 값을 반환해줬다.

 

 

 

콘솔창에 해당 내용대로 출력이 되는 것을 확인할 수 있다.