모던자바스크립트 Deep Dive 스터디 1주차

11장 원시 값과 객체의 비교

• 원시 값은 변경 불가능한 값, 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장됨

• 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달됨

// 예시
let name = 'cookie';
let name2 = name;

• 객체는 변경 가능한 값, 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장됨

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

• So, 원시 값과 다르게 여러 개의 식별자가 하나의 객체를 공유할 수 있다는 단점이 있음

// 예시
let person = {
		name: 'kim'
};

• 얕은 복사 vs 깊은 복사

  : 그냥 간단하게 원시 값을 할당한 변수를 할당한 변수를 다른 변수에 할당하는 것을 깊은 복사라 생각하고,

  객체를 할당한 변수를 다른 변수에 할당하는 것을 얕은 복사라고 생각하자

• 헷갈렸던 부분

// 객체 리터럴은 평가될 때마다 객체 생성한다는 것!!!
var person1 = {
		name: 'kim'
};

var person2 = {
		name: 'kim'
};

console.log(person1 === person2); // false
console.log(person1.name === person2.name); // true

(그외 추가적으로 궁금해서 알아본 내용)

• 문자열 같은 경우 자바에서는 String 객체로 처리하여 문자열이 객체 타입인데, 자바스크립트는 원시 타입인 문자열 타입을 제공해 문자열이 원시 값임

• 유사 배열 객체: 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말함

  cf) 21.3절 원시 값과 래퍼 객체 공부할 때 자세하게 살펴보기

  일단은 문자열 자체는 원시 값이나 객체처럼 사용하면 원시 값을 감싸는 래퍼 객체로 자동 변환된다는 것!

• 식별자 용어 의미

  : “메모리 주소에 붙인 이름”으로 변수와 같은 식별자는 값이 아니라 메모리 주소를 기억하고 있음

  : 식별자로 값을 구별해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 것 의미

12장 함수

• 자바스크립트의 함수는 객체 타입의 값임

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

// 변수에 함수 리터럴 할당
var f = function add(x,y) {
		return x + y;
}

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

• 정의된 함수는 자바스크립트 엔진에 의해 평가되어 함수 객체가 됨

// 함수 정의 방식 4가지

// 함수 선언문
// 함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당됨
// 함수 선언문은 함수 이름 생략x
function add(x,y) {
		return x+y;
}

// 함수 표현식
var add = function(x,y) {
		return x+y;
}

// Function 생성자 함수
var add = new Function('x', 'y', 'return x+y');

// 화살표 함수(ES6)
var add = (x,y) => x+y;

• 자바스크립트의 함수는 값처럼 변수에 할당할 수도 있고, 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있음 (이같은 성질을 갖는 객체를 일급 객체라고 함)

• 함수가 일급 객체라는 것은 함수를 값처럼 자유롭게 사용할 수 있다는 의미

• 함수 생성 시점과 함수 호이스팅

  : 함수 선언문으로 함수를 정의하면 런타임 이전에 함수 객체가 먼저 생성되므로 함수 호이스팅에 의해 호출됨

// 함수 참조
console.dir(add); // f add(x,y)
console.dir(sub); // undefined

// 함수 호출
console.log(add(2,5)); // 7
console.log(sub(2,5)); // TypeError: sub is not a function

// 함수 선언문
function add(x,y) {
		return x+y;
}

// 함수 표현식
var sub = function(x,y) {
		return x-y;
}

• 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않음

• 또한, 매개변수는 순서에 의미가 있으며 매개변수가 많아지면 함수를 호출할 때 전달해야 할 인수의 순서를 고려해야함

• 매개변수의 개수가 많다는 것은 함수가 여러 가지 일을 한다는 증거이므로 바람직하지 않음. 따라서 매개변수는 최대 3개 이상을 넘지 않는 것을 권장함. 만약 그 이상의 매개변수가 필요하다면 하나의 매개변수를 선언하고 객체를 인수로 전달하는 것이 유리함

• 다양한 함수의 형태

  : 즉시 실행 함수, 재귀 함수, 중첩 함수, 콜백 함수, 순수 함수와 비순수 함수

  : 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 하며, 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 함

(그외 추가적으로 궁금해서 알아본 내용)

• 리터럴이라는 용어가 많이 쓰이는데 공부하면서 상수랑 헷갈리면 안됨!

  : 상수랑 리터럴이랑 같은 용어인지 알고 사용했는데 달랐다.

  : 상수는 변하지 않는 변수이고, 리터럴은 데이터 그 자체로 변수에 넣는 변하지 않는 데이터 의미

// 예시
const num = 1; // num은 상수, 1은 숫자 리터럴
const array = []; // array는 상수, []는 배열 리터럴

• 이때까지 함수 이름으로 함수가 호출되는 줄 알았는데 식별자로 호출이 된거였더니… 완전 잘못 알고 있었다…

• 함수 호이스팅 vs 변수 호이스팅 미묘하게 다르므로 주의!

  : 함수 표현식은 변수 선언문과 변수 할당문을 한 번에 기술한 축약 표현과 동일하게 동작함

  : 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 됨