항해99 12기 - 1주차 WIL

이번주 주제: 함수와 객체, 데이터 타입, 실행 컨텍스트

함수와 객체

Keywords: 해시, 객체, 객체의 프로퍼티, 함수, 메서드, 일급객체, 생성자 함수

• 해시 자료구조란?

메뉴판이 있으면 키(메뉴 이름)를 해쉬함수를 통해 숫자로 바꿔주고 
그 숫자가 인덱스(번호)가 되고 거기에 밸류(가격)가 저장되는 구조를 말한다.

• 자바스크립트 객체로 주로 하는일이란?

서랍장을 객체로 서랍 안에 파일을 프로퍼티로 파일에 붙여있는 이름표를 
키(key)로 안에 있는 내용을 값(value)이라고 생각하면 된다.
즉 여러 속성을 하나의 변수에 저장 할 수 있도록 해주고 
키(이름표)를 보고 프로퍼티(파일)를 찾을 수 있게 해준다.

• 객체의 프로퍼티란?

서랍장 안에 이름표가 붙어 있는 파일이라고 생각하면 된다 
객체(서랍장) 안에 선언된 key(이름표)와 value(내용)으로 이루어진 
한 쌍(파일)을 말한다. 
프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있다. 
즉, 프로퍼티 키는 프로퍼티를 식별하기 위한 식별자이다.

• 함수와 메서드

- 호출방식에 따라 다르다, 함수를 호출하는 객체가 있는 경우 메서드, 
호출하는 객체가 없는 경우 함수
- 함수는 객체로 부터 독립적이며, 메서드는 객체에 종속적이다.
- ‘객체’로부터 독립적인가 아닌가가 함수와 메서드를 나누는 기준이다.

let obj ={
	test: function(){
		console.log('test() 메서드 호출');
	}
}

function test2(){
	console.log('test2() 함수 호출');
}

	obj.test(); //메서드
	test2(); //함수

• 일급객체

아래의 세 조건을 만족하면 일급객체로 간주한다.
1. 변수에 할당 할 수 있고, 
2. 파라미터(parameter)로 전달 할 수 있고,
3. 함수의 반환 값으로 사용할 수 있다.

// 1. 변수에 할당 할 수 있다.

let test = function(a,b){
	return a + b;
}

// 2. 파라미터로 전달 할 수 있다. 
//	-> me에 파라미터로 algorithm을 넣어 '어렵다..'가 출력된다.
let algorithm = function(){
	let algo = "어렵다..";
	return algo;
}

let me = function(text){
	console.log(text);
}

me(algorithm()); //어렵다.. 출력


//3. 함수의 반환 값으로 사용할 수 있다.
function javaScript(){
	return function(){
		console.log("자바스크립트도 어려워요");
    }
}

let me = javaScript();
me();

• 생성자 함수

1. 생성자 함수란 ‘객체’를 생성할 때 사용하는 함수이다.
2. 여러개의 동일한 프로퍼티를 가지는 객체를 생성하기 위해서 필요하다.
3. 생성자 명은 일반 함수와 구별하기 위해 대문자로 시작한다.
4. new 키워드를 통해 생성자 함수를 호출한다.
5. 또한 부모함수명.prototype.생성할함수명 = function() {}으로도 
생성 가능하다.

데이터타입

Keywords: 기본형, 참조형, 불변성, 메모리 주소, 식별자, 변수, 가변값, 데이터 영역, 변수 영역, 불변 객체, 얕은 복사, 깊은 복사, undefined, null

• 기본형 & 참조형

- 기본적으로 기본형은 불변값이고 참조형은 가변 값이다.
- 기본형은 값이 담긴 주솟값을 바로 복제하고, 
  참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다.

• 불변성

- 불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역메모리 이다.
- 기본형 데이터인 숫자, 문자열, boolean, null, undefined, Symbol은 
  모두 불변값이다.

• 메모리 주소
  javascript 변수 메모리 할당에서 동작 원리를 잘 정리해 주셨다.
• 식별자 & 변수

변수는 변경 가능한 데이터가 담길 수 있는 공간이고, 식별자는 그 변수의 이름을 말한다.

