20220523 TIL

변수

하나의 값을 저장하기 위해 확보한 메모리 공간 자체. 또는 그 메모리 공간을 식별하기 위해 붙인 이름.

변수 선언의 단계

1. 선언 : 변수를 생성하는 것. 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것. 변수를 사용하기 위해서 반드시 선언이 필요함.

2. 초기화 : 아무것도 하지 않고 선언만 해도, 변수를 선언하게되면 초기화를 거쳐 undefined가 들어감. 값을 저장하기 위한 메모리를 확보하는 과정

var a;
console.log(a);

호이스팅
변수 선언이 runtime(소스코드가 한줄씩 순차적으로 실행되는 시점.)이 아니라 그 이전 단계에서 먼저 실행됨. 소스코들을 실행하기에 앞서 소스코드의 평가 과정에서 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행함. 평가 과정이 끝나면 소스코들을 한줄씩 실행함.
변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

할당
변수에 값을 대입하는것. 변수 선언은 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행됨.

변수 선언

1. var

console.log(a);
var a;

1) 중복 선언이 가능 (재선언)
var : 이름이 같은 변수를 다시 선언할 수 있음. 중복선언이 가능함

var a = 0;
var a = 10;
console.log(a);

2) 함수 외부에서 선언한 변수는 모두 전역변수가 됨.

var num = 1; //전역변수
if(true){
    var num = 100; //전역변수(함수아님)
}
console.log(num);

둘 다 함수 내부에 있는 변수가 아니므로 전역변수이고 재선언으로 인식하기 때문에 100이 됨.

함수 내부에서 사용하는 변수 : 지역변수 - 함수 내부에서만 값이 살아있음
함수 외부에서 사용하는 변수 : 전역변수 - 전체 코드에서 사용할 수 있음.

3) 변수 호이스팅
변수 선언문 이전에 참조할 수 있음. 변수 선언문 이전에 참조하는 것은 변수 호이스팅에 의해 에러를 발생시키지는 않지만, 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남김.

2. Let

1) 재선언 불가능

let hello = '안녕하세요';
if(true){
    let hello = 'hello';
    console.log(hello);
}
console.log(hello);
let hello = '반갑습니다';

재선언이 불가능함.

2) 블록레벨 스코프
let은 모든 코드블록(함수, if문, for문, while문, try/catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따름

블록으로 싸여있으면 지역변수로 인식함

let hello = '안녕하세요'; //전역변수 : 함수 전체
if(true){
    let hello = 'hello'; //지역변수 : 블록 안에서만 인식함.
}
console.log(hello);

재선언이 아닌 각각 다른 변수

3)재할당 가능

let hello = '안녕하세요';
if(true){
    let hello = 'hello';
    console.log(hello);
}
hello = '반갑습니다'
console.log(hello);

4) 변수 호이스팅

선언 단계와 초기화 단계가 분리되어 진행된다.

console.log(hello);
let hello = '안녕하세요';

var는 호이스팅 단계에서 선언과 초기화가 동시에 이루어짐. 자동으로 undefined 할당함. let은 var처럼 암묵적으로 undefined가 할당되지 않음.
let은 호이스팅 단계에서 초기화되지 않음. 초기화는 코드를 실행하면서 선언문이 있는 자리에서 이루어짐. 초기화 단계가 실행되지 않았을 때 해당 변수에 접근하려고 하면 에러가 출력됨. hello는 초기화 되어있으므로 못읽은것이 아님. 선언문 뒤에서 읽어야 출력할 수 있음.

✔일시적 사각지대 Temporal Dead Zone(TDZ) : 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간.

const

1)재선언 불가능

const num = 20;
num = 20;

에러가 뜸. 상수(변하지 않는 값).

• 객체를 사용할 때 객체 안의 속성이나 property생성 삭제 변경은 가능

  const kim = {
      age : 30,
      name : '순이'
  }
  kim.name = '철수';
  console.log(kim);

2) 재할당 불가능
상수 : 변수의 반대 개념, 재할당이 금지된 변수. 상수도 값을 저장하기 위한 메모리 공간이 필요하므로 변수라고 할 수 있음.
하지만 const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다. (객체는 재할당 없이도 직접 변경 가능)

3) 블록레벨 스코프

4) 선언과 초기화

console.log(num);
const num = 10;

반드시 선언과 동시에 초기화 해야함. 선언과 초기화를 분리하지 못함. (let은 선언부화 초기화가 분리됨.)
선언과 초기화 같이 일어나야 하기 때문에 초기화가 진행되지 않은상태에 서 변수에 접근하려 고 하면에러가 출력된다.
호이스팅은 되지만 런타임 이전에 실행이 안됨.
코드를 읽어오는 런타임시에 실행됨. 그래서 초기화가 진행되지 않았다고 뜸.

중요한 값은 const로 선언.
재할당이 되어야 하는 것은 let으로 선언.

함수

일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것.

1. 선언문 방식

function hello() {
console.log('hello world');
}
hello();

매개변수(parameter)가 있는 함수

function num(a,b){
return a + b
}
const result = num(10, 20)//인수(a라는 파라미터, b라는 파라미터 인자에 저장됨)
console.log(result)

매개변수 : 함수 안에서 사용할 수 있음

