
자바스크립트는 브라우저 말고 서버에서도 실행 가능 + JS 엔진이 든 모든 디바이스에서 동작. 브라우저엔 JS 가상머신이라 불리는 엔진이 내장되어있음.
엔진의 종류는 다양하다. (V8: 크롬, 오페라 / SpiderMonkey, Chakra …)

**JS 엔진 동작 기본 원리**
1. 엔진 (브라우저라면 내장 엔진)이 스크립트를 읽는다 (파싱)
2. 읽어들인 스크립트를 기계어로 전환 (컴파일)
3. 기계어로 전환된 코드가 실행됨. 기계어로 전환되었기때문에 실행 속도가 빠름

엔진은 위 단계마다 최적화를 진행함. 심지어 컴파일이 끝나고 실행중인 코드를 감시하면서, 
이 코드로 흘러가는 데이터를 분석하고, 분석 결과를 토대로 기계어로 전환된 코드를 다시 최적화하기도 한다. 이 과정을 통해 스크립트 실행 속도가 더 빨라진다.

**브라우저에서 할 수 없는 일**: 파일 접근 (브라우저 창에 파일을 끌어다두거나 인풋 태그로 선택하는 등 특정 상황에서만 파일 접근 허용)

브라우저에서 실행 전 트랜스파일할 수 있는 언어들의 예시: 타입스크립트(자바스크립트로 트랜스파일 가능)

## 프로토타입이란

아래 두 `doSomething()` 메서드의 차이가 뭘까?

```javascript
Array.doSomething()
Array.prototype.doSomething()
```

여기서 위의 `doSomething()` 메서드는 Array 클래스에서만 작동하고,
아래 메서드는 Array 인스턴스에서만 작동한다.

```javascript
let arr = [1,2,3,4]; // arr is an instance of Array
let arr = new Array(1,2,3,4);
```

위 코드에서 `arr`은 자바스크립트 배열의 인스턴스다. 위 아래 똑같다.  
객체지향 프로그래밍에서는 클래스라는 틀을 기반으로 인스턴스(하나의 예시)들을 만들기 때문에
배열 하나를 만들때는 `new Array()`를 사용해서 만들어주면 된다.

## JS의 프로토타입

자바스크립트는 프로토타입 기반 언어다. 프로토타입을 사용해 객체지향 프로그래밍을 흉내낸다. 이 때
프로토타입은 원형을 뜻한다. 인스턴스는 원형의 **모양대로** 만들어진다. 
`인스턴스 === 원형`이 아님에 주의하도록 하자. 
자바스크립트에서 인스턴스의 메서드는 `Object.prototype.doSomething()`으로 표현한다.
ES6 문법에서는 문법을 좀 더 편리하게 하기 위해 'class'라는 키워드를 도입하였다.

## 클래스

```javascript
function Car(model, brand) {
    this.model = model;
    this.brand = brand;
}
    
let spark = new Car("스파크", "쉐보레");
let avante = new Car("아반떼", "현대");

Car.prototype.ride = function() {
    console.log(`${this.model}이 달립니다`)
};
```

클래스와 객체의 차이는 뭘까?

### 클래스

- 조금 더 연관있는 데이터를 한 데 묶어놓는 컨테이너이자 템플릿, 즉 붕어빵 틀이다.
- 처음 한번만 선언하고 데이터(붕어빵 반죽, 팥)는 들어있지 않다.
- 데이터(fields)와 행동(methods)를 담아 캡슐화를 해 상속과 다형성 등의 특성을 가진다.

### 객체

- 클래스에 데이터를 넣어 만든 인스턴스를 객체라고 한다. 붕어빵 틀에 반죽을 넣고 만든 팥붕 슈붕이 객체인 셈이다.
  
## 프로토타입 확장하기

```javascript
Number.prototype.multiplyTen = function() {
    return this * 10
}

let num = 5;
num.multiplyTen(); // 10
```

위 방식으로 자바스크립트에서 기본으로 제공하는 객체에 사용자 정의 메소드를 개발자가 직접 추가할 수 있다.
그러나 좋은 방식은 아니다. 메서드를 확장할 경우 다른 코드와 충돌을 일으킬 수 있다.
직접 클래스를 작성할 때에만 프로토타입 메서드를 정의하는게 좋다.

## JS Tips

