카테고리

질문 & 답변
세부 분야

프론트엔드
해결 여부

해결됨

매개변수를 넣는 이유

24.03.12 17:48 작성 조회수 201

안녕하세요, 강사님~

자바스크립트 책과 강의에 많이 투자했는데 강사님 강의만큼 명료하고 쉬운 게 없어서 다른 것 재쳐두고 계속 이것만 정주행 하고 있습니다.

입문자들의 희망이 되어 주셔서 정말 감사합니다!

다름이 아니라

단락평가 공부 중 쓸 데 없는 궁금증이 생겼는데
검색을 해봐도 해소가 안 돼서 질문드립니다.

function printName(person) {
  const name = person && person.name;
  console.log(name || "person의 값이 없습니다.");
}

let person = {
  name: "이정환",
};

printName(person);

강의 중에 이런 예시가 나왔었는데

첫 줄에서 printName이라는 함수를 선언하면서 매개변수로 (person)을 받도록 했고,

마지막에 함수를 실행할 때도 (person)이라는 인수를 넣어서 실행하셨는데요,

이유가 무엇인가요?

여기서 person이라는 매개변수의 역할이 무엇인지 이해가 되질 않아서 빼보니 빼봐도 잘 작동하는데

넣은 거랑 뺀 것이랑 어떤 차이일까요?

완전 초보라서... 기초적인 질문해봅니다!

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

2.2) 단락 평가

강의실 바로가기

답변 3

좋아요순

최신순

답변을 작성해보세요.

정중한 몽구스

2024.03.13

person이 존재하는 값이면 name을 출력하고, 아닐경우 "person의 값이 없습니다." 를 출력하는 함수입니다.

매개변수 이름이 함수 외부의 person과 같기 때문에, 매개변수를 지워도 함수가 없는 것과 동일한 결과(의도치않은 결과로 생각합니다)로 동일하게 동작합니다.

function printName(p) {
  const name = p && p.name;
  console.log(name || "person의 값이 없습니다.");
}

let person = {
  name: "이정환",
};

printName();

위와같이 함수의 매개변수 이름을 바꾸면 오류가 나구요.

function printName() {
  const name = person && person.name;
  console.log(name || "person의 값이 없습니다.");
}

let person1 = {
  name: "이정환",
};
let person2 = {
  name: "사람2",
};
let person3 = {
  name: "사람3",
};

printName(person1);
printName(person2);
printName(person3);

매개변수를 지우는 경우, 매개변수에 여러가지 값이 들어가는 경우 대응할 수 없게 됩니다

따뜻한 강아지

질문자

2024.03.14

친절한 답변 감사합니다.. 그런데 제가 초심자라 이해가 잘 되지 않네요 ㅠㅠ..

정중한 몽구스

2024.03.14

함수의 사용 목적에 대해서 생각해보시면 좋을 것 같습니다. 함수의 사용 목적은 반복을 줄이기 위함입니다.

let person = {
  name: "이정환",
};

const name = person && person.name;
console.log(name || "person의 값이 없습니다.");

일회성이라면, 함수 없이 위 코드처럼 사용해도 문제가 생기지 않습니다.

지금은 person이 하나지만, person이 세개로 늘어난다고 생각해봅시다.

함수를 사용하지 않고,

const name = person && person.name;
console.log(name || "person의 값이 없습니다.");

를 각각의 person에 적용시키려면

let person = {
  name: "이정환",
};

let person1 = {
  name: "따뜻한",
};

let person2 = {
  name: "강아지",
};

const name = person && person.name;
console.log(name || "person의 값이 없습니다.");

const name1 = person1 && person1.name;
console.log(name1 || "person1의 값이 없습니다.");

const name2 = person2 && person2.name;
console.log(name2 || "person2의 값이 없습니다.");

위와같이, 코드를 반복해야 합니다.

여기서 함수를 사용한다면,

function printName(person) {
  const name = person && person.name;
  console.log(name || "person의 값이 없습니다.");
}

let person = {
  name: "이정환",
};

let person1 = {
  name: "따뜻한",
};

let person2 = {
  name: "강아지",
};

printName(person);
printName(person1);
printName(person2);

반복이 줄어들게 됩니다. 매개변수의 사용 목적은 함수에게 들어오는 값이 무엇인지 알려주는 것이라고 할 수 있습니다. '이름을 부르는 역할을 하는 함수'가 있다고 한다면 '따뜻한'의 이름을 불러라, '강아지'의 이름을 불러라 같이 매개변수(따뜻한, 강아지)가 함수의 입력 값을 알려준다고 보시면 됩니다

정중한 몽구스

2024.03.14

위에 적은 내용이 매개변수를 쓰는 이유입니다.

매개변수를 빼도 동일한 결과가 나온 이유는 함수 안에서 함수 바깥의 person 값을 가져와서 그렇습니다. 하지만, 매개변수가 없다면 함수의 입력값을 알려주지 못하기 때문에 위에 적은 내용중 처음에 나오는 함수를 없앤 코드와 동일하게 동작합니다.

파이썬, html/css 공부를 하신다음 이 강의를 듣는걸 추천드립니다. 이 강의의 퀄리티가 좋은 것과 별개로 초심자인데 바로 이 강의를 들으면 온전하게 강의를 이해하기 어렵습니다.

