[TIL] 23.04.10

Minkyu Shin·2023년 4월 10일
TILjs코드잇 FE 부트캠프 0기
0

TIL

목록 보기
11/44
post-thumbnail

오늘의 나는 무엇을 잘했을까?

처음으로 Weekly 미션 코드를 셀프 코드 리뷰 해보았다. 추가할 사항이 있긴 하지만, 코드 리뷰를 해보니 코드 작성 시에는 몰랐던 실수를 알 수 있었고, 궁금한 부분을 정확히 질문할 수 있었다. 앞으로도 꾸준히 해보자.

오늘의 나는 무엇을 배웠을까?

JS

1. 값으로써 사용되는 함수

  • JS는 함수를 다른 변수와 동일하게 다루는 언어
  • 따라서 JS의 함수는 일급 함수
  • 함수를 다른 함수에 인수로 제공 / 함수가 함수를 반환 / 변수에 함수 할당이 가능

1-1. 어디에서나 할당, 다양하게 호출

1. 함수 표현식으로 선언하고 호출
const printHi = function () {
  console.log('Hi');
}

printHi(); // Hi

2. 객체의 메소드로 사용
const obj = {
  printHi: function(name) {
    console.log(`Hi ${name}`);
  }
};

obj.printHi('MK'); // Hi MK

3. 배열에 함수를 담아 호출도 가능
const arry = [
  function(name) {
    console.log(`Hi ${name}`);
  },
];

arry[0]('MK') // Hi MK

1-2. 콜백 함수 (Callback Function)

  • 함수를 명시적으로 호출하는 방식이 아니고
  • 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수
  • e.g. 이벤트 핸들러 처리
<!DOCTYPE html>
<html>
<body>
  <button id="myButton">Click me</button>
  <script>
    var button = document.getElementById('myButton');
    button.addEventListener('click', function() {
      console.log('button clicked!');
    });
  </script>
</body>
</html>
  • 콜백 함수는 매개변수를 통해 전달 -> 전달받은 함수 내에서 어느 특정 시점에 실행
  • 비동기식 처리 모델에 사용
    처리가 종료되면 호출될 콜백함수를 미리 매개변수에 전달하고 처리가 종료되면 콜백함수 호출
  • 콜백 큐에 들어간 후 해당 이벤트가 발생하면 호출

2. 매개변수(Parameter)와 인수(Argument)

2-1. 매개변수

  • 함수를 호출할 때 인자로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수
  • 매개변수를 이용하면 임의의 데이터를 함수 안에 전달할 수 있음
function sayHi(name) { // name이 매개변수
  console.log(`Hi ${name}`); // 이와 같이 함수 내부에 임의의 데이터를 전달
}
  • 매개변수가 있는 함수에 아무런 인자도 전달하지 않으면 기본값은 undefined
  • 매개변수에 할당연산자( = ) 로 기본값을 전달해 줄 수 있음
  • 기본값이 필요한 매개변수는 가급적 오른쪽에 작성
  • 또는 인자로 undefined 를 전달하면 기본값 사용 가능
  • 매개변수의 기본값은 앞쪽에 정의된 매개변수를 사용 가능
    e.g. function func(x, y = x + 3) {...}

2-2. 인수

  • 함수를 호출할 때 매개변수로 전달하는 값
sayHi('MK'); // MK가 인자
  • arguments 객체
    - 함수 내부에서 자동으로 생성
    • 유사 배열 (배열의 메소드 사용 불가)
    • length 프로퍼티, 인덱싱, for...of 문 사용 가능
  • arguments 객체가 존재하므로, 매개변수 이름 또는 함수 내부 변수의 이름을 똑같이 짓는 것을 지양하자

2-3. 나머지 매개변수 (Rest Parameter)

  • 매개변수 이름 앞에 세개의 점 ... 을 붙여 정의한 매개변수
  • 함수에 전달된 인자들의 목록을 배열로 전달받음
function foo(...rest) {
  console.log(Array.isArray(rest)); //true
  console.log(rest); // [1, 3, 5, 7]
}

