인프런 커뮤니티 질문&답변

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);

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

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

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

우선 질문자님께서 올려주신 코드에서 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의 값이 없습니다 라는 메세지를 콘솔에 출력하게 됩니다.

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

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

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