위키독스 파이썬 함수 글 링크입니다.

https://wikidocs.net/24

따뜻한 강아지

질문자

2024.03.19

와.. 정말 감사합니다 완벽히 이해되진 않았지만 알려주신 문서에서 함수 기본기부터 배워보고 다시 읽어볼게요 시간 내서 답변해주셔서 정말 감사합니다!

이정환 Winterlood

지식공유자

2024.03.15

안녕하세요 이정환입니다.

몽구스님께서 답변을 너무 잘 달아주셔서 몇자 덧붙이는 느낌으로 적어봅니다!

우선 질문자님께서 올려주신 코드에서 printName함수의 매개변수인 person과 전역 스코프로 선언되어 있는 person 변수는 단지 이름만 같습니다.

따라서 다음과 같이 printName 함수를 호출하면서 인수 전달을 생략하시게 되면
printName 함수에서는 매개변수로 아무런 값도 받지 않기 때문에
person 매개변수에는 undefined 값이 들어가게 됩니다.

function printName(person) {
  const name = person && person.name;
  console.log(name || "person의 값이 없습니다.");
}

let person = {
  name: "이정환",
};

printName(); // 인수 전달 생략!
// 출력 : person의 값이 없습니다

그러나 이때 printName 함수의 person 매개변수 선언을 삭제하게 되면
이제 printName 함수 내부의 person은 전역 스코프에 선언된 person 변수를 참조하게 됩니다.

function printName() { // 매개변수 선언 생략
  const name = person && person.name;
  console.log(name || "person의 값이 없습니다.");
}

let person = {
  name: "이정환",
};

printName(); // 인수 전달 생략
// 출력 : "이정환"

이렇게 동작해도 전혀 문제는 없으나 이 경우는 printName 이라는 함수에서 매개변수를 받아 값을 처리하는 방식이 아닌, 그저 전역 스코프에 선언된 person 이라는 변수를 참조해 사용하는 방식이므로 함수의 출력 결과가 전역 스코프에 선언된 person 이라는 변수에 종속됩니다. 한마디로 고정된다는 것이죠 해당 변수의 값이 바뀌지 않는다면 printName 함수는 언제나 같은 출력 결과를 내뱉게 될 것 입니다.

따라서 보통은 함수에 동적인 데이터를 전달해, 호출할 때 마다 다른 결과값을 얻어내기 위해 다음과 같이 매개변수 및 인수를 이용합니다.

function printName(person) { // 매개변수 전달 완료
  const name = person && person.name;
  console.log(name || "person의 값이 없습니다.");
}

let person = {
  name: "이정환",
};

printName(person); // 인수 전달
// 출력 : "이정환"

그러나 매개변수의 이름과 전역 스코프로 선언된 변수의 이름이 동일하여 혼란을 겪으신 것 같은데요 ㅠㅠ
다음과 같이 매개변수의 이름을 p 정도로 생각하고 코드를 다시 한번 들여다 보시면 이해하기 쉬우실겁니다.

function printName(p) { // 매개변수 전달 완료
  const name = p && p.name;
  console.log(name || "person의 값이 없습니다.");
}

let person = {
  name: "이정환",
};

printName(person); // 인수 전달
// 출력 : "이정환"

위 코드에서는 printName 함수를 호출하면서 인수로 person 변수에 담긴 객체를 전달했습니다.

그리고 이 객체는 printName 함수의 p 매개변수에 그대로 저장됩니다.

그리고 함수가 동작하여 p 매개변수에 저장된 객체가 존재하는 값인지 유무를 확인한 후
존재한다면 p.name을 아니라면 person의 값이 없습니다 라는 메세지를 콘솔에 출력하게 됩니다.

이정환 Winterlood

지식공유자

2024.03.15

추가로 함수와 매개변수와 관련해 다음 아티클을 읽어보시면 좋을 것 같습니다!

https://reactjs.winterlood.com/d2ffdbe0-c061-4d52-9d83-d4f39e401680#a5ccb1d584cb460a810f773766a58a6d

이정환 Winterlood

지식공유자

2024.03.15

혹시나 이해가 좀 어려우시다면 편하게 추가 질문 계속 달아주세요!!

질문은 언제나 환영입니다 😃😃😃😃😃

이해가 되실 때 까지 답변 드리겠습니다 !!!

따뜻한 강아지

질문자

2024.03.12

계속 뚫어져라 쳐다 보니
이전 강의에서 배웠던 것들이 생각나면서
머릿속이 뒤죽박죽 섞이면서
약간 아리송하게 알 것 같은데
혹시 제가 생각한 게 맞는지...

person이라는 객체가 전역 스코프에서 선언되어서
사실 printName이라는 함수에서 접근이 가능하고
person 객체가 함수보다 더 뒤에 선언 됐지만 호이스팅이 발생해서 결국 매개변수를 생략하더라도 문제가 없이 실행되는 코드인데

person이라는 객체를 printName() 함수 내에서 선언했을 때 지역 스코프를 갖게 될 경우를 예상해서
예시를 들으신 걸까요?

따뜻한 강아지

매개변수를 넣는 이유

이 글과 비슷한 Q&A

password is required 오류

같은 레벨 자식에서의 이벤트 핸들링 방법 문의

settings.jason 3가지

섹션 1. 6번째 강의 질문입니다.