JavaScript 기초 공부 3

Node.js 쪽을 더 공부하겠다고 마음먹어서 예전에 봤었던 책보다 좀 더 두꺼운 기본서 느낌의 JavaScript 책을 구매했다. 오늘 도착해서 지금 조금 읽으며 공부중인데 진짜 전공서적만큼 두툼하고 양도 많은데 나름 컬러풀하고 설명도 자세해서 괜찮은 것 같다. 나중에 TypeScript도 공부하려면 어쨌든 JavaScript를 잘 해놔야 하니까..!!

 

http://www.yes24.com/Product/Goods/92742567

모던 자바스크립트 Deep Dive - YES24

쨌든 책보고 공부한 내용들을 좀 기록해두려 한다. 블로그에 써두면 개발할 때 더 편하게 보게되고 최근에 node.js 스터디 시작해서 복습겸 다시 훑는 중... node책에서는 async나 promise 이런 부분을 깊게 다루진 않다보니 애매하게 알고 있어서 누가 물어보면 정확하게 설명을 못할 것 같았기 때문..

 

일단 객체-

---

객체

- 프로퍼티와 메서드로 구성된 집합체이다. 프로퍼티는 객체의 상태를 나타내는 값(data), 메서드는 프로퍼티를 참조하고 조작할 수 잇는 동작(behavior)이다. 객체에 프로퍼티(상태)와 메서드(동작)을 하나의 단위로 구조화 가능하다.

- C, java와 같은 클래스 기반 객체지향언어와 달리 JavaScript는 프로토타입 기반 객체지향 언어이다. 객체 리터럴, Object생성자 함수 등등을 사용해서 객체를 생성하고 ES6부터는 클래스가 추가되었다. 

- 객체 생성시에는 중괄호 { }로 닫는데 코드블록은 중괄호 뒤에 세미콜론을 안붙이지만 객체는 붙인다. 

 

var Marshal = { 
    species: "squirrel", 
    gender: "male", 
    birth:"0929", 
    amibo : 264 , 
    character : "smug", 
    talking: function() { 
        console.log("sulky"); 
    } //ES6 : talking() { ... }처럼 function생략 가능
};

-> 예전에 짰던 코드인데 객체리터럴 방식으로 객체를 생성. new연산자와 생성자를 호출하지 않고 만드는 방식이다. 

-> species, gender, birth등이 프로퍼티의 키, "squirrel", "male"등은 프로퍼티의 값

-> talking은 메서드이다. 일반 함수와 구분하기 위해 객체에 묶인 함수는 메서드라고 한다. 

 

var obj = {};
var key = 'Hello';

obj[key] = 'World';
//obj : {Hello: 'World'}

//ES6는 아래처럼 내부에서도 프로퍼티 키 동적 생성 가능
const key = 'Hello';
let i = 1;
const obj = {
	[`${key} ${i}st`] : 'World',
	[`${key} ${++i}nd`] : 'World',
	[`${key} ${++i}rd`] : 'World'
};
// obj : {Hello 1st: 'World', Hello 2nd: 'World', Hello 3rd: 'World'}

- 위처럼 알아서 key 변수에 저장된 'Hello'를 읽어서 동적으로 프로퍼티키로 사용할 수 있다. 

- 만약 obj['key']라고 하면 obj내의 key프로퍼티에 접근하는 방식이다. 

---

원시 타입과 객체 타입

원시 타입 : 변경 불가능(값을 변경할 수 없다는 뜻임! 읽기전용 / 변수 재할당은 가능), 메모리 공간(변수)에 실제 값 저장, 다른 변수에 할당시 값이 복사되어 전달(값에 의한 전달)

-cf. 상수 : 상수는 재 할당이 금지된 변수 (ex : const키워드로 선언시 재할당 안되는 것처럼)

 

객체 타입 : 변경 가능, 메모리 공간에 참조 값 저장, 다른 변수에 할당시 참조값 복사되어 전달(참조에 의한 전달)

-> 참조에 의한 전달로 인해 여러 식별자가 하나의 객체 공유가 가능. 즉 하나의 식별자가 객체를 변경하면 나머지 식별자들에게도 영향을 미친다. 

let a = 80;
let b = a;
// a와 b모두 같은 메모리상 위치 가리킴, 그 위치엔 80이 저장

a = 100;
// 새로운 메모리 할당, 그 위치에 100저장 후 a는 b와는 메모리 상의 위치가 다르다.

 

call by reference(참조에 의한 전달)와 call by value(값에 의한 전달)은 결국 메모리 주소를 주나 원시값을 주나 차이이므로 결국은 값에 의한 전달이라고 볼 수 있다. 

JavaScript의 경우 원시값이면 call by value 방식으로 사용한다.(위 코드처럼 b에는 a의 값 자체가 복사되었기 때문에 a를 변경해도 b값은 그대로 80이다.)

 

아래 코드처럼 객체의 경우 call by reference 방식으로 사용한다. 

let Marshal= {
	species : 'squirrel'
};

let Raymond = Marshal; //얕은 복사, Raymond와 Marshal모두 동일한 참조값 가짐
console.log(Raymond === Marshal); // true

Raymond.species = 'cat';
Marshal.gender = 'male';

console.log(Raymond); // {species: 'cat', gender: 'male'}
console.log(Marshal); // {species: 'cat', gender: 'male'}

Raymond와 Marshal 두가지 모두 같은 객체를 참조하고 있어서 어느 한쪽에서 객체 프로퍼티를 변경시 다른 식별자에도 영향이 간다. 

---

얕은 복사 vs 깊은 복사

const obj = { first : { second : 1 } };

//얕은 복사
const obj2 = { ...obj };
console.log(obj2 === obj); // false
console.log(obj2.fisrt === obj.first); // true

//만약 obj2에 깊은 복사가 되었다면?
console.log(obj2 === obj); // false
console.log(obj2.first === obj.first); // false

복사를 통해 만들어진 객체는 원본과 참조값이 다른 별개의 객체이다. 

얕은 복사의 경우, 겉 껍데기는 참조값이 다른 별개의 객체가 만들어지기 때문에 첫번째 콘솔문에서는 false가 출력된다. 내부의 first객체는 원본과 같은 객체를 참조한다. 따라서 2번째 콘솔문에서 true가 발생한다. 

깊은 복사의 경우, first객체까지 새롭게 복사되어서 2가지 콘솔문 모두 false가 반환된다. 

---

<공부하고 정리하는 데 참고한 자료>

모던 자바스크립트 deep dive (http://www.yes24.com/Product/Goods/92742567)

https://velog.io/@aiden/call-by-value-vs-call-by-reference-feat.-call-by-sharing