foo(1, 3, 5, 7);

  • 먼저 선언된 매개변수에 할당된 인자를 제외한 나머지 인자들이 모두 배열에 담겨 할당

  • 따라서 나머지 매개변수는 반드시 마지막 매개변수

  • 함수 객체의 length 프로퍼티에 영향을 주지 않음 (counting 되지 않음)

    3. 화살표 함수 (Arrow function)

  • function 키워드 대신 => 사용하여 함수를 선언

  • 익명 함수로만 사용

1. 매개변수 지정
() => {...} // 매개변수가 없는 경우
x => {...} // 매개변수가 한개일 경우 소괄호 생략 가능
(x, y) => {...} // 매개변수가 두개 이상아면 소괄호 생략 불가

2. 함수 몸체 지정
x => { return x + x } 
x => x + x // 위와 동일, 함수 몸체가 한 줄이라면 중괄호 생략 가능, 암묵적으로 반환

() => ({ name: 'MK'}) // 객체 반환 시 소괄호 사용
           
() => {
  const x = 10;
  return x + x;
} // 함수 몸체가 여러 줄이면 반드시 중괄호로 감싸줌
  • 익명 함수로만 사용할 수 있기 때문에 함수 호출을 위해서 함수 표현식 사용
const add = x => x + x;
console.log(add(3)); // 6
  • 콜백 함수로 사용할 수 있음

4. This

  • this
  • 브라우저에서 JS가 동작한다면 전역객체 window가 this 의 기본값, 서버에서는 global 객체...
  • 함수 호출 방식에 따라 this 에 바인딩 될 객체가 동적으로 결정

4-1. 함수 호출

  • 기본적으로 전역 함수와 내부 함수의 경우 this 는 전역객체에 바인딩 됨
function ex1() {
  console.log(this); // window
  function ex2() {
    console.log(this); // window
  }
  ex2();
}
ex1();
  • 심지어 메소드의 내부 함수, 콜백 함수의 경우에도 window 객체를 바인딩
  • 내부함수는 일반 함수, 메소드, 콜백 함수 가리지 않고 모두 this 가 전역객체를 바인딩

4-2. 메소드 호출

  • 메소드 내부의 this 는 해당 메소드를 호출한 객체에 바인딩 됨
const obj1 = {
  name: 'MK',
  sayName: function () {
    console.log(this.name);
  }
}

const obj2 = {
  name: 'Lee',
}

obj2.sayName = obj1.sayName;

obj1.sayName(); // MK
obj.sayName(); // Lee

4-3. 화살표 함수에서의 this

  • 화살표 함수에서 this 는 함수가 선언되기 직전에 유효한 this 값에 바인딩
const printThis = () => {
  console.log(this);
}

const obj = {
  name: 'MK',
  age: 25,
  printThis: printThis,
}

obj.printThis(); // window
  • 이러한 특징 때문에 메소드를 만들 때는 화살표 함수보다는 일반 함수 사용하는 것이 권장됨

5. 문장(Statement)과 표현식(Expression)

5-1. 문장

  • 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리
let x;
x = 3;

for (let i = 0; i < 3; i++) {
  console.log(i);
}
  • 위의 변수 x 선언, x에 값 할당, for문 전체가 모두 문장

5-2. 표현식

  • 값을 만들어 내는 것
  • 어떤 표현식이든지 결국은 하나의 값으로 귀결됨
5 // 하나의 값을 작성하는 것이든
5 + 5 // 연산자를 이용한 연산식이든

const name = 'MK';
name // MK
// 변수를 호출하거나 객체의 프로퍼티에 접근하는 것 등등 모두
  • 길이와 상관없이 하나의 값으로 귀결되는 코드

5-3. 표현식인 문장 표현식이 아닌 문장

  • 표현식은 보통 문자의 일부로 사용
  • 표현식 자체로 문장인 경우도 있음
  • e.g. 할당식, 함수 호출
// 할당 연산자는 값을 할당하는 동작도 하지만, 할당한 값을 그대로 가지는 표현식이다.
title = 'JavaScript'; // JavaScript

