Javascript 알아보기

 

 

 

오늘은 자바스크립트에 대해 알아보는 시간을 가져보려고 한다.

시작하기에 앞서 구성을  먼저 적고 시작하자면,

 

1. 자바스크립트는 어떤 언어고 어떤 특성을 가지고 있는지 
2. 객체와 불변성에 대해
3. 호이스팅과 TDZ

 

순서로 나열 해보려고 한다.

 

1. 자바스크립트

 

먼저 자바스크립트란 무엇인가에 대해 알아보도록 하자.

 

JavaScript (줄여서 JS)는 일급 함수를 사용하는 가벼운 객체 지향 인터프리터 언어이며 웹페이지의 스크립트 언어로

잘 알려져 있지만, 브라우저가 아닌 환경에서도 많이 사용된다.

 프로토타입 기반, 다중 패러다임 스크립트 언어이며, 동적이고 명령어, 객체 지향, 함수 프로그래밍 스타일을 지원한다.

 

자바스크립트는 클라이언트 측 웹(브라우저)에서 실행되고, 웹 페이지가 이벤트 발생 시 어떻게 작동하는지

디자인 / 프로그래밍할 수 있다. 자바스크립트는 쉽게 배울 수 있고 강력한 스크립트 언어로

웹 페이지 동작을 제어하는 데 널리 사용된다.

 

대중적인 오해와 달리, Javascript는 "인터프리트 형태의 자바"가 아니다. 

간단히 말하면, Javascript는 프로토타입 기반 객체 생성을 지원하는 동적 스크립트 언어이다.

기본적인 문법은 언어 학습에 필요한 새로운 개념을 줄이기 위해

Java와 C++의 if문, for와 while문, switch문과 try...catch 구문을 사용하는 언어구조를 사용하며,

그와 같은 (거의 가까운) 동작을 한다.

 

Javascript는 절차지향 (procedural) 언어와 객체지향 (object oriented) 언어 두 가지 형태로 만들 수 있다.

자바스크립트에서 객체는 실행 시간에 빈 객체를 오버라이딩하여 메서드와 프로퍼티를 연결하는 (프로그래밍) 방식으로 생성된다. C++ 및 Java와 같은 컴파일 언어에서 공통적인 구문 클래스 정의와 반대되는 개념이다.

한번 객체가 생성하면, 비슷한 객체를 생성할 때 프로토타입으로 사용할 수 있다.

 

JavaScript의 동적인 성질은, 실행시의 오브젝트 구축, 가변 인수 리스트,

함수 변수, (eval) 에 의한) 동적 스크립트 작성, (for... in에 의한) 오브젝트의 내부 참조,

또는 소스코드 복원 (JavaScript 의 프로그램은 함수 본체를 소스 텍스트에 역컴파일 할 수 있다.)을 포함하고 있다.

-출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/About_JavaScript

JavaScript에 대하여 - JavaScript | MDN

 

위 글에서 자바스크립트가 어떤것인지와 함께 자바스크립트의 특징까지 한 번에 볼 수 있었고

자바스크립트가 가진 많은 특성중에 자세하게 알아볼 몇 가지를 선정해 보았다.

 

• 느슨한 타입(loosely typed)의 동적(dynamic) 언어
• 느슨한 타입의 동적언어의 문제점과 보완 방법
• JavaScript 형 변환
• undefined와 null의 차이점
• 자바스크립트에서 쓰는 연산자들

 

먼저 첫 번째로 느슨한 타입(loosely typed)의 동적(dynamic) 언어에 대해 알아보자.

 

1 - 1.  느슨한 타입(loosely typed)의 동적(dynamic) 언어

 

'느슨한 타입의 동적 언어'라는 문장이 한 번에 와닿지 않아서 검색을 통해 알아보았는데

위 사진처럼 어떤 특정 타입과 연결되지는 않고, 어떤 타입의 값이든 할당과 재할당이 가능하다는 뜻임을 알 수 있었다.

 

1 - 2.  느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점과 보완 방법

 

동적 타입 언어는 컴파일 시 자료형을 정하는 게 아닌 런타임 시 결정된다고 한다.

이는 int, string 같은 타입을 지정하지 않고 변수만 선언하여 값을 지정할 수 있다는 뜻이고 

이렇게 타입을 명시하지 않는 것이 빠르게 코드를 작성할 수 있는 장점이라고 볼 수 있겠으나, 

