<모던 자바스크립트 Deep Dive> 11~12.4장 원시 값과 객체의 비교, 함수 요약

11. 원시 값과 객체의 비교

1) 원시 타입과 객체 타입의 차이점

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

- 원시 값을 변수에 할당하면 변수에 실제 값이 저장됨, 객체를 변수에 할당하면 변수에 참조 값이 저장됨

- 원시 값을 갖는 변수를 다른 변수에 할당할 경우 원시 값이 복사되어 전달(값에 의한 전달), 객체를 가리키는 변수를 다른 변수에 할당할 경우 참조 값이 복사되어 전달(참조에 의한 전달)

 

 

2) 원시 값

- 변수 :  하나의 값을 저장하기 위해 확보한 메모리 공간

- 값 : 변수에 저장된 데이터로서 표현식이 평가되어 생성된 결과

- 원시 값인 즉슨 '변경 불가능한 값'이므로 데이터의 신뢰성이 보장됨

- 원시 값을 할당한 변수는 변수의 값을 바꾸려면 재할당하는 방법밖에는 없음

- 다른 언어와 달리 자바스크립트는 개발자의 편의성을 위해 원시 타입의 문자열 타입을 제공함(원시 타입이므로 변경 불가)

- 이 때의 이 문자열 타입은 유사 배열 객체(배열처럼 인덱스로 접근 가능, length 프로퍼티를 갖는 객체)임

- 원시 값을 갖는 변수를 이용하여 값에 의한 전달이 가능하나, 메모리 공간은 다르게 저장되어 따로 각각 존재하게 됨

- 값에 의한 전달도 사실은 메모리 주소를 전달하는 것임

 

 

3) 객체

- 객체는 프로퍼티에 있어 자유롭다는 특징을 가지므로 메모리 공간을 사전에 정할 수 없음

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

- 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값에 접근이 가능

- 객체를 할당한 변수는 변수의 값인 객체를 직접 변경이 가능함

- 이처럼 객체 관리의 효율, 메모리상 단점으로 인해 객체를 변경하는 것이 가능하나 여러 개의 식별자가 하나의 객체를 공유하는 것이 가능해진다는 부작용을 가짐

- 즉, 객체를 가리키는 변수(원본)을 다른 변수(사본)에 할당하면 원본의 참조 값이 복사되어 전달되는 참조에 의한 전달이 일어나는데, 이처럼 두 개의 식별자가 하나의 객체를 공유하게 됨

 

 

12. 함수

1) 함수

- 함수는 재료를 투입받아 제품을 생산하는 기계와 같음

- 프로그래밍의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸 하나의 실행 단위로 정의한 것

- 입력을 전달받는 변수는 매개변수, 입력은 인수, 출력은 반환값이라 칭함

- 함수를 생성하려면 함수 정의 후 정의한 함수에 인수를 전달하는 함수 호출을 하면 됨

 

 

2) 함수 사용의 이유

- 함수는 필요할 때 언제든지 여러 번 호출이 가능하여 코드의 재사용이라는 이점을 가짐

- 코드의 재사용을 높임으로써 유지보수의 편의성, 코드의 신뢰성을 높임

- 또한 함수에 적절한 식별자 이름을 붙임으로써 코드의 가독성을 높이는 영향을 줌

 

 

3) 함수 리터럴

- 자바스크립트의 함수는 객체 타입의 값이므로 함수 리터럴로 생성 가능

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

 

 

4) 함수 정의

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

- 함수를 정의하는 방법에는 4가지가 있다.

 

1. 함수 선언문

- 단, 코드 문맥에 따라 자바스크립트 엔진에서 해석이 달라질 수 있음을 유의

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

 

2. 함수 표현식

- 자바스크립트의 함수는 값의 성질을 갖는 일급 객체이므로 변수에 할당하는 방법으로 정의가 가능함(함수 리터럴은 함수 이름 생략 가능)

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

 

*함수 호이스팅 : 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출이 가능하다. 이러한 자바스크립트 고유의 특징을 함수 호이스팅이라 칭한다. 다만 함수 표현식으로 함수를 정의하면 함수 호이스팅이 아닌 변수 호이스팅이 발생한다. 

 

3. Function 생성자 함수

- 객체를 생성하는 생성자 함수 + 매개변수 목록 + 함수 몸체 + new 연산자

- 일반적이지 않으며 바람직하지 않으므로 권장하지 않음

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

 

4. 화살표 함수

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

 

 

 

 

 

참고 : 도서 <모던 자바스크립트 Deep Dive>