[220523 / Day 15] JS : 변수, 함수 / CSS : grid 1

JS

1. 변수

let 말고 다른 것도 알아보자

-변수 선언 부분 : 이 변수를 사용하겠다고 선언

-변수 초기화 부분 : 변수에 값을 지정해주는 것, 메모리를 확보하는 과정

 

1) var

 - var 를 사용하면 값을 지정하지 않아도 undefined 초기값이 나옴 js1.js

 - var 와 console 의 위치를 바꿔도 값이 나옴

 - 호이스팅(끌어올리기) : 등록되어 있는 선언문으로 만든 함수, 변수들을 자바스크립트가 실행을 시작할 때 그 직전에 먼저 미리 이런 변수, 함수를 사용할 것이라고 읽어놓음 (var, 선언문으로 된 함수)

 - 불편한 점 : 아직 쓰고 싶지 않은데 이미 불러져 있음, 코드가 길어져서 같은 변수를 또 사용

 - var 는 중복 선언 가능

 - 함수 외부에서 사용한 변수는 모두 전역 변수가 된다 : 함수 내부에서만 사용한 변수는 내부에서만 살아있고, 외부에서만 사용한 변수는 전체 코드로 사용 가능

 

2) let

 - 재할당 가능, 중복선언x js2.js

 - 코드블록, 즉 블록 레벨 스코프(범위) 를 따른다. 블록 밖이냐 안이냐, if 문은 안에서만 작동, 따라서 if 문 따로 콘솔로그해주지 않으면 출력되지 않음

 - 선언하기 전에 초기화하면 초기화해주지 않았다고 에러가 뜸 따라서 선언하고 초기화해줘야 함

 - undefinded 도 할당되지 않음

 - 먼저 호이스팅이 되도 초기화 단계가 없어서 값을 읽어오지 못함

 - 선언문에 도착했을 때 초기화가 됨

 - 선언만 해주고 console.log 해주면 그때 undefined 뜸

 - TDZ (템퍼럴리 데드 존) : 일시적인 사각지대 존재, 호이스팅이 안되는 것처럼 보이는 사각지대가 있음, 존재하지만 사용할 수 없는 상태

 - 선언과 초기화 분리해서 가능

 

3) const

 - 재선언 재할당 안됨

 - 상수라고 함 변하지 않는 값

 - 객체를 할당할 때는 가능, 객체 안의 속성이나 프로퍼티 생성 삭제 변경은 가능

 - 블록 레벨 스코프

 - 선언과 초기화를 반드시 같이 해야 에러 안남

 - 호이스팅은 되지만 한줄 한줄 읽어주기 때문에 같이 쓰지 않으면 에러

 - 보통 중요한 값은 const 로 설정함

 

 

 

3. 함수 function js4.js 258p

 

1) 정의하는 방법

 - 함수 선언문으로 정의하는 방법

 - 함수 리터럴로 정의하는 방법

 - function 생성자로 정의하는 방법

 - 화살표 함수 표현식으로 정의하는 방법

 

2) 매개변수

 - 인자 (전달받는 값) : function (매개변수) { } , 지역변수(함수 안에서만 사용 가능)

 - num(10,20) -> 인수 (argument) : 매개변수 인자에 전달, 인수는 전달하는 값

 - return : 함수는 종료, 끝나면서 결과값을 반환함, 있을 수도 있고 없을 수도 있음

 - 값을 주지 않으면 function : 변수 이름 이렇게 나옴

 

3) arguments

 - 객체 : 함수가 호출될 때 전달 받은 아규먼트들이 저장되는 객체, 배열의 형태를 가지고 있음

 - console.log(arguments) → [Arguments] { '0': 10, '1': 20 } 출력

 - console.log(arguments.length) → 아규먼트 개수 나옴

 - 그리고 속성 뒤에 각 넘버 붙이면 각 값을 출력해줌

 

function numAdd(a=0,b=0,c=0){
	return a+b+c; 
}
console.log(numAdd(10));

→ 값을 할당하지 않아 NaN 이 나오는 것을 방지하기 위해 초기값을 지정해 놓을 수 있음 / 초기값은 아규먼트라는 객체에 나오지 않음

 

 * … : 스프레드 연산자, 매개변수의 인수값을 다 풀어서 각 할당함 / num 만 적으면 맨 앞의 한 값만 나오는데 변수 앞에 … 해주면 각 값이 모두 나옴

 

4) 화살표 함수

 function 에 이름 있어도 없어도 상관없음

 호출 순서대로 출력

 먼저 변수를 읽어오고 함수들은 호이스팅이 되지 않음 할당되지 않은 상태로 호출해주면 선언적 함수에만 호이스팅  이거 다시~!~!~! 어려버~!~!~!

 

5) 즉시 실행 함수

 - 뭔가 즉시 실행할 때 사용, 많지 않지만 라이브러리 쓸 때 사용 js7.js

 - 이름 붙이나 안붙이나 상관없음, 세미콜론은 꼭 붙여줄 것

(function (){
    console.log(`즉시 실행`)
})();

 

6) 콜백 함수 315p

 - 함수 안에서 실행하는 또 다른 함수

 - 매개 변수로 값이 아닌 다른 함수가 전달, 매개변수로 전달되는 함수 / 이벤트를 열 때 특정 시간을 매개변수로 지정하고 그 시간이 지나면 닫히도록 할 때 쓰기도 함

 

7) 고차 함수 307p

 - 부모함수 라고도 하는데 함수를 매개변수로 전달받거나 함수를 반환하는 함수, 매개변수로 다른 함수는 전달받거나 함수를 리턴하는 함수

 

 

 

4. 논리합

 둘 다 true 값이면 왼쪽 값으로 평가

 둘 다 false 값이면 오른쪽 값으로 평가

 

 일급 객체 : 함수도 일급 객체로 ?????? !!!다시!!!

 

 

 

 

 

CSS

1. grid

 플렉스는 display: flex 만 해도 수직정렬 되는데 그리드는 반응 없음

 inline-grid : 갖고 있는 컨텐츠의 공간만 차지, 쓸 일이 많지는 않음

 

부모요소 속성

 - grid-template-columns : auto, auto 하면 세로가 전체 넓이의 절반, 절반이 n등분 됨 auto 세번 하면 삼등분, px로 지정할 수도 있음 / fr – fraction 은 flex-grow 와 똑같음(1fr 2fr 3fr 이렇게 적용)

 - grid-template-rows : 콜룸의 가로 방향 적용(높이라고 생각하면 됨) / 하나만 설정하면 나머지는 컨텐츠 공간만

 - grid : 축약형 / 속성값은 row/column

 - column-gap : 자식 요소 사이 세로축 넓이에 적용

 - row-gap : 콜룸 갭의 반대인 가로축 자식 요소 사이 넓이에 적용

 - grid-gap : 축약형 / 속성값은 row, column 순서로 작성

 - justify-items : 자식 요소 하나씩 이동 / 주축 기준 이동 /  start, center, end, stretch

 - align-items : 교차축 기준 이동 / stretch 주고 넓이값 없애면 꽉 차게 차지 넓이값 주면 적용 x

 - justify-content : 각 판의 위치를 잡아줌