// 함수 호출은 함수를 실행하는 동작도 하지만, 실행한 함수의 리턴 값을 가지는 표현식이다.
sayHi(); // sayHi 함수의 리턴 값

// console.log 메소드는 콘솔에 아규먼트를 출력하는 동작도 하지만, undefined 값을 가지는 표현식이다.
console.log('hi'); // undefined
  • 이 둘을 구분하기 위해 문장을 변수에 할당하거나 함수의 인자로 전달해 볼 수 있음

6. 삼항 연산자(Ternary Operator)

  • 조건 연산자(Conditional Operator) 라고도 함
  • 문법 구조
조건 ? truthy 할 때 표현식 : falsy 할 때 표현식
  • 표현식이므로 조건에 따라 반복문 실행, 변수 선언 등을 할 수 없음
  • 모든 if문을 대체할 수는 없음

7. 스프레드 문법(Spread Syntax)

  • 이터러블 객체를 인수 목록으로 확장해 줌
  • 나머지 매개변수와 같이 ... 사용, 동작은 전혀 다름
  • e.g. 배열에 사용할 경우
let arr = [1, 3, 5];
console.log(...arr); // 1 3 5

let arrCopy = [...arr] // 배열 복사도 가능
  • 배열을 합칠 경우에도 유용하게 사용됨
let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];

let merged = [...arr1, ...arr2];
console.log(merged); // [1, 3, 5, 2, 4, 6]
  • 배열을 객체로 바꾸면...
let names = ['MK', 'SW', 'YG'];
let obj = {...names};
console.log(obj);
// {0: 'MK', 1:'SW', 2:'YG'}
// 배열의 인덱스가 속성이름인 객체가 만들어짐
  • 객체도 스프레드 문법 사용 가능
  • 하지만 새로운 배열을 만들거나 함수의 인자로 사용은 불가

8. 객체의 속성 표기법

객체의 프로퍼티를 간결하고 다양하게 만들 수 있는 방법들이 있음

8-1. 변수에 할당된 값을 활용하여 속성을 만들 때

const name = 'MK';
const age = 25;

const me = {
  name,
  age,
}
  • 속성 값으로 활용할 변수의 이름과 속성 이름이 같다면 : 없이 하나만 작성 가능
  • 함수를 메소드로 만들 때도 축약이 가능

8-2. 메소드를 선언할 때

const me = {
  name: 'MK',
  age: 25,
  about() {
    return `${this.name} is ${this.age}years old.`
  }
}
  • : 과 function 키워드 생략이 가능

8-3. 속성 이름을 표현식으로 나타내기

  • 계산된 속성명(Computed Property Name)
  • 문법 구조
const obj = {
  [표현식]: 값,
}
  • 변수에 담긴 값을 사용하거나 함수의 반환값을 사용할 수 있음

9. 구조 분해(Destructuring)

구조화 된 배열 또는 객체를 분해하여 개별적인 변수에 할당하는 것

9-1. 배열 구조 분해

  • 배열의 각 요소를 배열에서 추출하여 변수 리스트에 할당
  • 배열의 인덱스에 따라 추출, 할당이 됨
const arr = [1, 3, 5];

// 할당 연산자 왼쪽의 값은 변수 리스트 형태
const [one, three, five] = arr;
// 이 때 arr를 초기화자(initializer)라고 한다
// 구조 분해를 할 때 반드시 초기화자를 할당해야 한다

console.log(one, three, five); // 1 3 5
  • 마지막 변수에 ... 를 붙이면 할당되고 남은 요소를 배열로 할당
    [a, b, ...c] = arr;
  • 매개변수처럼 변수에 기본값을 할당할 수 있음
    [a, b, c = 'none'] = arr;
  • 변수에 할당된 값을 교환할 때도 사용
let a = 10;
let b = 20;

[a, b] = [b, a];
console.log(a, b); // 20 10

9-2. 객체 구조 분해

  • 객체의 각 속성을 객체에서 추출하여 변수 리스트에 할당
  • 객체의 속성 이름에 따라 추출, 할당이 됨
const obj = {
  name: 'MK',
  age: 25,
  education: 'none'.
}