- var는 정의되기 전에 접근할 수 있지만 그 값에는 접근 불가능
- let, const는 정의하기 전에 접근 불가
- 호이스팅: 모든 변수가 실행전 범위 내 상단으로 올라감. var는 정의되기 전에는 undefined, let은 변수가 선언될까지는 TDZ(Temporal Dead Zone비활성구역)에 있어서 오류가 발생
- 기본적으로 const 사용하자. 재할당 필요할 때만 let 사용하자. Var는 ES6에서 절대 사용X
- 디스트럭처링: 배열의 값 또는 객체의 속성을 풀어서 별개의 변수로 쓸 수 있게 하는 JS 표현식
- JS도 제너레이터 있음

## 반복문

- For of 루프/ 객체는 iterable이 아니니까 Object.keys()로 값 가져와서 for of 루프 돌리면 됨
- for in 루프는 순서 없이 객체의 모든 iterable props를 반복. for in 루프는 키 목록을 반환함

## Array 함수

```javascript
- Array.from() 객체를 배열로 받아서 변환(html elements 받아오기 유용)
- Array.from('apple')하면 [a,p,p,l,e]
- Array.of() 전달받은 인수로 배열생성
```

## 스프레드 문법

: 배열 복사본 만들 때 매우 유용

```javascript
const veggie = [1, 2];
const meat = [4, 5];
const menu = [...veggie, 3, ...meat];
// menu = [1,2,3,4,5]
```

## Rest 문법

: ...로 특정한 놈들만 빼고 압축해줌

```javascript
const runners = [1, 2, 3, 4];
const [first, second, ...losers] = runners;
console.log(losers); // 3,4
```


자바스크립트 개념


![해커톤하던 밤](/images/blog/192021/j1.jpeg)

- 핀란드에서 시작된 유럽 최대의 해커톤이라는 정션X가 서울에서 열렸다. 처음엔 기획자로 도전해볼까 했지만 아직 포트폴리오라던가 내세울 게 없어서 그냥 봉사활동 신청해보았다.  
2박3일, 자원봉사자 50명, 참가자 160명, 공식 언어는 영어.
- 인사의 힘?! 첫날 행사 준비 쉬프트를 맡아서 아침에 갔는데 나 포함 봉사자가 3명 있었다. 어색한거 싫어서 내가 먼저 통성명하자고 하고 말 계속 걸었다.  일하는데 계속 새로운 봉사자분들이 오셨다! 다들 유쾌했고 이번 해커톤을 성공적으로 마무리하겠다는 열정을 가지고 있었다. 덕분에 정말 즐거웠고 좋은 추억 만들었어요! 
- 행사 준비 쉬프트 같이한 친구 중에 특성화고에 다니는 개발자 친구가 있었는데 벌써 해커톤 15번 나가봤다더라.  뭐해봤냐고 물어봤더니 피(헌혈)만을 위해서 길러지고 죽는 공혈견 돕는 프로젝트를 해봤다고 설명을 해줬다. '공혈견'이라는 단어 자체도 처음 들어봤고, 코딩,프로그래밍?을 이용해서 그런 사회문제를 해결할 수 있다는 게 진짜 멋있다고 생각했고 와닿았다. 수많은 배움 중 하나 

![나이트모드](/images/blog/192021/j2.jpeg)

- 이벤트 후원사들 중 아예 참관하러 왔다가 추가로 스폰하고 싶다고 한 기업들이 있었다. 기업들이 이런 행사를 예의주시하고 있을 줄 몰랐는데(그럴리가), 아는 사람들은 다 알고 있었구나 싶어서 이 커뮤니티에 어떻게든 들어가야겠다고 다짐했다. 기회는 정말 내가 찾으러다녀야하나보다!!
- 신청자 받아서 스타트업 미팅 세션도 있었다. 스타트업 창업, 투자 등등 궁금한점 있는 사람들이 전문가에게 멘토링을 받을 수 있는 시간이었다.  한 친구분이 참여하신다길래 물어보니까 아이디어가 있어서 한번 물어보려고 신청했다는 거 듣고 '이 사람들 진짜 부지런하고 멋지고 열정적이다...' 느끼면서 다시한번 열심히 살자구 생각했다...^^ 
- 빛의 도시 서울에서 진행된 해커톤답게 자원봉사자들이 조명을 위해 창문에 검정 시트지를 다 붙였다. 한 조명 감독님이 행사 처음부터 끝까지 함께 하셨는데, 참 센스 있는 분이셨다.  탁구공마냥 가볍고 통통 위트있게 말씀하시는데 타고난 센스에 연륜이 합쳐진 것 같았달까! 여러모로 그 분의 상황 대처 능력과 순발력... 공부한다고 되는게 아니겠지만, 배우고 싶다고 생각했다. 

