코드스테이츠 SEB Full 37기 2일차

1. 배운내용

Document Object Model tree : element 가 나무처럼 밑으로 뻗어나가는 구조

 

변수

- 변수이름 규칙 : 1. 공백x  2. 예약어(true, for...) 사용x   3. 숫자로시작x  4. _ 와 $ 기호만 허용

 

o 선언, 참조, 할당의 뜻

 

- 선언(declaration) :  변수명을 자바스크립트 엔진에 알리는 것

- 참조(reference)   :  변수에 저장된 값을 읽어 들이는 것

- 할당(assignment) :  변수에 값을 저장하는 것

 

o 변수 선언

- 변수의 선언은 var, const, let 키워드로 할 수 있음.

 

여기서 멈춰!

 

- var, const, let의 차이는????

 

	const	var	let
grobal.s	x	o	x
func.s	o	o	o
block.s	o	x	o
재선언	x	o	o

 

 

 

- 웬만하면 const -> let 순으로 쓰기! (재선언 지맘대로 되면 되돌리기 어려우니까!)

 

o 변수 선언 :  선언 -> 초기화  단계를 거쳐 수행함.

 

- 초기화 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화함.

 

- 변수에 값을 할당 할때는 할당 연산자(=)를 사용함.

 

- 변수는 동일한 변수를 이용해 대입가능

 

let sum = 1; // undefined <- 초기화 (얘도 값임)
    sum = sum + 2; // 3 출력, sum은 재선언 할 필요없기때문에 let은 생략
    sum = sum + 3; // 6 출력

 

o 호이스팅

 

https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/ 체크해봐야됨 지금은 머리터짐. 2021.12.14 P.M 10 : 37

 

타입

- 타입의 형태는 원시자료형과 참조자료형이 있음

 

o 원시자료형 : 변수하나에 하나의 데이터가 들어가는 것

 

1.  String(문자열) : '' or "" 등으로 둘러쌓인 문자의 집합

 

2. Number(숫자) : 따옴표 안씀!

 

3. Boolean(불리언) : T or F

 

4. Symbol(심볼) : ~~

 

5. Undefined : 할당되지 않은 값! 

 

6. bigint : ~~

 

o 참조자료형 : 원시자료형이 아닌 모든것

 

- 변수에 값이아닌 주소를 저장함(이 주소 보관함을 heap라 그럼)

 

- 여러개의 데이터 저장 可

 

- Object(객체), Array(배열), Function(함수) 등이 있음

 

o 원시자료형과 참조자료형의 차이점

 

// 원시자료형
let a = 1;
b = a;
b= 2;
console.log(a); //1 
// 원시데이터는 데이터 값이 복사되므로 기존의 데이터(a)에 영향 x

 

// 참조타입 데이터
let e = [10, 20];
let f = e;
f[0] = 50; // f의 배열 첫번째(10)대신 50으로 대체되었음
console.log(e); // [50, 20] 
/* 참조타입 데이터는 주소를 복사하므로
복사한 데이터에서 원소를 변경하면
주소안의 데이터가 변경 되므로
기존의 데이터에도 영향이 감 */

o == 와 ===에 대해

 

==	===
==는 값만 비교한다 그래서 ==는 의도적으로 형태를 변환한다 ex) Boolean인경우 true -> 1로                         false -> 0으로	=== 는 타입도 비교한다 === 는 형태를 변환하지 않는다 ===는 엄밀한 비교이다.

- 마찬가지로 != 보다 !==을 쓰자.

 

 

o 속성과 메소드의 뜻에 대해

 

속성	메소드
객체 내부의 변수이다(참고로 배열의 값은 요소)	속성값부분이 함수일때

//속성
let object = {
  키a: "값a" // 여기서 키a는 속성이고 "값a"는 속성값이다.
  키b: "값b"
  };
  
  object.키a // 값a 요소접근법이라네.
  
  
//메소드
let method = {
  키c: function(food) { // 속성값부분이 함수임!
  ~~~
  }
  };

 

함수

- 함수는 마지막에 return해서 반환해줘야함. 아니면 undefined 반환.

--------------------------------------여기서 부터 블로그 작성시 너무 오래걸려 배운것만 간단히 작성----------------------

- keyword, name, parameter, body 의 특성알기

 

- 함수선언법은 3가지가 있음

 

1. 함수선언식 : function name(param) {body}

 

 

2. 함수표현식 : const name = function () {body};    여기서 함수표현식에는 ;써주기

 

함수선언식과 함수표현식의 차이 공부

 

 

3. 화살표함수 : const (name) = (parameter) => (body) 

 

여기서 한줄이면 body부분에 중괄호랑 return 생략 可

 

- 매개변수와 전달인자의 차이점 이해

 

조건문

 

- 조건문은 어떠한 조건을 판별하는 기준을 만드는것

 

- 조건문에는 반드시 비교연산자(>, <, ===등)가 필요

 

- if else 조건문 이해 (마지막 else는 선택사항)

 

- 두가지 조건이 한번에 적용되는경우? -> 논리연산자(|| && ! 같은것) 이용

 

- 기억해야할 6가지 falsy 값

 

false, null, undefined, 0, NaN, ""

 

 

2. 문제관련 피드백

Q. 문자열을 숫자로바꾸는 함수 stringToNumber 만들기

function convertToNumber(anything) {
Number(anything);
return anything;
}

이거 안됨  왜 안됨?

 

우선 되는 풀이

 

//1. 새로운 변수 지정

function convertToNumber(anything) {
let a = Number(anything);
return a;
}

//2. 

function convertToNumber(anything) {
return Number(anything);
}

//3. 화살표 함수

let converyToNumber = anything => Number(anything);

 

3. 느낀점

 

- 코드스테이츠 하는데 페어시간이 절반이상으로 중요한것같다.

 

- 페어랑 소통하면서 내가 몰랐던 아이디어를 발견하는것 이게 진짜 중요한듯.

 

- 그리고 소통소통소통 진짜 중요함!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

4. Future Action

 

- 페어 시간을 잘 활용할수있는 방법 생각

 

- 예습 복습 시간 조절 잘하기