// 할당 연산자 왼쪽의 값은 객체 형태의 변수 리스트
const {name, age, education} = obj;
  • 속성 이름과 다른 변수명에 값을 할당할 수도 있음
const {name: firstName, age, education} = obj;
console.log(firstName); // MK

10. 에러(Error)

10-1. 에러 객체

  • 런타임 오류가 발생했을 때 생성
  • 에러 이름을 담고 있는 name 과 구체적인 에러 내용을 담고 있는 message 속성으로 구성
  • 다양한 에러 유형
  • 직접 에러 객체를 만들 수도 있음
const error = new name(message);
e.g. const error = new TypeError('타입 에러');

// 의도적으로 에러를 발생시키기 위해서는 throw 키워드 사용
throw error;

10-2. 에러 다루기

  • 에러가 발생했을 때는 그 순간 프로그램이 종료되고 그 이후 코드가 동작하지 않음
  • 따라서 에러를 적절히 다뤄야 안정적인 프로그램을 만들 수 있음
  • try catch 문 - 예외 처리(Exception Handling)
try {
  동작시킬 코드
} catch (error) {
  에러가 발생했을 때 동작할 코드
}
  • 에러 발생 시 프로그램이 종료되지 않고, catch 문 내의 코드가 동작
  • 물론 try 블록 내 에러가 발생한 부분 이후 코드는 동작하지 않음

++ fially 문

  • 에러 여부와 상관없이 항상 실행할 코드를 작성하는 부분
  • finally 문에서 에러가 나는 것을 핸들링 하기 위해서는
    -> try catch 문을 중첩하여 사용
try {
  try {
   	코드
  } catch {
    코드
  } finally {
    코드
  }
} catch {
  finally에서 에러 발생시 실행할 코드
}

11. 배열 메소드

11-1. forEach

  • 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 함
  • 문법 구조
arr.forEach(function(item, index, array) {
  // 각 요소에 할 무언가
});
  • 매개변수 index 로 요소의 인덱스 관리 가능
  • 매개변수 array 에는 반복적인 배열 자체가 전달
  • 콜백 함수의 최대 반복 횟수는 메소드를 처음 호출할 때 배열 요소의 개수
  • 반복 중에 배열의 길이가 줄어든다면(e.g. 콜백 함수 내 pop 메소드 사용) 반복 횟수도 함께 줄어듦

11-2. map

  • 배열 요소 전체를 대상으로 함수를 호출하고 그 결과를 배열로 반환
  • 문법 구조
let result = arr.map(function(item, index, array) {
  // 요소 대신 새로운 값 반환
});
  • forEach 문은 return 값이 없으므로 변수에 담아 출력하면 undefined => 가장 큰 차이점
  • 반복 횟수는 forEach 문과 동일하게 동작

11-3. filter

  • 배열 요소 중 원하는 조건에 맞는 요소 전체를 담은 배열을 반환
  • 문법 구조
const results = arr.filter(function(item, index, array) {
  // 조건을 충족하는 요소가 results에 순차적으로 추가
  // 조건을 충족하는 요소가 없다면 빈 배열 반환
});

11-4. find

  • 조건에 맞는 객체를 반환
  • filter 메소드와 다르게 함수가 true 를 반환하면 탐색이 중단되고 해당 요소가 반환
  • 문법 구조
const result = arr.find(function(item, index, array) {
  // true 반환 시 반복이 중단, 해당 요소 반환
  // 조건을 충족하는 요소가 없으면 undefined 반환
});

11-5. findIndex

  • 기본적으로 find 메소드와 동일하게 동작
  • 다만, 반환값이 요소가 아닌 요소의 인덱스

11-6. some 과 every

  • 문법 구조
//some: 조건을 만족하는 요소가 1개 이상 있는지
const result = arr.some(function(item, index, array) {
  // 조건
});

                        
// every: 모든 요소가 조건을 만족하는지
const result = arr.every(function(item, index, array) {
  // 조건
});
  • some 메소드는 조건에 맞는 요소를 만나는 순간 true 반환 후 반복 종료
  • every 메소드는 조건에 맞지 않는 요소를 만나는 순간 false 반환 후 반복 종료
  • 빈 배열의 경우 콜백 함수 실행하지 않고 some 은 false 를, every 는 true 를 반환