실행 도중에 변수에 예상치 못한 타입이 들어온다면 타입 에러가 발생할 수 있고 

동적 타입 언어는 필연적으로 런타임 시에 확인할 수밖에 없기 때문에 코드가 길고 복잡해질수록 에러를 찾기 어려워진다.

 

때문에 이러한 불편함을 해소하기 위해 TypeScipt나 Flow 같은 보조 프로그램을 보편적으로 사용한다고 한다.

 

1 - 3.  JavsScript 형 변환

위에서 말했듯이 자바스크립트는 자료형을 컴파일할 때가 아닌 런타임 때 결정되고

이 말은 즉, 런타임까지 타입에 대한 결정을 끌고 갈 수 있기 때문에 유연성이 높다고 할 수 있다.

 

유연성이 어떤 곳에서 어떻게 발현되는지 궁금했기 때문에 검색을 해 본 결과

자바스크립트 엔진이 필요에 따라 암시적 변환을 하거나

또는 개발자의 의도에 맞춰 명시적 변환을 진행한다는 것을 알 수 있었고 

추가적으로 암시적, 명시적 변환이 무엇을 뜻하는지도 공부할 수 있었다.

 

암시적 변환은 자바스크립트 엔진이 필요에 따라 자동으로 데이터 타입을 변환하는 것을 말하며

명시적 변환은 개발자가 의도를 가지고 인위적으로 데이터 타입을 변환시키는 것을 뜻한다는 것을 알 수 있었다.

 

1 - 4. undefined와 null의 차이점

기본적으로 undefined는 정의되지 않았다는 뜻을 가지고 있고,null 은 내부(객체)가 비어있다는 뜻으로 인지하고 있었는데

 

undefined라는 단어는 유독 코드를 작성할 때 실행창에서 오류로 많이 접했었다.undefined 오류를 트러블슈팅을 하면서 수정을 해본 결과,undefined는 변수 선언까지는 완료했지만 경로가 잘못되었거나 어떤 이유로 인해 값이 할당이 안 된 상태임을 확인할 수 있었고null은 똑같이 변수 선언을 완료한 뒤에 빈 값(빈 객체)을 할당한 상태임을 확인했다.

 

마치 호텔에 가서 301호 열쇠를 받았지만 2층까지 밖에 존재하지 않아서 300번대 방을 찾을 수 없다면undefined로 나타내고 반대로 비어있는 201호 열쇠를 받아서 제대로 찾아갔다면빈 객실(빈 객체)을 받았기 때문에 null 값으로 받았다고 볼 수 있다.

 

1 - 5.  자바스크립트의 연산자( ==, ===)

 

자바스크립트에는 많은 연산자가 있지만

우리가 수학을 공부할 때 접했던 연산자와는 다른 연산자도 있다는 걸 확인할 수 있다.

이를테면 ==, === 같은 연산자의 경우에는 수학이라는 학문을 공부할 때는 볼 수 없지만

자바스크립트라는 언어를 공부할 때는 쉽게 접할 수 있기 때문에 

이것을 비교하는 시간을 가지도록 해보자

 

수학에서의 = 은 '같다'라는 뜻과 '대입한다'라는 뜻을 둘 다 가지고 있다.

어떤 변수에 값을 대입했을 때 변수와 값은 같고 계산하는 주체가 사람이기 때문에

유연하게 '같다'와 '대입하다'를 구분해서 그것을 이용해 계산을 풀어나갈 수 있지만

 

자바스크립트에서의 '같다'와 '대입하다'는 컴퓨터가 계산을 하기 때문이기도 하고

수학처럼 특정한 숫자, 문자만을 이용하는 것이 아니기 때문에 

= 와 == 를 구분 짓는 것이 아닐까 생각을 한다.

 

그렇다면, 자바스크립트 안에서 == 와 === 는 어떻게 다른 걸까?

결론부터 말해서 나는 어떻게 이해를 했냐면

== 는 양쪽에 있는 '값'을 가지고 따지는 연산이고

=== 는 양쪽에 있는 '유형'을 가지고 판단하는 연산이라고 이해했다.

 

2.  객체와 불변성에 대해

두 번째로는 자바스크립트 객체와 불변성에 대해 알아보고자 한다

• 기본형 데이터와 참조형 데이터
• 불변 객체를 만드는 방법
• 얕은 복사와 깊은 복사

위 리스트 순서대로 알아보자

 

