자바스크립트 개념 정리 2

어젠 토요일이었구 할머니댁도 다녀와서 그냥 잤는데

오늘은 잠도 푹 잤겠다 어제 못했던 공부를 이어서 해보려고 한다! ^,.^

5.

함수 : 코드의 집합을 나타내는 자료형

 

☑️ 함수 호출 : 함수를 사용하는 것

☑️ 매개 변수 : 함수를 호출할 때 괄호 내부에 넣는 자료

☑️ 리턴값 : 함수를 호출해서 최종적으로 나오는 결과

 

---

 

☑️ 익명 함수 : 이름이 붙어있지 않는 함수

const 함수 = function () {}

호출 -> 함수()

 

 

☑️ 선언적 함수 : 이름이 있는 함수 (일반적으로 많이 사용)

function 함수() { }

 

 

⬇️ 익명 함수와 선언적 함수 차이

익명 함수

순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성된다.

 

선언적 함수

순차적인 코드 실행이 일어나기 전에 생성된다.

따라서 같은 블록이라면 어디에서 함수를 호출해도 상관없다.

 

= 최근에는 익명 함수를 선호하고, 익명 함수가 안전한 편이다.

 

☑️ 나머지 매개변수  : 여러 개의 숫자를 매개변수로 넣어 실행하고 싶을 때

function 함수 이름(...나머지 매개변수) {}

가변 매개 함수 : 호출시 매개변수의 개수가 고정적이지 않은 함수 (나머지 매개변수 사용)

 

⬇️ 나머지 매개변수와 일반 매개변수 조합

function 함수명 (매개변수, 매개변수, ...매개변수) {}

 

☑️ 배열인지 확인하기

Array.isArray() 메소드 사용

일반적인 typeof 연산자로는 배열을 확인할 수 없음

 

☑️ 전개 연산자 : 배열을 함수의 매개변수로써 전개하고 싶을 때 사용

함수명 (...배열)

배열을 전개해서 함수의 매개변수로 전달해줌

전개 연산자 사용 -> [1, 2, 3, 4]
전개 연산자 사용x -> [Array(4)]


* 전개 연산자가 없던 시절엔 apply 함수 사용

 

☑️ 기본 매개변수

함수명 (매개변수, 매개변수 = 기본값, 매개변수 = 기본값)

매개변수에 기본값 지정

---

☑️ 콜백 함수 : 매개변수로 전달하는 함수

* 매개변수를 통해 함수를 받고 그 함수를 통해 결과값을 호출한다.

 

⬇️ 콜백 함수를 활용하는 함수

 

⬇️ forEach() : 배열 내부의 요소 사용해 콜백 함수 호출