• 가변값

- 참조형 데이터가 '가변값'이라고 할때의 '가변'은 참조형 데이터 자체를 변경 할 경우가
  아니라 그 내부의 프로퍼티를 변경 할 때만 성립한다.

• 데이터 영역

- 불변성과 가변성은 변수 영역이 참조하는 데이터 영역이 바뀌냐 안바뀌냐의 차이이다.

• 불변 객체

- 객체에 변화를 가해도 원본이 그대로 남아있어야 하는 경우 불변 객체가 필요하다. 

• 얕은 복사 & 깊은 복사

- 얕은 복사는 객체의 참조값(주솟값)을 복사하고, 깊은 복사는 객체의 실제값을 복사한다.

• undefined 와 null

- 자바스크립트에서 `없음`을 나타내기 위한 두가지 값이다. 
-`undefined`는 어떤 변수에 값이 존재하지 않을 경우를 의미하고, 
 `null`은 사용자가 명시적으로 '없음'을 표현하기 위해 대입한 값이다.

실행 컨텍스트

Keywords: 실행 컨텍스트, 환경 정보, 스택, 큐, 전역 컨텍스트, 콜스택, Variable Environment, Lexical Environment, 호이스팅, 함수 선언문, 함수 표현식, 스코프, 스코프체인

• 실행 컨텍스트

실행할 코드에 제공할 환경 정보들을 모아놓은 객체

• 스택, 큐

- 스택은 출입구가 하나인 데이터 구조이다, 비어있는 스택에 순서대로 a,b,c,d를 저장했다면, 
  꺼낼 때는 반대로 d,c,b,a 순서대로 꺼낸다.
- 큐는 양쪽이 모두 열려있는 파이프라고 생각하자. 
  종류에 따라 양쪽 모두 입/출력이 가능한 큐도 있으나 
  일반적으로 순서대로 a,b,c 데이터를 넣으면 a,b,c 순서대로 꺼내게 된다.

• 전역 컨텍스트

모든 범위에서 사용할 수 있는 변수/함수

• 콜스택

- 자바스크립트 코드가 실행되며 생성되는 실행 컨텍스트를 저장하는 자료구조
- 함수를 호출하면 실행 컨텍스트가 생성되고, 이를 콜 스택에 추가한 다음 함수를 시작한다.

• Variable Environment & Lexical Environment

- 각 실행 컨텍스트는 variable environment(변수환경)을 가지고 있다.
- 변수환경에는 실행컨텍스트 내부에서 선언된 변수 정보 + 외부 환경 정보가 저장 된다. 
  즉, 실행 컨텍스트에서 변수를 선언하면, 그 실행 컨텍스트 한정 자신의 변수환경에 있는 변수를 사용 할 수 있다.
- 자바스크립트는 해당 컨텍스트에서 변수를 찾을 수 없을 경우 렉시컬 환경으로 이동해서 별수를 찾는다. 
  즉, 어디서 선언 했는 지에 따라 렉시컨 환경이 정해진다.

variable environment( 실행 컨텍스트 당시 snapshot) -> lexical (변경사항 실시간 반영)

• 호이스팅

선언된 변수를 끌어올린다(변수정보를 수집)

• 함수 선언문과 함수 표현식

- 함수선언문은 function 정의부만 존재하고 별도의 할당 명령이 없는 것, 
  함수표현식은 별도의 변수에 할당 해준 것.
- 함수 선언문은 전체가 호이스팅되고, 함수 표현식은 변수 선언부만 호이스팅 된다.

• 스코프 & 스코프 체인

- 스코프? 식별자(변수명)에 대한 유효범위
- 스코프 체인? 각각의 스코프가 어떻게 연결되고 있는지 보여주는 것
- 자기 자신의 스코프(scope)를 제외한 자신과 가장 가까운 변수 객체의 
  모든 스코프들을 스코프 체인 이라고 할 수 있다.

이번 주에 배운점 & 느낀점

