TIL 220404

1. Input(학습)

2. Output(복습)

• 참조(객체: TIL0307, this: TIL0304 )
• 백준 배열문제(최솟값, 최대값)
• 객체 복습
• deep copy vs shallow copy

3. notes

Math.min(), Math.max()

인수(parameter)로 받은 숫자형들 중 최솟값 또는 최대값을 반환.

백준 문제에서는 배열을 전개연산자를 사용하여 인수에 넣었음.

let min = Math.min(...arr);

메서드

메서드란 객체의 프로퍼티 값이 함수일 경우 이 함수를 일반 함수와 구분짓기 위해 메서드라 칭함.

const 객체명 = {
    프로퍼티이름: 프로퍼티값, // 프로퍼티의 값(value)는 모든 자료형 다 사용 가능.
};

.repeat()

문자열을 인수만큼 반복(별찍기 문제에서 사용했음)

for(let i = 0; i < 5; i++) {
    console.log('*'.repeat(i + 1));
}

// *
// **
// ***
// ****
// *****

return 값

return값은 하나만 넣을 수 있다. 둘 이상의 값을 한번에 return하려면 배열이나 객체 리터럴을 return하면 된다.

또 조건에 따라 다른 return값을 반환하려면 조건문의 분기별로 return값을 지정해주면 된다.

매개변수(parameter)와 인수(argument)

매개변수는 함수를 선언시 외부의 값을 전달받는 역할

인수는 함수를 호출시 값을 함수에 전달하는 역할

매개변수와 인수의 개수가 일치하지 않아도 됨.

순수함수

순수함수란 자신의 매개변수나 내부 변수만을 사용하는 함수를 말한다. 따라서 외부에서 선언된 변수를 가져다 쓰는 함수는 순수함수가 아니다.

객체(배열, 함수, 객체 리터럴, ...)

객체 리터럴

const ryan = {
    age: 10,
    gemder: 'M',
    job: 'developer', 
}

{}을 이용해 객체를 표현하는 것을 객체 리터럴이라고 한다.

객체 리터럴 내부는 속성(property)들이 들어가고 속성은 property name : property value 가 들어가며 쉼표를 사용해 여러 속성을 넣을 수 있고 마지막 속성 뒤에도 쉼표를 써 주는 것이 코드의 수정에 용이하다.(후행 쉼표: trailing comma)

객체의 속성에 접근하는 방법

• 식별자 네이밍 규칙에 맞게 property name을 작성한 경우: .속성명

obj.age;

• 식별자 네이밍 규칙에 맞지 않을 경우: [’속성명']
  • 반드시 대괄호 내 문자열 형태로 값이 들어가야 한다. 그냥 속성명 그대로 쓰면 변수로 인식한다.

obj['user-age']; // .속성명 으로 접근시 에러 발생함. 반드시['속성명']으로 접근해야함.

객체의 속성 제거하기

• delete 객체명.속성명;

delete obj.age; // 제거된 속성 값은 undefined가 된다.

객체끼리 비교하기

{} === {} 는 false 이다. 왜냐하면 객체는 같은 값을 가졌더라도 생성시마다 새로운 객체가 생성되기 때문에, 즉 객체 생성시 값이 저장되는게 아니라 메모리에 저장된 주소값이 저장되고 생성될 때마다 다른 주소값을 가지기 때문에 값이 같은 객체라도 비교시 false가 됨. 따라서 true가 되려면 기존 객체를 변수에 저장하고 그 변수끼리 비교해야함.

const a = {name: 'ryan'};
const arr = [1, 2, a];

console.log(a === arr[2]);
// true

원시타입 vs 참조타입

원시값은 깊은 복사가 일어난다. 하지만 객체는 참조타입(refernce data type)이라 얕은 복사(참조)가 일어나므로 원본 객체와 복사한 객체 둘 중 하나를 수정해도 둘 다에 동일하게 반영된다. 이를 객체간에 참조관계가 있다고 말한다.

따라서 원본 객체와 복사한 객체의 값을 다르게 하려면 전개연산자를 사용하여 깊은 복사를 해야 함.

CSS - flex & grid

웹 레이아웃 기술의 변천사

display속성의 block과 inline 만으로는 원하는 레이아웃을 구현하기가 어려워 여러가지 레이아웃 속성을 사용한다.

레이아웃 구현 발전단계: table태그 → float → flex, grid

• flex: 가로 축 또는 세로 축 한 방향으로 배치 및 정렬
  • 단점: 한 방향으로만 레이아웃을 설정 가능
• grid: flex의 단점을 보완하여 가로와 세로 두 방향으로 배치 및 정렬 가능

Media Query

조건에 따라 다른 css 스타일링을 적용 → 반응형 웹에 필수적으로 사용됨.

@media 키워드와 소괄호()를 사용하여 적용하며 소괄호 내에 스타일이 적용될 조건(속성) 기입.

‘조건 && 조건’ 하려면 and 쓰고 소괄호는 조건마다 따로 묶어줌.

@media (min-width: 500px) and (max-width: 1000px) {
    body {
        background-color: blue;
    }
}

min-content, max-content

크기 단위를 min-content로 주면 컨텐츠를 유지하는 한에서 가장 작은 크기가 됨.

크기 단위를 max-content로 주면 컨텐츠의 최대 크기가 됨.

4. reminder

• 객체를 깊은 복사 하려면 전개연산자를 사용해야 한다.

let arr = [1, 2, 3];
let newArr = Array.of(...arr); // Array.of 메서드는 받은 인수를 요소로 갖는 배열을 생성
newArr.push(4);

console.log(arr, newArr); // (3) [1, 2, 3] (4) [1, 2, 3, 4]

• 객체 리터럴의 property의 이름은 변수명 네이밍 규칙을 따라 작성할 경우 감싸는 쉼표 생략 가능, 네이밍 규칙에 맞지 않는 property name의 경우(숫자로 시작하는 이름, 띄어쓰기, 온점 사용, 특수문자, 연산자 기호 등) 반드시 쉼표로 감싸줘야 property name을 ‘식'으로 해석하는 오류를 방지할 수 있다.
• window 객체(window global object) = 전역 공간