2 - 1.  기본형 데이터와 참조형 데이터

데이터는 크게 기본형 데이터와 참조형 데이터로 나눌 수 있다.

 

- 기본형 데이터 : 논리형(boolean), 정수형(int), 실수형(double), 문자형(char)

 

기본형 데이터는 일반적으로 할당이나 연산 시 데이터가 복제된다고 알려져 있다고 한다.

기본형 데이터는 식별자가 할당되는 변수 영역, 데이터 값이 담기는 데이터 영역두 영역을 사용하고 변수 영역에는 식별자와 데이터 영역의 주 솟값,

데이터 영역에는 데이터가 담겨 있다.

 

- 참조형 데이터 : 배열(array), 클래스(calss), 인터페이스(interface)

 

2 - 2.  불변 객체를 만드는 방법

불변 객체를 만드는 방법을 공부하기 전에 불변 객체가 어떤 것인지 먼저 알아보자

 

이름에서 알 수 있듯이 변하지 않는 성질임을 알 수 있지만 

불변성이 해당되는 부분이 어디인지를 확실하게 이해해야 한다.

변하지 않는다는 점이 상수과 헷갈릴 수 있지만 엄연히 다른 의미라고 생각한다.

 

변수와 상수는 변수 영역 메모리에 데이터 할당 후 재할당이 되는지에 대한 여부로 구분하는 것이고 

불변성은 데이터 영역의 메모리에 대한 것이다.

 

데이터 영역의 데이터는 한번 생성되었을 경우 수정이 안되며 (불변성)

새로운 데이터일 경우 비어있는 데이터 영역에 새로 할당된다.

그리고 새로 할당된 데이터 영역의 주 솟값을 변수 영역의 데이터 주 솟값으로 재할당하는 것이다.

즉, 데이터 영역의 변경이란 새로 만드는 동작에서만 이루어진다.

 

그렇다면 불변성이 왜 필요한지에 대해 궁금증이 생겨 같이 찾아보았다.

메모리에 데이터를 저장하기 위해서는 메모리 공간을 선행으로 확보해야 하는데

불변성이 없다고 가정했을 때  만약, 처음 저장한 데이터보다 더 큰 크기를 가진 데이터를

재할당해야 한다면

뒤에 저장된 메모리들의 공간이 뒤로 밀리는 현상이 생기게 된다.

그렇다면 각각의 주 솟값 들을 식별자에 다시 연결해야 하는 작업이 발생하기 때문에 

좀 더 효율적으로 데이터를 저장하기 위해 불변성이 필수적으로 필요하다고 생각한다.

 

그렇다면 불변 객체는 어떻게 만들 수 있을까?

자바스크립트에서는 기본적으로const와 Object.freeze()를 사용해서 만들 수 있다고 한다.

 

- const : 자바스크립트 키워드 중 하나로, ES6문법부터 let과 const를 지원한다.

const 키워드는 변수를 상수로 선언할 수 있다, 일반적으로 상수로 선언된 변수는 값을 바꾸지 못하는 것으로 알려져 있다.

 

ES6에서의 const는 할당된 값이 상수가 되는 것이 아닌 바인딩된 값이 상수가 되는,

즉 test변수가 상수가 되기 때문에 const 키워드로 선언된 test변수에는 객체 재할당은 불가능하지만 객체의 속성은 변경 가능하다.

 

재할당이 불가능 한 이유는 변수와 값(객체) 사이의 바인딩 자체가 변경이 되기 때문에 상수인 test변수는 재할당이 불가능한 것이고

객체의 속성이 변경 가능 한 이유는 실제 객체가 변경은 되지만 ( {} -> name : "mingyo" ) 객체와 변수(test) 사이의 바인딩은

변경이 되지 않기 때문에 객체의 속성은 변경 가능한 것이다. 

 

때문에 비록 재할당은 불가능하지만 객체의 속성을 변경함으로 인해

변수에 바인딩된 객체의 내용까지 변경이 되기 때문에 불변 객체라고 하기는 힘들다.

따라서 Object.freeze()라는 JS내장 메서드도 살펴보도록 하겠다.

 

- Object.freeze() : 자바스크립트에서 기본적으로 제공하는 메서드이며

공식문서에서는 " 객체를 동결하기 위한 메서드"라고 적혀있다.

 

Object.freeze()를 사용하는 모습이다.

