자바스크립트라는 이름은 줄곧 들어왔다. 웹개발을 접하면서는 종류가 다양한 브라우저에 구애받지 않고 단일한 언어로서 표준의 역할을 한다고 알게 된게 전부다.
가만히 보니 코드 작성을 배우기 시작하면서 이미 자바스크립트가 시작 되었던 것 같다. 그리고 자꾸 수학을 떠올리게 되는 그 용어들.
하루동안 자바스크립트에 대해 공부하면서 정리한 글을 올리는 것을 과제로 받았는데, 정말 하루종일 이 내용만 보고 있어야 했다. 저녁때까지는 가장 기본적인 자바스크립트의 문법형식을 익히는데 시간을 쏟았다. 프로그래밍의 기본형태인 변수형, 자료형, 함수, 조건문, 반복문을 활용하면서 문법에 맞게 써야 하는 것이구나...
아무것도 몰랐을때는 그냥 하라는데로 html에 script영역을 만들어서 function(){} 형태를 썼었는데 이게 다 원리가 있었던 것이었다.
오늘 하루동안 그 내용을 다 체득하진 못한 거 같다. 여전히 변수, 객체, 할당, 식별자, 호이스팅, 스코프 등등의 용어들이 머릿속에 둥둥 떠다니는 것 같다.
복사 붙여넣기를 해도 전체 글이 이해가 안되면 무의미 하다고 생각되어서 일단 과제니까 쓰기는 하겠지만, 내용을 정확하게 알아갈때마다 수정하는 글이 될 것 같다.
우선 오늘까지 이해한 바를 목록대로 정리 하자면,
- 자바스크립트만의 특성
- 자바스크립트 객체와 불변성
- 자바스크립트의 유효성과 정확성을 높이는 방식
이렇게 세가지 인거 같다.
1. 자바스크립트만의 특성
자바스크립트는 변수를 사용한다. 자바스크립트의 값은 특정한 자료형에 속하지만, 변수는 특정한 타입하고만 연결되는 것이 아니라 모든 타입의 값으로 할당 및 재할당이 가능하다. 값의 형태는 자료형으로 유형이 정해져서 8가지 정도 된다. 변수는 이 8가지의 유형 모두를 넘나들수 있고, 이 모든 유형의 값으로 할당 및 재할당이 가능하다는 것이다.
간단해 보이는데 간단하지가 않다;
이렇듯 변수에 저장되는 값의 타입은 언제든지 바꿀수 있는 것을 느슨한 타입의 동적 언어라고 부른다.
자료형의 8가지 유형으로는 숫자형, bigint형, 문자형, 불리언형,null형, undefined형, 객체형, 심볼형이 있다.
숫자형은 쉽다. 말그대로 정수와 값이 변하지 않는 숫자를 나타낼때 사용된다. 하지만 한계값이 존재한다. ... 외우진 못했다.
그 한계값의 제약을 받지 않기 위해 bigint형이 있다.
문자형은 문자열을 값으로 가지는 타입이다. 작은 따옴표, 큰따옴표가 붙는데, 이것도 같이 겹쳐서 쓰면 오류가 발생한다. 큰따옴표 두개가 붙어있다던가 하면 함수 인식을 못하는 오류였다...
불리언형은 참거짓을 판별할때 사용한다. true false로 값을 반환해 주기 때문에 어떤게 참 거짓인지는 알 수가 있는데, 참이 항상 옳고 false가 항상 그르다는 편견을 가지고 보게 되면 헷갈린다. 그냥 참 값과, 거짓 값일 뿐이다.
null형은 null값만을 위한 독립적인 자료형이다. 컴퓨터의 null과는 다른 방식으로 인식한다고 하는데 값이 있어도 비어있다고 인식할 때 주로 뜬다.
Undefined는 undefined 값만을 위한 독립적인 자료형이다. 이값은 변수 영역을 할당받지 못했을때 뜨는 오류값이다. 자동으로 undefined를 할당해준다.
null형과 비교했을때 null은 뭔가 수식 오류가 나서 뭘 주워 담았는데도 비어있다고 하는 것이고, undefined는 수식은 잘못되지 않았는데 애초에 변수를 선언하지 않았기 때문에 자동으로 undefined를 담아주는 것 같다...
객체형은 복잡한 데이터 구조를 표현하기 위해서 사용하고 (모모 : 땡땡)의 형태인듯 하다...
심볼형은 객체의 고유 식별자를 만들때 사용한다.
자바스크립트는 ==과 ===를 쓴다.
자바스크립트에서 등호는 일치연산자로써 역할하는데 크게 두가지 이다. 그냥 등호는 a =b이다 할때 쓰는것처럼 이미 먼저 점령해서 쓰는 공통된 역할이 있어서 자바스크립트 만의 연산자로 보기는 어렵다.
==의 경우 보다 ===가 더 정확할것 같은 직관적인 방식이다.
==는 비교하는 두값의 데이터 타입이 일치하지 않을때 자동으로 데이터타입을 변환해주는 자바스크립트의 특성때문에 가령 10 == '10' 이라는 오류를 범한다. 분명 숫자형 값과 문자형 값은 유형이 다르다고 했기 때문에 같게 인식하면 아비규환이 펼쳐지는 것이다.
이를 미연에 방지하고자 정확한 프로그래밍을 위해 === 만을 쓰는 것을 권장 받았다. 초심자니까...
느슨한 타입의 동적언어의 문제점은 무엇이고 보완할수 있는 방법에는 무엇이 있을지 생각해보라는 문제에서 해결 방법을 찾아서 쓰고 있겠구나 생각했다...
우선 개인적인 경험에 빌어 설명을 해보고 싶은데 이게 맞는 예시인지는 모르겠다.
변수를 선언할때 변수명을 정하는게 참 쉽지가 않다. 한번 정해진 변수명을 피해서 매번 다른 변수명을 붙여야 하는 난감한 상황에 직면하곤 한다.
값에는 그나마 유형이 정해저 있어서 혼란스럽지 않지만, 변수 선언 후 선언한 변수명을 적재적소에 사용해야 하는데 그게 익숙하지 않다. 대체 왜일까...
이게 모든 유형의 값에 할당이 가능해서 코드가 꼬였을때, 어떤 변수가 어떤 역할을 하고 있는지 구분하기 어려워서 초심자에게는 혼돈의 카오스가 되는 것 같다. 파생되는 id값만 봐도 대체 이게 뭔가 싶음... 스코프가 정해져 있는 변수명은 그나마 괜찮은데...
보완하는 방법은 변수가 선언되면 그 유형도 고정이 되어서 다른 타입이 넘보지 못했으면 좋겠다. 찾아보니 typescript가 그런 역할을 한다고 하는거 같던데 아직 자바스크립트도 초심자라 ... 좀 더 살펴보고 개념이 명확해 지면 보완점에 대해서 더 구체적으로 말할 수 있을 거 같다.
2.JavaScript 객체와 불변성
자바스크립트 언어를 써서 하고 있는 작업에 대해 다시한번 복기하게 되었다.
모든 것은 쓰는데 다 이유가 있는 법이니까.
자바스크립트 언어를 통해 만들어 내는 것들은 대체로 데이터를 저장하고, 저장된 데이터를 불러와서 활용하는 형태를 띄고 있는 것 같다.
데이터를 잘 저장하는 것도 중요하고, 필요한 데이터를 잘 빼오는 것도 중요해서 상호간에 원활한 소통을 위해 문법이라는 규칙도 만들어졌고, 공통적으로 적용할 수 있는 문법의 형태로 자리 잡으면서 표준이 된거 같기도 하다.
자바스크립트에서 다루는 데이터의 형태는 두가지 인데 하나는 기본형이고 하나는 참조형이다.
기본형 데이터로는 숫자형, 문자열, 불리언, null, undefined, 심볼형이 있고,
참조형 데이터 타입으로는 객체, 배열, 함수, 날짜, 정규표현식, Map등이 있다.
기본형은 내가 입력해서 쓰면 되는 형태의 데이터들인거 같다.
참조형은 내가 입력한것 포함, 어딘가에서 불러와서 쓸수 있는 데이터들 같다.
기본형은 할당이나 연산시에 데이터가 복제 된다고 한다. 메모리를 할당할때 기본형은 변수의 영역과 데이터의 영역으로 나뉘는데, 변수영역에는 변수명으로 값을 할당한다.
function 어쩌구 하면서 script란에 쓰는 그부분인가보다. 데이터는 지난 웹개발에서 썼던 파이썬 app.py 파일에 있는 그 영역인거 같다. 데이터 영역에는 할당된 변수의 타입에 따른 데이터가 저장된다 워낙 변수에서 많은 일들이 벌어져서 데이터 영역에서는 불변성을 가지고 있는 영역이 존재한다.
참조형도 기본형과 마찬가지로 변수 영역과 데이터 영역이 있지만, 참조형의 경우 객체의 변수 영역을 더 가지고 있다. 데이터 값이 한번 저장 되면 불변하는 영역에서 데이터를 불러와서 다른 곳에 참조 할 수 있도록 해야하기 때문이다. 이를 두고 가변성을 띈다고 말한다. temp_html 작성하던게 생각나는데... 이게 맞나 모르겠다.
불변 객체를 만드는 방법에 대해서 고민을 하지 않을수 없는 것이, 가독성이 좋은 코드를 만들기 위해서는 불변성의 영역을 잘 지켜서 버그가 발생하지 않는 정확한 코드를 작성해야 한다. 우선 변수를 선언할때 let은 재할당이 가능하지만 const는 재할당이 불가능 하다. 그래서 let보다는 불변객체를 만드는데 유리하다. 하지만 아무리 재할당이 안되는 변수명을 선언했다고 할지라도, 객체의 속성은 변경가능하기 때문에 완전한 불변객체라고 할수는 없단다... 흠...
객체 값을 참조할 때, 얕은 복사의 경우, 원래의 값과 참조형 객체의 값이 같은 참조를 가리키고 있다. 변수가 객체의 주소를 가리키는 값이 참조값이 되기 때문이다. 객체 안에 객체가 재할당 되어있을때도 원본 객체를 참조하고 있다면 이것은 얕은 복사이다.
반대로 깊은 복사는 객체값을 복사해왔는데 원본과의 참조가 끊어진 것을 말한다.
이부분이 이해하기 쉽지 않았는데, json문자열 변환 예시가 있어서 읽어보았다. 복사를 하고 가지고 오면서 json문자열로 변환해서 오다가 다시 자바스크립트의 객체로 만들어져 오면 참조가 다 끊어져 깊은 복사가 된다는 예시 였다.
느리다는 단점이 있다고 한다.
https://velog.io/@th0566/Javascript-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC
이걸 이해하려면 스코프를 먼저 알아야 되는 거 같다. TDZ과 호이스팅도.. 점점 추상적으로 알게 되어가는 거 같지만...
3. 자바스크립트의 유효성과 정확성을 높이는 방식
스코프(scope)는 식별자 (변수명, 함수명, 클래스명 등)의 유효범위를 뜻한다. 선언된 위치에 따라 유효범위가 달라진다. 전역과 지역으로 나뉜다.
전역변수는 어디에서든지 참조가 가능하다. 지역변수는 자신의 지역스코프와 그 하위 지역 스코프에서 유효하다. 괄호로 묶어주는 것이 그런 의미였나보다...!
var로 함수명을 선언할 경우에 전역변수로서 코드 곳곳에 유효하게 된다면 예상치 못한 결과를 가져 올수도 있기 때문에 let과 const가 필요해졌단다. 그래서 var를 안썼던 거구나.. 난 가장 큰거라서 당당하게 맨위에 있으면 되는건줄 알았는데...ㅎ.. 그래서 코드 오류가 자주 나는 것이었어...
https://www.howdy-mj.me/javascript/var-let-const/
이 페이지에 초심자가 이해하기 쉽게 표현 되어있는 거 같다. 조금.. 더 읽어야겠지만..
호이스팅때문에 더더욱 var를 잘 안쓰게 되었다고 한다.
호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언하기도 전에 미리 할당해 놓는 것을 의미하는데, var로 선언한 변수는 호이스팅시 undefined로 변수를 초기화 시켜 잘 쓰지 않는다. let, const로 선언한 변수의 경우에는 호이스팅시에도 변수를 초기화 하지 않는다. 변수를 선언할때 잠깐 호이스팅의 대상이 된다. 요부분은 이해가 잘 되지 않는다... ㅠㅠ
함수선언문과 함수표현식에서 호이스팅 방식의 차이를 생각해보자고 하는데, 찾아보니 함수 선언식은 함수 전체를 호이스팅 한다. 정의된 범위의 맨위로 호이스팅 되어서 함수 선언전에 함수를 사용할수 있다는 것이다. 함수 표현식은 별도의 변수에 할당하게 되는데 변수는 선언파트와 할당파트로 나뉘어 호이스팅 하게 된다.
함수 선언식은 function함수명(){구현로직}의 형태를 가지고, 함수 표현식은 var 함수명 = function(){구현로직}의 형태를 가지고 있다.
함수 표현식을 써본적이 없는거 같다.. html에서는 그냥 함수선언식을 onclick에만 얹어서 구동 시켰는데..
함수 표현식의 경우 호이스팅의 영향을 받지 않아서 다른 함수의 인자로 콜백할수 있다고 한다. var로 한번 초기화가 됐기 때문에 런타임에 해당 함수의 표현식이 할당되어 그때 객체가 된다. ... 음...
변수의 스코프는 최대한 좁게 만들어야 정확한 프로그래밍이 가능하다. var나 == 같이 전체에 영향을 미칠것들 혹은 정확하게 식별하지 못하는 부분이 있는 것은 최대한 사용하지 않으면서 말이다.
스코프 체인은 함수의 중첩된 형태로 인해 계층적 구조를 가지는 것을 말한다는데 써본적은 없는 것 같다.. 안쪽에서부터 바깥쪽으로 실행이 이루어진다는데.. 아직도 위에서 아래로 쭉 코드를 써내려가기 바빠서 이런 구조... 알아둬야겠다.
TDZ(Temporal Dead Zone)는 구문의 유효성을 관리한다.
변수를 선언하지도 않고, 변수에 먼저 접근을 하면 당연히 RefferenceError가 난다. 변수를 선언한 다음에 변수에 접근을 해야 유효한 값을 도출 할 수 있다.
const변수는 선언을 반드시 한 후에 사용해야 쓸수가 있다.
let변수도 마찬가지 이다.
class구문도 변수 선언전에는 사용할 수 없다. 순서에 맞게 써줘야 한다.
호출전에는 사용할수 없는 constructor의 super()도 있다.
기본 매개변수 또한 제한이 있다고 한다. 같은모양의 변수가 같다고 하는 것은 얼핏보면 맞는거 같은데, 그렇게 사용하면 안된다고 한다..
실행 콘택스트는 자바스크립트 코드가 실행되는 환경을 의미한다. 콜스택은 코드가 실행되면서 생성되는 실행스택을 저장하는 자료구조이다. 실행스택은 제어스택, 런타임스택,기계스택이라고도 불리며 그냥 전체다 스택이라고 부르기도 한단다... 확신할순 없지만;
프로그램 기능 수행에 있어서는 중요한 요소지만 보통은 감추어지고 자동화 되어있는 영역이다. 콜스택은 프로그램들이 함수 호출을 추적할때 사용하는 것으로 각 function call당 하나씩의 스택으로 이루어져 있다.
왜..파이썬의 def. 앱루트가 떠오르나... 그 부분의 기능을 말하는 것인가...?
변수의 은닉화는 아직 이해하지 못하였다. 기능적으로 변수를 은닉시키는것도 물론 알아야겠지만, 변수를 은닉시켜서 얻으려는게 혹시 불변성이 아닐까 추측만 했다.
건들지 못하게 은닉시켜서 작동시키는 것으로 함수에 정확성을 높이려고 하는 것이 아닐까...
