본문 바로가기

JS skills

10. for...in / 기명 함수 표현식

💨 for...in

 

for...in 문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자여려로 키각 지정된 모든 열거 가능한 속성에 대해 반복한다.

 

문법 : for (variable in object) { ... }

 

파라미터 : 

 

variable => 매번 반복마다 다른 속성이름이 변수(variable) 로 지정된다.

 

object => 반복 작업을 수행할 객체로 열거형 속성을 가지고 있는 객체.

 

const object = { name: "mung", age: 28 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

 

 

 

 

✅ for...in 을 사용하는 이유 

 

for...in 구문은 객체의 반복을 위해 사용하지 않는다. 객체의 반복을 위해서라면 forEach() 나 for...of 를 사용하는 것이 좋다. for...in 구문은 객체의 속성을 확인할 수 있기 때문에 실질적으로 디버깅을 위해 사용될 수 있다. 배열이 데이터의 저장에 있어서는 더 실용적이지만, 키-값 쌍이 선호되는 데이터의 경우(속성이 "key"의 역할) 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in을 사용할 수 있다. 


 

💨 기명 함수 표현식 

 

일반 함수 표현식 

 

let sayHi = function(who) {
  alert(`Hello, ${who}`);
};

 

기명 함수 표현식

 

let sayHi = function func(who) {
  alert(`Hello, ${who}`);
};

sayHi("mung"); // Hello, mung

 

✅ 그래서 왜 쓰는데?? 

 

1. 이름을 사용해 함수 표현식 내부에서 자기 자신을 참조할 수 있다.

 

2. 기명 함수 표현식 외부에선 그 이름을 사용할 수 없다.

 

즉, 일반 함수처럼 코드를 작성하면 외부 코드에 기존 코드가 변경될 수 있다는 문제가 생긴다.

 

let dream = function (what) {
  if (what) {
    console.log(`My dream is ${what}`);
  } else {
    dream("soccer"); 
  }
};

let hobby = dream;
dream = null;

hobby();

 

 

 

 

에러는 함수가 dream 을 자신의 외부 렉시컬 환경에서 갖고 오기 때문에 발생한다. 로컬 렉시컬 환경엔 dream이 없기 때문에 외부 렉시컬 환경에서 dream 을 찾는데, 함수 호출 시점에 외부 렉시컬 환경의 dream 엔 null 이 저장되어있기 때문에 에러가 발생한다.

 

let dream = function myDream(what) {  // 함수에 이름을 붙여줬다.
  if (what) {
    console.log(`My dream is ${what}`);
  } else {
    myDream("soccer");
  }
};

let hobby = dream;
dream = null;

hobby();

 

 

올바르게 출력되었다.

 

'JS skills' 카테고리의 다른 글

12. return  (0) 2021.08.30
11. 팩토리 함수  (0) 2021.08.28
9. HTML templating  (0) 2021.08.27
8. method chaining  (0) 2021.08.27
7. 객체 안에 함수 저장하기  (0) 2021.08.26