[JavaScript] 드루아 ver 1.1.0 (1) Variable ~ Object Method

JavaScript를 더 깊게 공부하고자 "모던 자바스크립트 Deep Dive"를 읽으며 공부하고 있습니다. 그리고 각 파트를 상세히 기록하며 정리할 예정인데 그 전에 기본적인 것들을 전체적으로 정리할 예정입니다. 드루아 시리즈는 각 언어나 개념들의 전체를 훑으며 그 흐름을 이해하는 데 도움이 되고자 작성하는 시리즈입니다. 잘 부탁드립니당 :)

 

해당 글은 코딩앙마의 자바스크립트 강좌를 기반으로 작성되었습니다. 

 

변수

먼저 변수를 선언하는 과정에서 지켜야 하는 것들이 있는데요. 이는 다음과 같습니다.

1. 변수는 문자, 숫자, $, _만 사용
2. 첫글자에 숫자는 올 수 없음
3. 예약어 사용 불가
4. 상수는 보통 대문자로 작성
5. 읽기 쉽고, 이해 가능하게 작성

그리고 이러한 변수는 var, let, const 총 3가지를 통해 선언할 수 있습니다. 각각의 차이점을 알기 위해선 호이스팅이란 개념에 대해 이해해야 합니다.

 

호이스팅이란 코드를 실행하기 전에 함수, 변수, 클래스나 import 선언문을 최상단 스코프로 끌어올리는 것처럼 보이는 현상입니다. 이렇게 보이는 이유는 JS는 코드를 실행하기 전에 선언된 변수와 함수 등을 먼저 체크하기 때문입니다.

 

이제 var, let, const의 차이점에 대해 알아봅시다.

 

var

• 호이스팅 시 변수의 선언과 초기화를 같이 실행 , 그렇기에 var는 선언하기 전에 사용힐 수 있습니다.(undefined로 초기화 되기 때문에 선언 전에 사용하면 undefined을 가져옵니다.)
• 함수 스코프 : 함수를 기준으로만 어휘적 환경이 설정 (전역변수와 지역변수의 경계 모호)
• 재할당 재선언 가능

let

• 호이스팅이 일어나지만 초기화되지는 않습니다.
• 블록 스코프 : 블록{}을 기준으로 어휘적 환경이 설정 (전역변수와 지역변수의 경계 확실)
• TDZ(Temporal Death Zone) 적용 : 호이스팅이 됐지만 초기화 전까지는 해당 변수에 접근 불가
• 위의 이유로 선언하기 전에는 사용 불가
• 재할당만 가능

const

• let과 모두 동일하지만 선언, 초기화, 할당이 동시에 일어나기 때문에 
• 재선언 재할당 불가능 

선언 : 변수를 JS 엔진에 알려줌

초기화 : 선언된 변수에 기본 값을 할당(변수를 메모리에 등록하고 초기값 할당) 즉, 선언 후 첫 번째 값을 할당할 때 발생

할당 : 초기화 이후의 값 변경

 

 

생성자 함수 

JS에서는 객체를 자주 유용하게 사용합니다. 그렇기에 비슷한 객체를 여러개 만들어야 하는 상황이 생기고, 이 때 사용하는 것이 생성자 함수입니다.

객체 선언 방식은 모두 아시죠?

const user = {
	name: '홍길동',
    age: 34,
    nick_name: '동번서번',
}

위와 같은 객체를 여러개 만들어야 할 경우에 생성자 함수를 사용하는 데 보통 첫글자는 대문자로 작성합니다. 예시로 작성한 객체를 만들어낼 수 있는 생성자 함수를 작성해 보겠습니다.

function User(name, age, nick_name) {
	this.name = name;
    this.age = age;
    this.nickName = nick_name;
}

이러한 생성자 함수를 이용해 새로운 객체를 생성할려면 앞에 new를 붙여서 함수에 필요한 파라미터를 작성해야 합니다.

const hong = new User('홍길동', 34, '동번서번');
const zeon = new User('전우치', 27, '어디보자');

 

이러한 생성자 함수가 객체를 생성할 때는 보이지는 않지만, 내부에서 this에 빈 객체를 할당하고 this에 객체를 생성하기 위해 필요한 프로퍼티를 추가합니다. 그리고 this를 반환해 주는 방식으로 생성합니다.

 

그리고 원하는 메소드(프로퍼티의 값이 함수일 경우)를 추가할 수 있고, 생성된 모든 객체는 추가한 메소드를 불러올 수 있습니다. 예제를 보면서 확실하게 이해해 봅시다.

// 생성자 함수 정의
function User(name, age, nick_name) {
	this.name = name;
    this.age = age;
    this.nickName = nick_name;
    this.callName = function(){
    	console.log(this.name);
    }
    this.callNickName = function(){
    	console.log(this.nickName);
    }
}

// 객체 생성하기
const lee = new User('이순신', 77, '사즉생 생즉사');

// 함수 호출
lee.callName(); // '이순신'
lee.callNickName(); // '사즉생 생즉사'

 

 

Computed property

객체를 선언할 때, [] 안에 계산된 프로퍼티를 넣을 수 있습니다. 이를 computed property(계산된 프로퍼티)라고 합니다.

const user = {
	[4 + 5] : 9,
    ["내 이름은" + "00"] : "당동",
}

// user -> {9: 9, 내 이름은00: "당동"}

 

객체 메소드

객체에서 자주 사용하는 메소드들에 대해 알아봅시다.

 

- Object.assign()

객체를 복제하고 병합할 수 있습니다.

// 객체 복제
Object.assign({}, 객체);

// 객체 병합
Object.assign(객체, 객체1, 객체2);

객체 병합에 대한 예제를 보며 확실하게 이해해 봅시다.

 

const user = {
	name: '이름1',
    age: 33,
}
const info1 = {
	nickName: "이름아름",
}
const info2 = {
	gender: 'male',
}

const newUser = Object.assign(user, info1, info2);

// newUser
// {
// 	name: "이름1",
// 	age: 33,
// 	nickName: "이름아름",
// 	gender: "male",
// }

만약에 병합 과정에서 같은 키를 가진 프로퍼티가 있다면 초기값의 객체가 병합하는 객체에 덮어써집니다.

 

- Object.keys()

키를 배열로 반환합니다.

 

- Object.values()

값을 배열로 반환합니다.

 

- Object.entries()

[키, 값]을 가진 배열을 반환합니다.

 

- Object.fromEntries()

배열 형태로 변경된 객체를 다기 객체로 만들어줍니다.

const arr = [
	["키1", "값1"],
    ["키2", "값2"],
    ["키3", "값3"]
]

const arrToobj = Object.fromEntries(arr);

// arrToobj
// {
//	키1 : "값1",
//    키2 : "값2",
//    키3 : "값3",
//  }