[엘리스 SW 엔지니어 트랙 2기 / TIL] Day 06 - 자바스크립트 기초

1. 오늘 공부한 내용  📝

왜 웹개발자를 시작했는가? 앞으로 웹은 더욱 강력해질 것이다.

코치님이 수업을 통해 알려주시지만 개발자는 결국 스스로 공부해서 채워나가야한다.

자바스크립트란?

• 객체 기반 스크립트 언어 : 객체란? 객체는 변수들의 모음, DOM?
• 인터프리터 언어
  • 한 줄씩 기계어로 변경하여 실행하기 때문에 중간에 에러가 발생해도 이전 코드들은 실행된다.
  • C, Java와 같은 언어는 전체 코드가 컴파일러를 거쳐 컴파일 될 때 에러를 잡아주는데 인터프리터 언어는 에러를 잡기 어렵다는 단점이 있다.
  • 대표적인 인터프리터 언어 : JavaScript, Python, SQL
  • 컴파일러 vs 인터프리터 누가 더 빠를까? → 컴파일러가 더 빠름. 한줄 씩 바꾸는 속도보다 컴파일러에서 기계어로 바꾸는 속도가 훨씬 빠르다. 속도를 위해서는 C! 자바스크립트도 V8 엔진을 통해 최근에 속도가 많이 개선됨.
  • 한줄 씩 실행된다고 할 때 길이가 아주 긴 함수같은 경우에는 어떻게 실행 되는가? 호이스팅(Hoisting)
• ES (ECMAScript)
  • ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어
• JavaScript 사용 방법
  • CSS와 같이 Inline(잘 안씀), internal, external
  • 디버깅 : debugger
• 변수
  • var : 변수 선언
  • let : (ES6부터) 변수 선언
  • const : (ES6부터) 변하지 않는 변수 선언(상수)
  • 호이스팅? 코드 실행 전, 변수/함수 선언이 해당 스코프의 최상단으로 끌어올려진 것 같은 현상.
  • var과 let의 차이 : var는 undefine으로 초기화 되고 let은 값이 없기 때문에 console.log를 찍었을 때 값이 할당되지 않은 var는 undefined이라고 나오지만 lef은 레퍼런스 error를 발생시킨다.
• 템플릿 리터럴(ES6부터 사용 가능)
  • `(백틱)으로 감싸주어 사용
  • ${} 안에 변수를 넣어 사용
• 조건문(if, else, else if) / 반복문(for, while)
• 다양한 이벤트 (onclick... )
• 이벤트 캡쳐링과 버블링
• DOM (Document Object Model)
  • script에서 다루기 쉽게 문서를 객체화 한 것
• readline(), 배열(array), split() 함수, sort()함수, typeof() 함수 등등..

---

 

const arr = [1, 2, 3]

arr[0]으로 해도 바뀜

const a = [1, 2, 3]

const b = [1, 2, 3]

console.log(a == b) // false

문자열과 숫자를 더할 때, 숫자가 문자열로 변환되는 이유는?

모든 문자열이 숫자로 변환될 수 있는건 아니지만 모든 숫자는 문자열로 바뀔 수 있기 때문이다.

2. 어려웠던 내용  🤯

호이스팅, 클로져, 이벤트 캡쳐링과 버블링 이전에 면접 준비를 하면서 한번씩 훑어보긴 했는데 아직 완벽하게 이해하진 못한 것 같다.

호이스팅은 강사님께서 자세하게 설명해주셔서 이해했고 클로져는 아직 설명을 해주진 않으셨지만 추후에 설명해주신다고 했다. 이벤트 캡쳐링과 버블링은 짧게 훑고 넘어갔는데 추후에 면접에서 한번쯤은 질문으로 나올 수 있을만한 개념이라서 다시 짚고 넘어가면 좋을 것 같다.

 

let e = "10";
let f = 15;

console.log(e + f); // 1015

console.log([] == 0); // true
console.log([] == "0"); // false

위 코드는 실습 수업에서 자바스크립트의 형 변환에 관한 얘기를 하면서 나왔는데 처음 알게 된 내용이다.

== / === 의 차이 정도는 알고 있었지만 문자형과 숫자형을 더할 때 바뀌는 부분은 몰랐다. e와 f를 더했을 때 답이 25가 아니라 1015로 나오는 이유는 모든 숫자는 문자열로 변환 가능하지만 문자열은 숫자로 변환이 되지 않을 수 있기 때문이다. 때문에 문자형으로 변환되어 합쳐진다.

3. 궁금한 내용 / 부족했던 내용  🧐

이전에는 대부분 자바스크립트를 external 방식으로 사용했고 앞으로도 아마 그렇게 사용할게 될 것 같지만 inline, internal 방식도 있다는 것을 알아두자. 그리고 readline()으로 입력받는 것도 이전에 몇 번 해보긴 했지만 아직 좀 부족한 것 같다. 지금은 알고리즘 문제를 풀 때 fs 모듈을 이용하고 있긴 한데 이것도 알아둬서 나쁠건 없다.

 

그리고 오름차순, 내림차순 정렬

arr.sort((a, b) => a - b); // 오름차순
arr.sort((a, b) => b - a); // 내림차순

알고는 있었지만 복습 겸 다시..

4. 느낀 점 🤔

이번 주부터는 자바스크립트 수업이 시작되는데 앞선 HTML, CSS 수업보다는 확실히 난이도가 높아질 것 같다.

첫 날부터 호이스팅, 이벤트 캡쳐링/버블링 등의 다양한 개념들을 배우고 있는데 단순히 언어를 사용하는 방법만 가르치는게 아니라 자바스크립트는 어떻게 동작하고 왜 이렇게 만들어졌는지와 같은 개념적인 부분을 하나 하나 짚고 넘어가주셔서 좋다. 내가 처음 자바스크립트를 독학했을 때는 이런 내용으로 시작하지 않고 단순히 웹을 만들 때 어떻게 사용하는지에 집중했는데 결국 좋은 개발자가 되기 위해서는 이런 언어에 대한 부분도 알고 있으면 더 좋은 코드를 짜는데 도움이 될 것 같다.