![크루 단체사진](/images/blog/192021/j0.png) 

- 컨디션이 태도가 되지 않는 사람 세상에서 제일 멋진 듯!!!
- 예전에 오퍼레터 받고 장학금 인터뷰까지 봤던 대학교의 학생들이 참가했다.  재미있었다 내가 만약 밴더스니치에서 다른 선택을 했다면 아예 다른 상황이었을 수도 있었겠구나 싶은 거? ㅋㅋㅋ 그렇습니다 저 밴더스니치 공략 찾아서 여러 결말 다 봤습니다... 
- 언어가 재미있다는 건 무슨 느낌일까? '영어'가 재미있다기보다는 내가 대화할 수 있는 사람의 폭이 늘어나니까 재미있다ㅋㅋㅋ 아무래도 영어가 세계 공통어라 더 많은 나라, 지역의 사람들의 이야기를 들을 수 있어 좋다. 이번 봉사하면서 영어 캐나다에 있을 때만큼 썼는데 영어가 그 사이에 또 는 느낌이더라고요 재밌고 기분 좋았습니다 
- 나는 예전부터 기획자가 하고 싶었다. 공연기획자, A&R, 마케팅에 도전했던 것도 다 그런 맥락에서였는데 이번 해커톤에 참가하면서 프로그래머, 기획자, 디자이너가 만나면 진짜.. 멋진 차원의 기획을 할 수 있구나 싶었다. 저도 사용자 경험... 이런거 고려하면서 기획해서 프로그램 만들고 싶어요!! 예전엔 무조건 기획자의 롤을 탐냈다면 이젠 프로그래머의 롤이 더 탐난다. 내년에 참가자로 참여해야지ㅎㅎ


난생 처음으로 해커톤에 참여해봤다. 그것도 번역 봉사자로!

After working as a volunteer for JunctionX Seoul


![이벤트 티켓](/images/blog/192021/can0.png)

학교에서 구글 캐나다의 데이터 저널리즘에 대한 강연이 있다길래 바로 티켓을 예매했다!  
티켓 링크는 from https://humber.ca/today/events/data-driven-20-54102  

![비가 내렸다](/images/blog/192021/can2.jpeg)

## 참석 계기

학교 미디어학부랑 구글 캐나다가 진행하는 컨퍼런스에 다녀왔다.   
주제는 'data journalism'이었다. admission 마감 엄청 빨리 됐던데 신청해놓고 안 온 사람들 많아서 쾌적했음.   
구글 캐나다 본사라 한 건물 차지하고 있을 줄 알았는데 아니라 놀랐고, 천장이 굉장히 낮았다.

![점심으로 먹은 롤](/images/blog/192021/can4.jpg)
정말 맛있었던 점심.

![이벤트 현장](/images/blog/192021/can5.jpeg)

## 데이터 분석과 마케팅 

데이터 분석과 마케팅은 '스토리 텔링'이 핵심이라는 점에서 같은 맥락이라고 생각했다.   
아무리 흥미로운 데이터 결과를 도출해내더라도 그게 무슨 의미인지, 무슨 가치를 가지고 있는지 
정확한 타겟에게 이해하기 쉬운 방식으로 설명할 수 없으면 그 데이터는 가치를 가질 수 없다. 
마케팅 또한 그 소비자가 그 물건을 구매해야하는 이유, 스토리가 없으면 그 상품은 가치를 지니지 못하게 된다. 
이 두개가 매력적인 이유.

![이튼센터 장식](/images/blog/192021/can7.jpeg)

## 느낀 점 

오늘 참석했던 행사 완전 Motivating.. 
캐나다 온 순간부터 내 comfort zone에서 벗어났으니까 불편하고 힘든 거 당연한건데 그걸 잊고 지쳐가고 있었다. 
의사소통부터가 완벽하게 안되니 편안할 수 없는게 당연한건데.. 
그렇게 comfort zone에서 벗어나서 press forward하고 싶었으면서 몽총이다 몽총이야.

![근처 베이커리에서 먹은것](/images/blog/192021/can8.jpg)

Joined a terrific event about Data Journalism.

자바스크립트 개념

After working as a volunteer for JunctionX Seoul

DATA DRIVEN 2.0 @ Google Toronto