모던 자바스크립트 DeepDive 공부 내용 4차

이번 정리 목차는 11 ~ 12장이다.

11장 원시 값과 객체 비교

원시 값 VS 객체

1.     변경 불가능 한 값 vs 변경 가능한 값

2.     변수에 값 할당 시 변수에 실제 값 저장 vs 참조 값 저장

3.     다른 변수에 값을 갖는 변수 할당 시 원시 값이 복사되어 전달(값에 의한 전달) vs 참조 값이 복사되어 전달(참조에 의한 전달)

 

원시 값

-       원시 타입의 값, 원시 값은 변경 불가능한 값

-       변경 불가능하다는 것은 변수가 아니라 값에 대한 진술이다

-       불변성: 변수 값 변경하기 위해 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간을 변경하는 특성

-       불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에는 변수 값을 변경할 방법 없음

 

[문자열과 불변성]

-       문자열은 원시 타입이며, 변경이 불가능하다.

-       유사 배열 객체이면서 이터러블 이므로 배열과 유사하게 문자 접근 가능

-       유사배열객체: 배열처럼 인덱스로 프로퍼티 값 접근 할 수 있고 length 프로퍼티를 갖는 객체

-       이터러블: 반복할 수 있는 객체

 

[값에 의한 전달]

-       변수에 원시 값을 갖는 변수를 할당하면 할당 받는 변수에는 할당되는 변수의 원시 값이 복사되어 전달

-       할당 받는 변수와 할당되는 변수의 값은 다른 메모리 공간의 저장된 별개의 값

-       사실은 변수에는 값을 전달하는 것이 아니라 메모리 주소를 전달.

-       단 전달된 메모리 주소를 통해 메모리 공간에 접근하면 값을 참조할 수 있다.

-       결국 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다는 것

 

객체

-       객체(참조)타입의 값, 변경 가능한 값

-       객체를 할당한 변수에는 객체가 실제로 저장된 메모리 공간의 주소가 저장

-       이 값을 참조 값이라 함. 참조 값을 통해 객체에 접근

-       객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있고 동적 프로퍼티 추가 가능하고 프로퍼티 값을 갱신할 수도 있으며 프로퍼티 자체를 삭제 가능

-       객체를 할당한 변수의 프로퍼티 값 갱신을 해도 참조 값은 변하지 않음

-       여러 개의 식별자가 하나의 객체를 공유할 수 있는 단점 존재

 

[참조에 의한 전달]

-       객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달

-       여러 식별자가 하나의 객체를 공유 하고 서로 영향을 받음

-       값에 의한 전달과 참조에 의한 전달은 식별자가 기억하는 메모리 공간에 저장되어 있는 값을 복사해서 전달한다는 면에서 동일, 변수에 저장된 값이 원시 값이냐 참조 값이냐 차이만 있을 뿐임

-       JS는 참조에 의한 전달은 존재하지 않고 값에 의한 전달만 존재한다 할 수 있음

 

12장 함수

[함수란]

-       일련의 과정을 문으로 구현하고 코드 블록으로 감싸 하나의 실행 단위로 정의한 것

-       입력을 받아 출력을 내보냄

-       매개변수: 함수 내부로 입력을 전달받는 변수

-       인수: 입력

-       반환 값: 출력

-       함수는 값이며 여러 개 존재할 수 있으므로 식별자인 함수 이름 사용할 수 있음

-       함수는 함수 정의를 통해 생성

-       함수 정의만으로 함수 실행 X, 함수 호출을 해야함

-       함수 호출을 하면 코드 블록에 담긴 문들이 일괄적으로 실행 되어 반환 값을 반환

 

[함수를 사용하는 이유]

-       코드의 재사용 측면 용이

-       중복 제거

-       유지보수와 신뢰성 증가

-       가독성 향상

 

[함수 리터럴]

-       함수는 객체 타입의 값이다.

-       함수도 함수 리터럴로 생성 가능

-       function 키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성

-       리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법

-       함수 리터럴도 평가되어 값을 생성하며 이 값은 객체임, 즉 함수는 객체

-       일반 객체는 호출할 수 없지만 함수는 호출할 수 있음

-       함수 객체만의 고유한 프로퍼티를 갖는다.

 

[함수 정의]

-       함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것

-       함수 선언문, 함수 표현식, Function생성자 함수, 화살표 함수를 사용하여 정의

 

[함수 선언문]

function add(x, y){ return x + y;};

-       함수 리터럴과 형태가 동일

-       함수 선언문은 함수 이름 생략 X

-       표현식이 아닌 문

-       엔진이 문맥에 따라 함수 선언문 또는 함수 리터럴 표현식으로 해석

-       엔진은 함수 선언문을 해석해 함수 객체를 생성

-       엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당

-       함수는 함수 이름으로 호출하는 것이 아닌 함수 객체를 가리키는 식별자로 호출한다.

 

[함수 표현식]

var add = function (x ,y) { return x + y;) };

-       js의 함수는 일급 객체(값처럼 자유롭게 사용가능)

-       함수 리터럴로 생성한 함수 객체를 변수에 할당하는 방식이 함수 표현식

-       함수 이름 생략가능, 익명함수라 함, 일반적으로 이름 생략

-       함수 표현식으로 정의한 함수는 반드시 함수 표현식 이후에 참조 또는 호출해야 함

-       함수 표현식 사용 권장

 

[Function 생성자 함수]

var add = new Function(“x”, “y”, “return x + y”);

-       빌트인 함수인 Function 생성자 함수에 매개변수 목록과 함수 몸체를 문자열로 전달