전달받은값 : 인자
전달하는 값: 인수

return : 연산을 해서 결과를 반환해야 할 때 사용.

function userInfo(name , age){
return 이름은 ${name} 나이는 ${age}
}
const profile = userInfo('홍길동', 20)
console.log(profile)

📌곱하기 연산 하는 함수 만들기

function multi(num1, num2){
return num1 * num2
}
const resulMulti1 = multi(10, 20);
const resulMulti2 = multi;
console.log(resulMulti1) //200
console.log(resulMulti2(10,20)) //function

argument

전달받은 인수를 저장
array like object 배열의 형태를 가지고있음. (배열은 아님)

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

function numAdd( a, b, c){
console.log(arguments.length)
console.log(arguments[0])
console.log(arguments[1])
console.log(arguments[2])
return a+b+c;
}
console.log(numAdd(10,20,30))

function numAdd(a=0,b=0,c=0){ //초기값 설정
console.log(arguments);
return a+b+c; //10+0+0
}
console.log(numAdd(10));

전달된 인수값만큼을 전달하는 객체

들어갈 인수의 수가 가변적일때
spread풀어내는 연산자

function numAdd(...num){
console.log(num);
return
}
console.log(numAdd(10,20,30,40));

for 문 이용해서 전달받은 매개변수의 총 합 구하기

표현식

world()
const hello = function(){
console.log('hello');
}
const hi = function hiFnc(){
console.log('hi');
}
function world(){
console.log('world')
}
hello();
hi();

hello();
const hello = function(){
console.log('hello');
}
const hi = function hiFnc(){
console.log('hi');
}
function world(){
console.log('world')
}
world();
hi();

변수에 참조가 되어있음 : 할당이 되지 않은 상태에서는 표현식으로 되어있기 때문에 호이스팅이 되지 않음.
선언적 함수들만 호이스팅이 됨.

화살표 함수

const hello = function(){
console.log('hello');
}
const goodbye = () =>{
}

즉시실행함수

예시1
(function(){
console.log('즉시실행')
})()
예시2
(function num(){
console.log(100)
})()

즉시실행함수에서 주의할 점.

function world(){
    console.log('world')
};
const goodbye = () =>{
    console.log('goodbye')
};//👈1.
const hello = function(){
    console.log('hello')
};//👈2.
(function(){
    console.log('즉시실행')
})();//👈3.
(function num(){
    console.log(100)
})();

1. 선언적 함수와 화살표함수는 자동으로 세미콜론 들어감.
2. 참조타입은 세미콜론 자동으로 안들어감. 세미콜론 안찍으면 에러남
3. 즉시실행함수 사이에도 세미콜론 필요. 주의할것

콜백함수

개념

고차함수 : 함수를 매개변수로 전달받거나 함수를 반환하는 함수(부모함수)
콜백함수 : 매개변수로 다른 함수는 전달 받거나 함수를 리턴하는 함수

함수도 일급객체이기 때문에 가능
변수로 저장할 수 있는것
함수의 매개변수에 전달할 수 있다
반환값으로 사용할 수 있다.
동적으로 프로퍼티 할당 가능

const plus = (num) => {
return num + 2 ;
}
const minus = (num) => {
return num - 2 ;
}
const cal = (func, numValue) =>{//(plus, 10)
return func(numValue)
}
console.log(cal(plus , 10))//12

논리합 논리곱

논리합 or || : 좌항 우항 평가됨. 둘 중 하나가 참일때.
2개의 피연산자중 어느 하나의 값으로 평가된다.
평가된 값은 형변환 하지 않고 현재값을 반환한다.

논리합 ||

단축평가

논리합
console.log(true || true); //true
console.log(60 || 50); // 둘다 참이고, 좌항에서 우항을 반환하므로 60(평가가 좌항에서 끝나버림)
console.log(0 || ''); //''
console.log(undefined || 0); //0
console.log(0 || undefined); //undefined (좌항이 false이므로 우항까지 연산하여 출력함.)

논리곱
console.log(300 && 500); //좌항에서 평가가 끝날 수 없기 때문에 우항까지 평가하고 끝난 값을 출력함
console.log(0 && 500) // 0 좌항에 false가 나왔으므로 연산 멈추고 false 출력

부정연산
console.log(!10) //(!true) => false
console.log(!!10) // (!!true) => true
console.log(!'hello') // false
console.log(!!'hello') // true

Grid

부모요소에 주는 속성

display : grid/inline-grid

grid-template-columns

수직방향으로 나눔

1. auto : 남은 부분을 자동으로 차지함.

2. fr(fraction): 나머지 부분을 비율적으로 확장시킴.

grid-template-rows

수평 방향으로 나눔
수치가 안들어가있으면 컨텐츠 높이로 자동 설정

축약형 : grid: row / column;

css
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
/ grid: 100px 200px / 1fr 2fr 1fr /

column-gap

세로축에 여백

row-gap

가로축에 여백

축약형 : grid-gap : row/column

css
column-gap: 30px;
row-gap: 30px;
grid-gap : 30px / 30px

justify-items

start, center, end, stretch
자식요소에 width값이 있으면 stretch가 안됨.

align-items

start, center, end, stretch