test 변수에 key value를 가진 객체를 묶어 묶여있는 변수를 동결된 객체로 만들었다.때문에 test 객체는 중간처럼 이름을 "chicken"으로 변경하려는 시도는 할 수 없다.하지만 마지막 부분처럼 객체의 재할당은 가능하기 때문에 불변 객체라고 볼 수 없다.

 

불변 객체를 만들기 위해서는 const의 재할당 불가 기능과 Object.freeze()의 객체 속성 변경 불가를 이용해 만들 수 있다고 한다. 

먼저 const를 사용해 묶인 변수를 상수화 시킨 다음, Object.freeze()로 해당 변수를 동결 객체를 만들면

객체의 재할당과 속성 둘 다 변경이 불가능한 불변 객체가 된다.

 

2 - 3.  얕은 복사와 깊은 복사

 

얕은 복사 

• 객체를 복사할 때 해당 객체만 복사하여 새 객체를 생성한다.
• 복사된 객체의 인스턴스 변수는 원본 객체의 인스턴스 변수와 같은 메모리 주소를 참조한다.
• 해당 메모리 주소의 값이 변경되면 원본 객체 및 복사 객체의 인스턴스 변수 값은 같이 변경된다.

깊은 복사

• 객체를 복사할 때 해당 객체와 인스턴스 변수까지 복사하는 방식
• 전부를 복사하여 새 주소에 담기 때문에 참조를 공유하지 않는다.

 

3.  호이스팅과 TDZ

마지막으로 호이스팅과 TDZ에 대해 알아보도록 하기 전에 알아볼 목록을 작성하도록 하자.

 

• 스코프, 호이 스팅, TDZ
• 함수 선언문과 표현식에서 호이스팅 방식의 차이
• 실행 콘텍스트와 콜 스택
• 스코프 체인, 변수 은닉화

3 - 1.  스코프, 호이스팅, TDZ

 

- 스코프 : 변수, 함수, 클래스가 접근할 수 있는 유효 범위

 

- 호이스팅 : 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미

 

- TDZ : Temporal Dead Zone의 약자로 직역하면 일시적인 사각지대를 의미,

스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 의미한다.

 

통상적으로 TDZ는 let, const, class 외 몇 개의 구문의 유효성을 관리한다.

하지만 var, function 선언은 반대로 TDZ로부터 영향을 받지 않는다.

이것들은 현재 스코프에서 호이 스팅 된다.

 

3 - 2.  함수 선언문과 표현식에서 호이스팅 방식의 차이

함수 선언식 (function declartion)

- 함수명이 정의되어 있고, 별도의 할당 명령이 없는 것

함수 전체를 호이스팅 합니다.

함수 표현식(function Expression)

- 정의한 function을 별도의 변수에 할당하는 것

별도의 변수에 할당하게 되고, 변수는 선언부와 할당부를 나누어서 호이스팅 하게 됩니다.

3 - 3.  실행 콘텍스트와 콜 스택

 

실행 컨텍스트

 

실행 콘텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.

자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이고 모든 코드는 특정한 실행 컨텍스트 안에서 실행된다.

자바 스크립트는 어떤 실행 콘텍스트가 활성화되는 시점에 선언된 변수들을 위로 끌어올리고 (호이 스팅)

외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행하는데,

이로 인해 다른 언어에서는 발생할 수 없는 특이한 현상들이 발생한다.

 

콜 스택

 

콜은 호출을 의미하고 스택은 출입구가 하나인 깊은 우물 같은 데이터 구조다

콜 스택은 자바스크립트가 함수 호출을 기록하기 위해 사용하는 우물 형태의 데이터 구조이다.

항상 맨 위에 놓인 함수를 우선으로 실행되고 이런 식으로 자바스크립트 엔진은

가장 위에 쌓여있는 콘텍스트와 관련 있는 코드들을 실행하는 식으로

전체 코드의 환경과 순서를 보장한다. 

 

3 - 4.  스코프 체인, 변수 은닉화

 

스코프 체인

 

스코프 체인(Scope Chain)은 일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 

의미 그대로 각각의 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것을 말한다.

 

스코프에 식별자가 없으면 상위 스코프에서 다시 찾아 나가는데 이러한 현상을 일컫는 말이며

스코프가 중첩되어 있는 모든 상황에서 발생한다.

 

변수 은닉화

 

변수 은닉화는 보안등의 이유로 외부 객체로부터 속성 값 (데이터, 멤버, 변숫값)을 감추는 특성이다.