numbers.forEach(function (value, index, array) {
  console.log(`${index}번째 요소 : ${value}`)
}


*
cards.forEach((a) => { ... }) : 화살표 함수 방식

 

⬇️ map() : 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만듦

map(function (value, index, array) { } )

** 콜백 함수에 매개변수는 value만, value & index만 사용하는 경우가 많음
모두 입력할 필요 없음

 

⬇️ filter() : 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만듦

filter (function (value) { }

* index, array 생략한 것

 

 

☑️ 화살표 함수 : 단순한 형태의 콜백 함수를 쉽게 입력하고자 사용

(매개변수) => { }

&

(매개변수) => 리턴값

function 키워드 대신 화살표 사용

 

☑️ 메소드 체이닝 

numbers
  .filter((value) => value % 2 === 0)
  .map ((value) => value * value)
  .forEach ((value) => {
    console.log(value)
  })
  
  어떤 메소드가 리턴하는 값을 기반으로 해서 함수를 줄줄이 사용하는 것

 

☑️ 타이머 함수

setTimeout(함수, 시간) -> 특정 시간 후에 함수를 한 번 호출

setInterval(함수, 시간) -> 특정 시간마다 함수 호출

clearTimeout(타이머_id) -> setTiemout 함수로 설정한 타이머 제거

clearInterval(타이머_id) -> setInterval 함수로 설정한 타이머 제거

 

☑️ 즉시 호출 함수

(function () {}) ()

즉시 호출 함수를 사용해 변수 이름 충돌 문제를 해결한다.

 

☑️ 엄격 모드

'use strict'
문장
문장

자바스크립트는 이러한 문자열을 읽어들인 순간부터
코드를 엄격하게 검사한다.

---

6.

객체

 

☑️ 객체 : '실제로 존재하는 사물', 이름: 값으로 구성된 (속성)을 가진 자바스크립트의 기본 데이터 타입

 

⬇️ 객체의 요소에 접근

product['제품명']

&

product.제품명

 

⬇️ 속성, 메소드 구분

요소 : 배열 내부의 값

속성 : 객체 내부의 값

메소드 : 객체 속성 중 함수 자료형인 속성
* 화살표 함수는 메소드로 사용하지 않음 (window 객체 출력)

window 객체 : 웹 브라우저 자체를 나타내는 웹 브라우저에서 실행하는 자바스크립트의 핵심 객체

 

⬇️ 메소드 내부에서 this 키워드

메소드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는
자신이 가진 속성임을 분명하게 표시해야
= this 사용

 

⬇️ 동적으로 객체 속성 추가 / 제거

동적으로 객체 속성 추가
-> JSON.stringfy()

동적으로 객체 속성 제거
-> delete 객체.속성

 

⬇️ 메소드 간단 선언 구문

const pet = {
 name: '구름',
 eat (food) {
   alert(this.name + '은/는' + food + '을/를 먹습니다.')
   }
 }
 
 pet.eat('밥')
 => 구름이는 밥을 먹습니다.

---

자료

 

☑️ 기본 자료형

숫자, 문자열, 불 

객체가 아니므로 속성을 가질 수 없음

 

⬇️ 기본 자료형을 객체로 선언하기

const 객체 = new 객체 자료형 이름 ()

이 방법으로 숫자, 문자열, 불 객체 생성 가능

 

⬇️ 기본 자료형의 일시적 승급

문자열 자료형 등을 생성하고 뒤에 온점을 찍으면
자동 완성 기능으로 메소드들이 나오는데

이것은 사용의 편리성을 위해서 기본 자료형의 속성과 메소드를 호출할 때
일시적으로 기본 자료형을 객체로 승급시키는 것.
= 즉, 일시적이다.

따라서 기본 자료형은 속성과 메소드들을 사용할 수는 있지만, 추가로 가질 수는 없다.

 

⬇️  프로토타입으로 메소드 추가

객체 자료형 이름.prototype.메소드 이름 = function () { }

ex. Number.prototype.sample = 10

const i = 273

i.sample = 10


어떤 객체의 prototype이라는 속성은 객체 전용 틀이라고 할 수 있음
=  이 prototype 객체에 속성, 메소드를 추가하면 모든 객체 & 기본 자료형에서 해당 속성과 메소드 사용 가능

 

☑️ 객체 자료형

속성과 메소드를 가질 수 있는 모든 것
ex. 함수, 배열 등

자바스크립트에서 함수는 객체의 특성을 완벽하게 가지고 있으므로 일급객체에 속한다고 표현하기도 함

 

☑️ indexOf

문자열.indexOf(문자열) >=0

등의 코드를 사용하면 문자열 내부에 어떤 문자열이 포함되어 있는지
불 형태로 얻을 수 있음

 

 

☑️ Number 객체

 

⬇️ 숫자 N번째 자릿수까지 출력하기 : toFixed()

toFixed()
괄호 -> 소수점 이하 몇 자리까지 출력할 건지

 

⬇️ NaN, infinity 확인하기

NaN
-> Number.isNaN()

infinty
-> Number.isFinite()

 

☑️ String 객체

 

⬇️ 문자열 양쪽 끝 공백 없애기 : trim()

stringA.trim()

 

⬇️ 문자열 특정 기호로 자르기 : split()

line.split(',')

괄호 안은 무엇으로 자를 건지

 

 

☑️JSON 객체

기본 자료형과 관련된 객체 외 자바스크립트가 기본적으로 제공하는 내장 객체

자바스크립트의 객체처럼 자료를 표현하는 방식 (데이터를 담는 방법 중 하나)

추가 규칙
1. 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있다
2. 문자열은 반드시 큰 따옴표로 만들어야 한다
3. 키에도 반드시 따옴표를 붙여야 한다

 

 

☑️ Math 객체

 

⬇️ 랜덤한 숫자 만들기 : random()

Math.random()

 

 

---

 

☑️ 배열 기반 다중 할당

한 번에 여러 변수에 값을 할당

[식별자, 식별자, 식별자] = 배열

ex. let [a, b] = [1, 2]

 

 

☑️ 객체 기반 다중 할당

객체 내부에 있는 속성을 꺼내 변수로 할당할 때
{ 속성 이름, 속성 이름 } = 객체

{ 식별자 = 속성 이름, 식별자 = 속성 이름 } = 객체

ex. const {name, price} = object -> object 에서 name, price 속성 이름 그대로 꺼내기

const {a=name, b=price} = object -> 다른 이름으로 속성 꺼내기

 

 

☑️ 배열 전개 연산자

배열과 객체는 할당할 때 얕은 복사가 이루어짐
얕은 복사 : 복사하면 이름만 다르고 같은 값이 나오는 것

깊은 복사 : 완전히 독립적으로 작동하는 것


깊은 복사로 만드는 방법은
[...배열]
= 전개 연산자를 사용해 입력하면 완전히 독립적으로 작동함

위와 같이 복사하고 뒤에 자료를 추가하는 코드도 많이 사용되는데
[...배열, 자료, 자료]
와 같이 쓰면 된다

 

☑️ 객체 전개 연산자

{...객체}

{...객체, 자료, 자료}

위와 같다

 

https://youtu.be/1ID6pfTViXo?si=NlYtCH3fudWcv5HE