-       new 연산자와 함께 호출하면 함수 객체 생성해서 반환

-       new 연산자 없이 호출해도 결과 동일

-       일반적이지 않고 바람직하지 않음

 

[화살표 함수]

const add = (x, y) => x + y;

-       ES6 도입, Function키워드 대신 => 사용

-       항상 익명 함수로 정의

-       생성자 함수로 사용X, this 바인딩 방식 다름, prototype 프로퍼티 X, arguments 객체 생성X

 

[함수 호출]

-       함수를 가리키는 식별자와 함수 호출 연산자()로 호출

-       함수 호출 연산자 내에서는 0개 이상의 인수를 쉼표로 나열

-       현재 실행 흐름 중단하고 호출된 함수로 실행 흐름 옮긴다.

-       매개변수에 인수가 순서대로 할당되고 함수 몸체의 문들이 실행되기 시작

 

[매개변수와 인수]

-       함수를 실행하기 위해 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개변수를 통해 인수를 전달

-       인수는 값으로 평가될 수 있는 표현식이어야 함

-       인수는 함수 호출 시 지정하며 개수와 타입 제한 X

-       매개변수는 함수를 정의할 때 선언하며, 함수 몸체 내부에서 변수와 동일하게 취급

-       매개변수의 스코프는 함수 내부이다.

-       함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크X

-       인수가 부족하면 undefined, 초과되면 무시, 에러 발생 X

-       모든 인수는 암묵적으로 arguments객체의 프로퍼티로 보관

 

[인수 확인]

-       단축 평가를 사용해 매개변수에 기본값 할당하는 방법

-       ES6에서 도입된 매개변수 기본값 사용

-       매개변수 기본값은 매개변수에 인수를 전달하지 않았거나 undefined를 전달한 경우에만 유효

 

[매개변수의 최대 개수]

-       제한 하고 있지 않음

-       최대 3개 이상 넘지 않기를 권장

-       그 이상 필요하면 매개변수를 선언하고 객체를 인수로 전달하는 것이 유리

 

[반환문]

-       return 키워드와 표현식(반환 값)으로 이루어진 반환문을 사용하여 실행 결과를 함수 외부로 반환

-       반환문 이후에 다른 문 존재하면 실행되지 않고 무시

-       return 키워드 뒤에 명시적으로 반환 값 지정하지 않으면 undefined 반환

-       반환문 생략하면 암묵적으로 undefined 반환

-       줄바꿈 있으면 의도치 않은 결과 초래

-       함수 몸체 내부에서만 사용 가능, 전역에서 사용하면 문법 에러

 

[참조에 의한 전달과 외부 상태의 변경]

-       매개변수도 값에 의한 전달, 참조에 의한 전달 방식 그대로 따름

-       객체의 변경을 추적하려면 옵저버 패턴을 통해 대응필요

-       객체를 불변 객체로 만들어 사용하는 것도 방법

-       깊은 복사를 하면 불변 객체

-       외부 상태를 변경하지 않고 외부 상태에 의존하지도 않는 함수를 순수함수라 함

-       순수 함수를 통해 부수 효과를 최대한 억제하는 프로그래밍을 함수형 프로그래밍

 

다양한 함수의 형태

[즉시 실행 함수]

(function () {} ());

-       함수 정의와 동시에 즉시 호출되는 함수

-       단 한 번만 호출되며 다시 호출 불가

-       익명 함수가 일반적이나 기명 함수 가능

-       그룹연산자()내의 기명함수는 함수 리터럴로 평가

-       일반 함수처럼 값을 반환할 수 있고 인수 전달 가능

-       즉시 실행 함수 내에 코드를 모아 두면 변수나 함수 이름의 충돌 방지

 

[재귀 함수]

function countdown(n){
if(n<0) return;
console.log(n);
countdown(n-1);
}

-       자기 자신을 호출을 하는 함수

-       무한 재귀 호출을 하기 때문에 탈출 조건 반드시 필요

 

[중첩 함수]

function outer(){
var x =1;
function inner(){
var y =2;
console.log(x+y);

}

inner();
}

-       함수 내부에 정의된 함수

-       중첩 함수를 포함하는 함수는 외부 함수

-       중첩 함수는 외부 함수 내부에서만 호출 가능

-       외부 함수를 돕는 헬퍼 함수의 역할을 한다.

 

[콜백 함수]

-       함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수

-       변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수

-       콜백 함수도 고차함수에 전달되어 헬퍼 함수 역할

-       고차 함수는 콜백 함수를 자신의 일부분으로 합성한다.

-       고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다.

-       콜백 함수는 고차 함수에 의해 호출되며 고차 함수는 필요에 따라 콜백 함수를 인수에 전달할 수 있다.

-       고차 함수에 콜백 함수를 전달할 때 함수 자체를 전달해야 한다

-       콜백 함수는 함수형 프로그래밍 패러다임뿐 아니라 비동기 처리에 중요한 패턴

-       배열 고차함수에도 사용

 

[순수함수와 비 순수 함수]

-       순수함수: 어떤 외부상태에 의존하지 않고 변경도 하지 않는 부수효과가 없는 함수

-       동일한 인수가 전달되면 언제나 동일한 값을 반환하는 함수

-       오직 매개변수를 통해 함수 내부로 전달된 인수에게만 의존해 값을 생성해 반환

-       최소 하나 이상의 인수를 전달받음

 

-       비 순수 함수: 어떤 외부상태에 의존하거나 외부 상태를 변경하는 부수효과 있는 함수

-       순수 함수를 사용하는 것이 좋다