들어가며
그동안 열심히 공부 했던 탓인지, 운이 좋았던 탓인지 모르겠지만 어쨌든 프로그래머스에서 주관하는 프로그래머스 프론트엔드 데브코스 과정에 합격했다. (지원부터 합격까지의 과정을 글로 정리하고 싶었지만 게으른 탓에 하지 못했다. 빠른 시일내에 정리해야겠다.) 3월 18일 금요일 OT를 시작으로 오늘이 첫 강의가 있는 날이다. 기계공학부 학부생일 때 프론트엔드에 흥미가 생기고 나서
전공과목으로 프론트엔드 공부할 수 있으면 소원이 없겠다.
라는 생각을 했다. 비록 졸업했지만 지금이라도 이런 소중한 기회가 온 것이 너무 감사하다. 그동안의 노력이 보상 받는 느낌도 있고, 좀 더 꿈에 다가가는 느낌도 있어서 더 좋다. 물론 이제 시작이란 걸 잘 알고 있다. 어렵게 찾아온 기회를 놓치지 말고 꾸준히 공부해서 많이 성장하고 싶다.
자바스크립트란
예전의 브라우저는 오직 HTML 만을 사용해 정보를 나타냈다. HTML을 사용하면 정보를 출력하는 것만 가능하고, 프로그래밍 로직을 구현하는 것은 불가능 했기 때문에 브라우저에 프로그래밍 언어를 내장하기로 했다. 이때 10일 만에 개발된 언어가 바로 자바스크립트이다.
변수
변수는 말 그대로 변하는 수 (또는 값) 이다. 자바스크립트에서는 var 또는 let 키워드를 사용해 변수를 선언한다.
1 let variable = 126;2 var variable = 126;
과 같은 형식으로 변수를 선언할 수 있다.
var 와 let 은 스코프에서 차이가 난다. var 는 함수 스코프, let 은 블록 스코프인데 스코프 차이에 따라 예상과 다른 결과를 출력할 수 있기 때문에 현재는 let 키워드의 사용을 권장한다.
상수
상수는 변하지 않는 수 (또는 값) 이다. const 키워드를 사용해 선언하며, 한번 선언된 상수는 값을 변경할 수 없다.
1 const variable = 11;
과 같이 사용한다.
자료형
자바스크립트의 자료형은 크게 Number, String, Boolean, Object, Array, Function, Undefined, Null 이 있다.
- Number - 정수, 실수 등의 숫자를 나타내기 위한 자료형이다. 특이하게 NaN (숫자가 아님), Infinity (무한대) 또한 Number 자료형에 포함된다.
- String - 문자를 나타내기 위한 자료형이다. 작은 따옴표(''), 큰 따옴표(""), 백틱(``) 을 사용해 문자열을 선언한다. 백틱의 경우
1 const variable = 'Hello';2 const string = \`${variable}\`;
과 같이 변수를 사용할 수 있다.
- Boolean - true 또는 false 값을 나타내기 위해 사용한다.
- Object - 여러 개의 값을 지닐 수 있다. 키: 값 의 형태로 나타내는데 이때 키는 문자열이다.
- Array - 인덱스로 값을 찾을 수 있는 Object이다.
- Function - 함수
- Undefined - 선언은 되었지만 값이 없는 변수를 나타내는 자료형이다.
- Null - 사용자가 값이 비어 있음을 의도적으로 나타낼 때 사용하는 자료형이다.
연산자
할당 연산자, 비교 연산자, 산술 연산자, 비트 연산자, 논리 연산자, 삼항 연산자, 관계 연산자, typeof
조건문/반복문 (흐름 제어)
자바스크립트 코드는 작성된 순서대로 순차적으로 실행된다. 실행 순서를 제어하기 위해 조건문이나 반복문을 사용한다. 조건문은 조건이 일치할 때 실행된다. if, switch 를 사용한다.
조심해야 할 것!!! false, undefined, null, 0, NaN, '' (빈 문자열) 은 false를 반환하기 때문에 조건문 사용시에 조심해야 한다. false는 직관적으로 false라 헷갈릴 일이 없겠지만 나머지는 애매하기 때문에 항상 조심해야겠다.
배열과 객체
배열과 객체를 정의하는 방법에는 여러가지가 있다.
- 배열1 const arr1 = new Array();2 const arr2 = [];
- 객체1 const obj1 = new Object();2 const obj2 = {};
배열과 객체를 정의하는 과정에서 궁금한 점이 생겼다. 무의식적으로 배열이나 객체를 선언할 때 new 키워드를 사용했는데 new를 사용하지 않았을 때와 결과가 다르지 않았다.
ECMAScript Language Specification(아마도 es5 명세..?)
StackOverflow Array() vs new Array()
이미 궁금해 했던 사람이 많았다. 내가 이해한 바로는 원래는 new 키워드를 사용해 선언하는 것이 맞지만 new 키워드를 사용하지 않았을 때도 내부적으로 new 키워드를 사용한 값을 반환하는 것 같다. 결국은 new 키워드가 있으나 없으나 결과는 똑같다. (맞는 지 확실하지 않음...)
스코프와 클로저
앞에서 잠깐 var 와 let 의 스코프에 대해 언급했다. 스코프란 변수의 유효 범위를 의미한다. 변수를 사용할 수 있는 범위 정도로 이해하면 될 것 같다. var 는 함수 스코프, let 은 블록 스코프이다. 코드를 통해 알아보자.
1 let a = 0;2 {3 let a = 1;4 console.log(a); // 15 }6 console.log(a); // 0
클로저는 함수가 선언될 때의 스코프를 참조하는 성질을 말한다. 예전부터 클로저 얘기는 많이 들었는데 잘 이해가 되지 않았다. 그런데 이번에는 약간 이해가 되는 느낌이 와서 예시로 설명해보려고 한다.
1 function closureTest() {2 let value = 1;3 return function () {4 console.log(value);5 };6 }78 const test = closureTest();9 test(); // closureTest 함수의 value 값 출력
위의 코드에서 closureTest 함수는 익명함수를 반환한다. 반환된 익명함수는 closureTest 내부의 변수 value를 출력하는 함수이다. closureTest 함수는 익명함수를 반환하고 콜스택에서 제거된다. 그렇기 때문에 closureTest 내부의 value 에 접근할 방법도 없어야 한다. 그러나 코드를 실행하면 value 값이 출력되는 것을 확인할 수 있다. 이처럼 자신을 포함하고 있는 외부함수보다 내부함수가 더 오래 유지될 경우, 외부함수 밖에서 내부함수가 호출되더라도 외부함수의 지역변수에 접근할 수 있다. 이러한 함수를 클로저라고 한다. 익명함수가 선언될 때의 스코프는 closureTest의 스코프이기 때문에 value 값에 접근할 수 있다고 이해했다.
예전에 자바스크립트의 실행 컨텍스트에 대해 간단하게 읽은 적이 있다. 그 부분을 다시 읽으면 스코프와 클로저에 대해 좀 더 깊게 이해할 수 있을 것 같다.
정리
배운 지식을 정리하는 것에 익숙하지 않아 무엇을 알고 있는지, 무엇을 모르는 지에 대해 모호한 상태로 정리한 것 같다. 처음부터 누가 잘할 수 있을까 싶다. 앞으로 꾸준히 배운 내용을 정리하다보면 조금씩 성장할 거라고 믿는다.
TMI
- 같이 공부하는 사람들이 있어서 공부가 더 잘 되는 느낌이 든다.
- 오늘 공부하는 데 몸에서 열이 나는 것 같길래 내가 빡공해서 그런 줄 알았다. 코어타임이 끝나고 자가진단키트 해봤는데 두 줄이 나왔다. 이제 나도 조금은 인싸?