1주차는 첫날부터 풀스택 미니 프로젝트를 1박 2일로 진행했다. 월요일 아침 9시부터 화요일 아침 6시까지 진행했고, 발표까지 해서 8시 30분쯤 끝났다. 저번주부터 정말 걱정 많았는데, 이번에도 팀원 분들을 너무 잘만나서..! 잘 끝낼 수 있었다. 화요일은 정말 정신없이 자고, 수요일부터 새로운 팀원들과 자바스크립트 공부를 시작했다. 자바스크립트가 이렇게 어려운 언어 였나..! 싶었다. 특히 용어들이 너무 어려워서 머리에 하나도 안들어 왔다. 그래도 읽은걸 팀원들과 얘기해보고, 내가 이해한 것을 팀원들에게 이해시키려고 공부하다보니 혼자 책읽고 아 이해했다. 했을때보다 훨씬 많이 머리에 남았다. 실행 컨텍스트는 아직도 많이 어렵지만, 잘 이해하면 코드를 지금보다 훨씬 잘 짤수 있을 것 같다! 사실 호이스팅, 스코프 등 실행 컨텍스트의 개념 자체를 모르고 코딩했을때는 변수 아무곳에나 선언해 놓고 여기서 변수 찍히나? 하면서 console.log를 찍어가며 코딩 했었다. 그런데 실행 컨텍스트를 공부하면서 아.. 이래서 거기서 변수가 사용되지 않은거구나. 그래서 undefined가 나왔구나, 하면서 더 잘 이해하고 싶어졌다. (물론 지금도 100%이해하지 못함) 반복이 답이겠지..!
그리고 다다음주에 있을 알고리즘 공부를 위해 리액트 주특기를 선택한 분들과 같이 알고리즘 챌린지를 한다. 프로그래머스 Lv.0 문제들로 진행하고 있는데 생각보다 많이 배울 수 있을 것 같다! 예를 들어서 나는 정수값을 얻을때 parseInt를 사용하는데, 다른 분은 Math.floor를 사용하는 것을 보고 아 저렇게도 사용하는 구나 하면서 배울 수 있었다. 그리고 따로 Lv.0을 풀어보고 있는데, 정말 for문과 for..of만 알던 내가 이제 forEach도 써보고 map, reduce도 써보면서 자바스크립트 함수에 익숙해지고 있다..! 빨리 자유자재로 쓸 수 있는 날이 왔으면 좋겠다. 앞으로도 화이팅하자!

풀스택 미니 프로젝트

완성도 ⭐️⭐️⭐️⭐️⭐️(물론 로그인 후 리뷰 삭제/수정 등의 구현은 하지않았지만, 1박2일동안 처음 구상했던 것들을 다 구현 했기 때문에 5점 만점!)
기여도 ⭐️⭐️⭐️⭐️(저번 프로젝트때는 git공부하느라 프로젝트 자체에 기여는 많이 못했는데, 이번엔 프론트가 나 하나였기때문에 프론트 쪽 기여를 많이했다. 찾아 보면 더 잘 할 수 있는데 마지막엔 지쳐서 나 자신과 타협했기때문에 양심적으로 별 하나는 뺌..ㅎ)
팀 호흡 ⭐️⭐️⭐️⭐️⭐️ (정말 우리팀 최고였다. 1박 2일인데 다들 끝까지 열심히 해주시고, 마지막까지 웃으면서 프로젝트 마무리해주셨다!)
만족도 ⭐️⭐️⭐️⭐️⭐️ (1박2일동안 하는 프로젝트라 걱정 정말 많았는데, 팀 호흡도 좋았고, 내가 배우고싶었던 git flow도 사용해보고, 프론트쪽으로 기여도 할 수 있어서 정말 만족 한다!)

참고한 웹사이트

• 데이터 타입: https://velog.io/@moonheekim0118/JavaScript-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%95%A0%EB%8B%B9
• 얕은 복사, 깊은 복사: https://bbangson.tistory.com/78
• 콜스택과 이벤트 루프: https://frontj.com/entry/8-Javascript%EC%9D%98-%EC%BD%9C-%EC%8A%A4%ED%83%9D%EA%B3%BC-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84
• variable, lexical environment: https://velog.io/@colki/Udemy-Variable-Environment-Scope-Chain
• 스코프 & 스코프체인: https://ljtaek2.tistory.com/140