11-7. reduce 와 reduceRight

  • 문법 구조
let value = arr.redce(function(accumulator, item, index, array) {
  // ...
}, [initial]);
  • 누산기 accumulator : 이전 함수의 호출 결과
  • initial : 함수 최초 호출 시 사용되는 초깃값 (옵션)
  • 누산기에 앞서 호출했던 함수들의 결과가 누적되어 저장되고, 마지막 함수까지 호출되면 누산기의 값이 reduce 메소드의
    반환값이 됨
  • 초깃값이 존재하지 않으면 배열의 첫번째 요소를 초깃값으로 사용하므로 해당 요소로는 함수가 동작하지 않고, 배열이 비어있다면 에러가 발생
  • reduceRight 메소드는 reduce 메소드와 동일한 기능을 하지만 배열의 오른쪽부터 연산을 수행함

11-8. sort 와 reverse

  • sort 는 배열을 정렬할 수 있는 메소드
    arr.sort(argument)
  • 인자를 전달하지 않을 경우 유니코드에 정의된 문자열 순서애 따라 정렬
  • 메소드를 실행하는 원본 배열의 요소를 정렬하므로, 정렬 후에는 되돌릴 수 없음
  • reverse 는 배열의 순서를 뒤집어 주는 메소드
    arr.reverse()
  • 별도의 매개변수 존재하지 않음
  • sort 와 마찬가지로 원본 배열의 순서를 뒤집어 버림

12. Map 과 Set

내용 알아보기

13. 모듈 (Module)

  • 공통된 기능 또는 목적에 따라 각각의 파일로 분리하는 것 => 모듈화 (Modularization)
  • 나누어진 각각의 파일 => 모듈 (Module)
  • HTML 파일에서는 JS 코드의 진입점 역할을 하는 파일 하나만 불러오면 됨
    => 모든 파일이 서로 연결 되어 있으므로

13-1. 모듈 파일의 조건

  • 모듈 파일만의 독립적인 스코프인 '모듈 스코프'를 가짐
  • HTML 파일에서 스크립트를 불러올 때 script 태그의 type 속성을 module로 지정
    <script type='module' src='example.js'></script>

13-2. 모듈 문법

  • 모듈 파일에서 외부로 내보내고 싶은 변수나 함수는 선언문 앞에 export 키워드를 붙여줌
export const num = 10;

export function ex() {
  console.log('JS');
}
  • 모듈 파일에서 export 된 변수나 함수를 다른 파일에서 불러 오려면 import 키워드 사용
import { 불러올 변수, 불러올 함수, ... } from '모듈 파일 상대 경로';
  • 이 때 불러올 변수 또는 함수 뒤 as 키워드를 붙이고 이름을 바꿔줄 수 있음
    import { sayHi as printHi } from '모듈 파일 상대 경로';

13-3. import, export 대상 한꺼번에 다루기

  • 모듈 파일에서 export 하는 모든 대상을 불러올 수도 있음

  • * : 와일드카드 문자 (Wildcard Character)
    import * as 불러 올 이름 from '모듈 파일 상대 경로';

  • 이 때 불러온 대상을 사용할 때는 불러올 이름.변수(함수) 와 같이 객체 형식으로

  • export 할 때도 코드를 한꺼번에 다룰 수 있음
    export { 내보낼 대상 [as ~ : 옵션], ... } ;

  • 위와 같이 작성하면 일일이 export 키워드를 붙이지 않아도 됨

13-4. Default Export

Default Export vs. Named Export

내일의 나는 무엇을 해야할까?

  • 자바스크립트 객체 지향 기본기 강의 수강
  • 코드 리뷰 내용 확인, 수정 사항 일부 반영
profile
Minkyu Shin
개발자를 지망하는 경영학도
이전 포스트

[TIL] 23.04.09

다음 포스트

[TIL] 23.04.11

0개의 댓글