12, 13장 정리 #3
12, 13장 정리 #3
Conversation
12장 함수 내용정리
13장 스코프 내용정리
MinboyKim
requested review from
junepil,
Turtle-Hwan,
joeuns,
whddltjdwhd,
zziglet and
clicelee
| * 함수 객체는 일반 객체에는 없는 고유한 프로퍼티를 갖는다. (prototype, length, name, arguments 등등...) | ||
|
|
||
| ## 12.4 함수 정의 | ||
| * 함수를 정의하는 방법은 4가지가 있다. |
| ``` | ||
|
|
||
| Q. 엥 위 코드 보면 함수 선언문 변수에 할당하고 있는거 아닌가요 | ||
| A. 똑같이 생겼지만 자바스크립트 엔진은 위를 함수 선언문이 아닌 함수 리터럴 **표현식**으로 해석한다. |
There was a problem hiding this comment.
변수 명이랑 함수 명이 같아서 어떤 값이 호출되는 건지 모르겠어서 테스트해봤더니 함수 이름은 그냥 무시되네요. 이런 코드를 작성한다면 혼돈을 줄이기 위해 함수 표현식을 사용하는게 나아 보입니다.
There was a problem hiding this comment.
저도 읽자마자 이 부분이 가장 궁금했는데 바로 ... 예시가 있어서 놀랐어요🐱
|
|
||
| ### 12.4.4 Function 생성자 함수 | ||
| ```javascript | ||
| var add = new Function('x', 'y', 'return x + y'); |
| cache: false | ||
| }); | ||
| ``` | ||
| * 3개 이상의 매개변수가 필요하면 하나의 매개변수를 선언하고 객체를 인수로 전달하는 것이 유리하다. |
There was a problem hiding this comment.
매개변수의 순서를 신경 쓸 필요 없이 key, value를 직접 사용할 수 있어서 좋은 방법이라고 생각해요
There was a problem hiding this comment.
여기에 구조 분해 할당 문법까지 사용하면 가독성도 챙길 수 있는 것 같아요
| * 객체를 생성하는 함수인 생성자 함수를 이용하면 함수 객체를 생성할 수 있다. | ||
| * 하지만 이렇게 생성한 함수는 `클로저`를 생성하지 않는 등 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작한다. | ||
| * 따라서 이렇게 함수를 생성하는 방식은 일반적이지도 않고 바람직하지도 않다. |
| cache: false | ||
| }); | ||
| ``` | ||
| * 3개 이상의 매개변수가 필요하면 하나의 매개변수를 선언하고 객체를 인수로 전달하는 것이 유리하다. |
There was a problem hiding this comment.
여기에 구조 분해 할당 문법까지 사용하면 가독성도 챙길 수 있는 것 같아요
| > [!info] | ||
| > * 외부 상태를 변경하지 않고 외부 상태에 의존하지도 않는 함수를 **순수 함수**라 한다. | ||
| > * 순수 함수를 통해 프로그램의 안정성을 높이려는 프로그래밍 패러다임을 **함수형 프로그래밍**이라 한다. |
There was a problem hiding this comment.
모든 함수들을 순수 함수로 만드는 것이 가능한가요?
fetch 등의 비동기 함수를 사용한다면 부수 효과(side effect)가 발생할 수밖에 없을 것 같은데 어떤 방법으로 해결 가능할지 궁금해요
There was a problem hiding this comment.
비동기 함수를 사용하는 경우 부수효과가 있을수 밖에 없기에 불가능하다고 하네요
| ## 13.5 렉시컬 스코프 | ||
| > [!abstract] | ||
| > *동적 스코프* - 함수를 **어디서 호출**했는지에 따라 함수의 상위 스코프를 결정 | ||
| > *정적 스코프, 렉시컬 스코프* - 함수를 **어디서 정의**했는지에 따라 함수의 상위 스코프를 결정 | ||
| > | ||
| > 자바스크립트는 렉시컬 스코프를 따른다! | ||
| > 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않는다. |
There was a problem hiding this comment.
특히 변수를 가져올 때, 함수가 호출된 위치가 아닌 선언(정의)된 위치에서 가져온다는 점이 중요하더라고요
| ```javascript | ||
| function foo() { console.log('foo'); } | ||
| foo() // foo | ||
|
|
||
| (function bar() { console.log('bar'); }); | ||
| bar() // ReferenceError: bar is not defined | ||
| ``` |
There was a problem hiding this comment.
한국어가 딸리는 저에게는 교재의 이 그림이 빠른 이해를 도와주었습니다
| Q. 엥 똑같이 생겼는데 아래는 왜 함수 리터럴 표현식인가요 | ||
| A. `( )` 는 그룹 연산자이고, 안쪽은 표현식(값)의 자리이다. 따라서 아래쪽은 함수 리터럴 표현식이다. |
There was a problem hiding this comment.
그룹연산자..를 사용한 함수 리터럴 표현식..
이런 걸 왜 가능하게 만들었을까 생각하다가 IIFE가 떠올랐습니다.. 더욱...딥하게...이해할 수 있었습니다...
[자바스크립트의 IIFE]
https://velog.io/@doondoony/javascript-iife
| * ES6에서 도입된 화살표 함수는 `function` 키워드 대신 화살표 `=>` 를 사용해 간략한 방법으로 함수를 선언할 수 있다. | ||
| * 화살표 함수는 항상 익명 함수로 정의한다. | ||
| * 화살표 함수는 내부 동작 또한 간략화 되어 있다. | ||
| * 자세한 건 나중에 살펴보자. |
|
|
||
| ### 12.4.4 Function 생성자 함수 | ||
| ```javascript | ||
| var add = new Function('x', 'y', 'return x + y'); |
There was a problem hiding this comment.
문자열로 함수의 코드를 받아 실행한다는게 너무 어이없어요 ㅋㅋㅋ🤣
| console.log(sum(1, 2)); // 3 | ||
| console.log(sum(1, 2, 3)); // 6 | ||
| ``` | ||
| 보통 Rest 파라미터를 이용해 이런식으로 구현하는 경우가 더 많았던 것 같다. |
There was a problem hiding this comment.
지난번에 스터디 때 알게된 reset 파라미터의 활용법을 다시 한번 익힐 수 있었습니다!
function test(firstParam, ...restParams) {
console.log(firstParam); // hi
console.log(restParams); // hello, good, bye, hungry
}
test('hi', 'hello', 'good', 'bye', 'hungry');| ## 13.3 스코프 체인 | ||
| * 함수는 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있다. | ||
| * 스코프는 함수의 중첩에 의해 **계층적 구조**를 갖는다. | ||
|  | ||
| * 이렇게 스코프가 계층적으로 연결된 것을 *스코프 체인*이라 한다. | ||
| * 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 **변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로** 이동하며 선언된 변수를 검색한다. | ||
| * 자바스크립트 엔진은 런타임 이전에 위 그림과 유사한 자료구조인 *렉시컬 환경*을 생성하고, 변수 선언, 할당, 검색 모두 이 자료구조 상에서 이루어진다. |
There was a problem hiding this comment.
아하 스코프 체인을 말로만 들었었는데 사진으로 보니 한번에 이해할 수 있었어요! 👍
|
|
||
| ## 13.4 함수 레벨 스코프 | ||
| > [!abstract] | ||
| > `var` 키워드로 선언된 변수 - 함수의 코드 블록만을 지역 스코프로 인정 |
There was a problem hiding this comment.
var의 다양한 유해성 중 하나... 👎 👎
| }()); | ||
| ``` | ||
| * 함수 정의와 동시에 즉시 호출되고 다시 호출할 수 없는 함수를 *즉시 실행 함수*라 한다. | ||
| * 옛날엔 전역 스코프 오염 방지, 데이터 캡슐화 등등 때문에 종종 썼지만 ES6 이후로는 잘 안쓴다. |
There was a problem hiding this comment.
저도 개발할 때 안 써본것 같아서 이런게 왜 만들어진 건지 찾아보니 전역스코프 오염 방지로 ES6 이전에 자주 쓰였다 하더라고요.
Q: 그럼 이제 안 배워도 되는거 아닌가요?
A: 지금도 비동기 함수를 즉시 실행하고 싶을때 사용하기도 하네요
(async () => {
try {
const result = await someAsyncFunction();
console.log(result);
} catch (error) {
console.error(error);
}
})();| > [!abstract] | ||
| > `var` 키워드로 선언된 변수 - 함수의 코드 블록만을 지역 스코프로 인정 | ||
| > `let`, `const` 키워드로 선언된 변수 - 블록 레벨 스코프 지원 | ||
|
|
There was a problem hiding this comment.
두 코드의 차이에 대해 이야기 해봅시다
for (var i = 0; i < 3; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
}for (let i = 0; i < 3; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
}두 코드의 결과 값이 같을까요?
PTAL 🐧