[회고] _ JavaScript

망구씨·2023년 3월 8일
JavaScript회고
0

회고

목록 보기
3/6
post-thumbnail

베이스캠프 마지막 주!
한주를 마무리하며 어렵고도 무서운(?) 자바스크립트 정리 📚
아빠랑 친구들한테 많이 징징거렸는디 응원해줘서 힘낼 수 있었다. 💪🏻
앞으로도 징징대야지 후후

✔️ What I Learned

JavaScript

1. 변수

변수와 상수를 만들어 데이터를 어딘가에 저장, 출력하여 정제가 가능하도록 한다.
변수와 상수 만들기

  1. 선언 (var, let, const를 사용하여 변수의 이름을 알려준다.)
    let result
//let이라는 키워드를 이용해 result 라는 변수를 생성했습니다.
  2. 할당 (선언한 변수에 데이터를 담아준다.)
    result = 10+20
//result라는 변수에 10+20 라는 데이터가 담겼습니다.
  3. 선언과 할당을 동시에 하기
          선언 + 할당
let result = 10+20
      선언부   할당부

❗️ 예약어는 자바스크립트 내에서 의미를 가진 단어이기 때문에 변수로 선언하지 못한다❗️

2. 배열 (Array)

  • 순서가 존재하는 여러개의 데이터를 담아두는 창고. 여러개의 데이터를 순서와 함께 저장하는 창고이다.
  • 배열을 만들때는 대괄호:[ ]를 이용하기
    let ranking = ["성해", "성훈", "성미"]

위의 예시는 랭킹이라는 배열을 만든 것! 여러개의 데이터를 묶음으로 관리하는 것이 배열이다.

  • 배열에 속해있는 하나하나를 요소 라고 한다.
  • 배열도 배열의 요소가 될 수 있다.
  • 각 요소는 index라는 위치값을 의미하는 숫자를 가진다. 항상 0부터 시작이라서 위 예시에서 0번째는 성해, 1번째는 성훈, 3번째는 성미
  • ranking[0] => ‘성해’ 출력 가능.

1) 배열의 property

배열은 고유한 속성을 가지고 있으며 이 속성을 텅하여 길이를 구하거나, 내장된 함수를 이용해 배열을 확장할 수 있다.

array.length
이름에서도 알 수 있듯, 배열의 길이를 나타내는 속성이다. 배열의 길이는 배열 내 요소의 개수를 알려주는 역할로, 해당 배열의 요소 개수가 궁금하면 array.length를 이용하면 됨!

let arr = ["안녕","나는","윤성해","라고","해요"]
// index     0      1     2     3     4
// length    1      2     3     4     5   ->  따라서 arr.length = 5

❗️index 와는 다르게 length는 요소를 1번 부터 카운팅

2) 배열의 Method(메서드)

배열에 내장되어있는 기능! 굉장히 다양하기 때문에 [MDN] 참고하기!

  • array.push() : 배열의 가장 뒤의 데이터를 추가

    let ranking = ["성해","성훈","성미"]
ranking.push("성효")

// 결과
ranking = ["성해","성훈","성미","성효"]

  • array.pop() : 배열의 가장 뒤의 데이터를 삭제 - push와는 다르게 pop의 괄호 안에는 데이터를 넣지 않아도 맨 뒤에 데이터가 삭제된다.

    let ranking = ["성해","성훈","성미"]
ranking.pop()

// 결과
ranking = ["성해","성훈"]

  • array.includes() : 특정 배열에 주어진 데이터가 포함되어있는지 확인 -> boolean값을 반환 (true/false)

    let ranking = ["성해","성훈","성미"]
ranking.includes("성해")

// 결과
true

  • array.indexOf() : 특정 배열에서 주어진 데이터의 인덱스 값을 찾아 반환.(숫자로)
    찾을 수 없다면 -1을 반환한다!

    let ranking = ["성해","성훈","성미"]
ranking.indexOf("성훈")

// 결과
1

3. 객체(object)

let userData = {
	name:"윤성해",
	age:30,
	height:162,
	company:"코드캠프"
}

중괄호 안에 원하는 데이터를 모아서 넣어주면 객체를 만들 수 있고, 객체 안의 데이터들 하나하나를 프로퍼티(property) 라고 합니다. 키와 밸류는 : 로 나누어져 있으며 , 로 구분된다.

key, value를 묶은 것을 property라고 한다.

  • 객체의 프로퍼티에는 기본적으로 key값에 접근하여 value를 가지고 온다. 이 때 두가지 방법이 있다.

  1. Dot notation(점 표기법) - key값에 접근시, 점을 이용해서 접근

    let userData = {
	name:"윤성해",
	age:30,
	height:162,
	company:"코드캠프"
}

//Dot notation(점 표기법) 접근
userData.name = "윤성해"
userData.age = 30

❗️하나더!! 
userData.email = "tjdgozzzzz@gmail.com" -> 입력하면 오브젝트에 추가됨!!

  2. Bracket notation(괄호 표기법) - key값에 접근시, 괄호[]를 이용해서 접근 

    let userData = {
	name:"윤성해",
	age:30,
	height:162,
	company:"코드캠프"
}

//Dot notation(점 표기법) 접근
userDat["name"] = "윤성해"
userData["age"] = 30

❗️하나더!! 
userData["email"] = "tjdgozzzzz@gmail.com" -> 입력하면 오브젝트에 추가됨!!

🚫 주의
Bracket notation을 사용할 때 " " 를 붙여주지 않으면, 안의 key값이 아닌 변수로 인식되므로 반드시 " " 붙여주기!!

1) 객체(object) Method

더 많음. MDN 찾아보기!

  • Object.keys()
    주어진 객체의 key만을 가져와 배열에 담아주는 메서드. 괄호 안에 key를 가져올 객체의 이름을 넣어주면 됩니다.

    let userData = {
	name:"윤성해",
	age:30,
	height:162,
	company:"코드캠프"
}

Object.keys(userData)
// 결과 
[ "name", "age", "hight", "company"]

  • Object.values()
    주어진 객체의 value만을 가져와 배열에 담아주는 메서드. 괄호 안에 value를 가져올 객체의 이름을 넣어주면 됩니다.

    let userData = {
	name:"윤성해",
	age:30,
	height:162,
	company:"코드캠프"
}

Object.values(userData)
// 결과 
[ "윤성해", 30, 162, "코드캠프"]

4. querySelector

querySelector를 사용하면 자바스크립트 내에서 html 요소를 참조할 수 있다. 태그 자체를 참조할 수도, input 태그와 같이 그 값이 입력 가능한 태그라면 해당 데이터도 참조해올 수 있다.

div태그를 그대로 입력해서 참조해 올 수 있지만, 너무 많은 태그가 중복되기 때문에 이러한 경우 id, class로 태그를 특정해 주어야 하는데, id는 "#", class는 "." 을 querySelector()의 소괄호 안에 입력해준다.
MDN 참고

5. New date

자바스크립트에서의 날짜 데이터는 일종의 객체로 관리된다.
그리고 그 날짜 데이터는 new Date를 사용해서 가져올 수 있음!

new Date()
new Date("2022-09-09")

( )를 비우면 사용자의 컴퓨터 시간을 기준으로 현재 날짜, 시간을 모두 구해올 수 있으며, 아래 코드처럼 괄호 안에 날짜의 형태를 갖추어 주면 특정 날짜의 데이터를 받아올 수 있다.

6. 함수의 리턴(return)

리턴의 용도는 두가지가 있다.

  1. 내부에 존재하는 데이터, 연산의 결과를 return 이라고 하는 명령어를 사용하여 외부로 건네주기. return 은 바로 뒤에 오는 데이터를 함수를 호출했던 위치로 전달해준다.

    어떠한 함수가 리턴해주는 데이터를 지정해 두었다면,

    위 이미지와 같이 해당 반환값을 특정 변수에 담아줄 수도 있다. 함수를 호출했던 위치로 리턴되는 데이터가 전달되기 때문.

  2. 함수가 실행되는 와중에 return 명령어를 만나게 되면 해당 함수를 종료시켜 버리는 것

    때문에 위 이미지의 console.log()는 실행될 수 없는 코드 입니다.

7. 함수 선언 종류 (선언식, 표현식, 화살표함수)

  1. 함수 선언식

    function 함수이름(param1, param2, ...){
    // ...code here
    return 결과값
}

  2. 함수 표현식

    const 함수이름 = function(param1, param2, ...){
	// ...code here
	return 결과값
}

변수에 할당된 함수는 함수 선언식과 어딘가 비슷하게 생겼지만 어딘가 달라보이는 저 함수는 익명함수라고 부른다. 함수 표현식의 익명함수는 호이스팅의 영향을 받지 않으므로, 표현식으로 사용하기.

  1. 화살표 함수
    const 함수이름 = ( param1, param2, ... )=>{
    // ...code here
    return 결과값
}

매개변수, 리턴값은 필수가 아니다. 상황에 따라 적기

8. 원시 타입과 참조 타입

  1. 원시 타입의 종류
    원시 타입은 불변성 이라는 특징을 가진다. 불변성이란 변하지 않는 속성이라는 뜻이고 말 그대로 데이터가 변하지 않는다.
    • String
    • Number
    • Boolean
    • Bigint
    • undefined
    • Symbol
    • null

  1. 참조 타입의 종류
    참조 타입은 원시타입과 반대로 가변성을 가지고 있다. 원시타입과는 반대로 데이터를 수정할 수 있다!
    쉽게 생각해서 객체의 껍데기 를 주머니, 객체의 안에 있는 데이터(property)들 을 공 이라고 하면

    주머니는 바꿀 수 없지만 , 주머니 안의 공은 바꿀 수 있으며 심지어 삭제와 추가도 가능

    • 원시 타입을 제외한 모든 나머지. 객체타입으로 봐도 무방

9. 반복문

가장 흔하게 사용되는 반복문으로는 for,while문이 있다.

for문 : 우리가 원하는 결과값을 받아올 때까지 몇번의 반복이 필요한지, 혹은 우리가 반복적인 로직을 수행해야 하는 횟수, 데이터의 갯수가 명확할 때 사용하기 좋은 반복문
while문 : 우리가 원하는 결과값을 받아올 때까지 몇번의 반복을 진행해야 하는지 그 횟수가 명확하지 않을 때 유용하게 사용할 수 있는 반복문!

1) for 문

 for( let i = 0; i < 10; i = i + 1) {
    console.log(i)
}

2) while 문

let i = 0;
while( i < 10 ) {
    console.log(i)
    i = i + 1
}

최초식 : let i = 0
조건식 : i < 10
증감식 : i = i + 1 (i++ 로도 쓸 수 있음)
❗️while문 에서는 종료조건을 제대로 설정하지 않으면 무한 반복이 되므로, 조심하기!

3) for-of

배열에 주로 사용. 반복문을 통해 요소에 접근하려면 인덱스값으로 접근해야함

const arr = [1, 2, 3, 4, 5]

for(let el of arr) {
    console.log(el)
}

for-of문은 위와 같이 작성하며, 코드를 실행해보면 el 이라는 이름으로 arr의 각 요소가 들어오는 것을 확인할 수 있다.

4) for-in

객체에서 주로 사용. 

const obj = {
    name : "otter",
    gender : "male"
}

for(let key in obj) {
    console.log(key)
}

위 코드를 실행해보면 obj 객체 프로퍼티들의 키가 담겨져 오는 것을 확인할 수 있다.

10. setInterval, clearInterval

clearInterval() 함수는 setInterval() 함수를 통해 생성된 interval을 종료해주는 함수입니다.
setInterval 함수는 실행될 때마다 고유의 id 값을 반환합니다.
해당 아이디를 체크해서 clearInterval() 함수를 실행할 때, 그 아이디를 소괄호 안에 넣고 실행해주면 반복 실행하던 interval이 종료됩니다.

11. 매개변수(Parameter), 전달인자(Argument)

자바스크립트의 함수, 변수 는 정의되어 있는 영역 안에서만 존재한다. 그렇기 때문에 함수 안에서 선언된 변수는 그 밖에서 참조될 수가 없다.

위 사진의 confined 변수는 박스로 감싸진 해당 영역 내부에 속해 있기 때문에
박스 바깥에서 confined 변수를 참조하고 있는 console.log() 명령어는 해당 변수에 접근이 불가능하다. 그래서 우리는 함수 내부에 존재하는 데이터를 return을 통해서 그 밖으로 건네줄 수가 있다!

1) 매개변수 (Parameter)

함수의 정의 부분에 나열되는 변수들을 의미한다. 지역변수로서 해당 함수 내부에서만 존재한다. 하나의 변수이기 때문에 그안에 담긴 데이터를 참조할 수도 있다.

2) 전달인자(Argument)

함수를 호출 할 때 전달되는 실제 값을 의미한다.

function test(a,b) {
    return a + b
} 

test(2,3);

위 코드에서 함수를 선언할 때 (a,b)의 a,b가 매개변수(parameter)이다.
또한, 함수를 호출할 때의 (2,3)이 변수에 들어가는 값이며 인수(arguments) 라고 한다.
(출처 - 모던 자바스크립트 Deep dive)

정리하자면, 위 이미지에서 x와 y는 매개변수(Parameter, 인자)에 해당하며 함수의 정의에서 사용되는 변수이다. 그리고 add(2, 5)에서 2와 5를 전달인자(argument, 인수) 라고 부르며 파라미터에 할당되는 값을 말한다.

12. 브라우저의 Web Storage

웹 브라우저에서 어떠한 로직에 활용되는 데이터를 유지시키고자 한다면, 해당 데이터를 저장할 공간이 필요합니다. 웹 브라우저는 Web Storage라고 하는 저장소를 제공 하는데, seesionStorage 와 localStorage 를 활용할 수 있습니다.

  1. sessionStorage
    sesstionStorage는 데이터를 세션 단위로 저장합니다.
    sessionStorage는 해당 페이지와 접속이 끊어지거나 브라우저를 종료하게 되면 해당하는 세션 저장소의 데이터를 영구히 삭제 해 버립니다. 휘발성 메모리인 것!

  2. localStorage
    localStorage는 데이터를 도메인 단위로 저장 하며, localStorage는 비휘발성 메모리이기 때문에 저장된 데이터가 브라우저, pc를 종료하더라도 그대로 남아있게 됨.

  3. localStorage.setItem()
    데이터를 저장할 때는 localStorage에 내장되어 있는 setItem이라는 메서드 를 사용한다.
    setItem 뒤에 있는 소괄호 소괄호 안에 두개의 인자를 넣어주면 되는데, 첫번째 인자로 key 를, 두번째 인자로 value, 저장할 데이터를 담아주면 된다.

    localStorage.setItem('data-key', 'data-value')
![](https://velog.velcdn.com/images/seonghae/post/7869e9b3-2c41-4d67-9cb8-34ef7a812557/image.png)

    저장된 데이터를 확인하고 참조하는 방법은,

    개발자 도구 ⇒ Application 탭 ⇒ >Local Storage 토글

  • localStorage.getItem()
    localStorage에 저장된 데이터를 JavaScript에서 활용하기 위해서는 데이터를 꺼내야 한다.
    소괄호 안에는 꺼내오고자 하는 데이터의 key를 적어주면 됨!
    localStorage.getItem(’data-key’)

13. DOM

JavaScript로 HTML 문서를 조작 할 수 있는데,
document라고 하는 객체를 참조해와서 내부의 HTML 요소들을 참조하는 방식으로 그 문서의 내용을 조작했었다. 그런데 사실 우리는 HTML 요소들을 직접적으로 조작했던 것이 아니라 DOM Element 를 조작했던 것이다!

브라우저는 HTML 문서를 파싱하는 과정에서 DOM이라는 트리구조 형태의 객체를 생성하게 된다. 트리 구조란, 자료구조의 일종으로 여러개의 노드로 구성되어 있으며 하나의 부모가 여러개의 자식 노드를 가지게 되는 형태를 이야기한다.
DOM 트리 구조는 간단하게 표현하자면 아래와 같고, 각 요소들은 노드(Node) 라는 이름으로 불리우게 됩니다.


Parent node 각 node의 바로 상위 node
Child node 각 node의 바로 하위 node
leaf node 트리 구조 최하위의 child node가 없는 node

dom 관련 다양한 메소드 (더많음)

14. window.event

event
자바스크립트에서 window.event를 통해 window 객체 내의 event 속성으로 접근할 수 있다.
여기서 window 객체는 현재의 DOM 문서를 담고 있는 창을 가리키며, window 객체 내부에는 기본적으로 내장되어 있는 함수, 변수, 객체 등이 존재 한다. 그리고 그 속성 중에는 event 속성이 존재함.

Event란, DOM 내에서 발생하는 이벤트를 의미하며,
키보드 버튼을 누르거나 마우스를 클릭 하는 등, 사용자가 취하는 액션 을 말한다.
이 event 속성을 활용해 사용자의 행동에 따른 결과값을 만들어 낼 수 있다!
예를 들어 사용자가 inputbox에 이름을 적고 엔터 버튼을 눌렀을 때 어떠한 함수를 실행하도록 하고 싶다면, 아래와 같은 코드를 작성할 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script>
      const printName = function () {
        const inputValue = document.querySelector('#name-input-box');
        if (window.event.keyCode === 13) {
          console.log(inputValue.value);
        }
      };
    </script>
  </head>
  <body>
    <input id="name-input-box" onKeydown="printName()" />
  </body>
</html>

15. 전역 스코프(Global scope), 지역 스코프(Local scope)

x는 지역 스코프에서 참조될 수 있고, y는 전역 스코프에서 참조될 수 없음. 지역 스코프를 생성하는 종류는 함수 레벨 스코프와 블록 레벨 스코프가 있다.

15. API

API란, 어떠한 프로그램에서 제공하는 기능을 사용자가 활용할 수 있도록 만들어 둔 인터페이스이다.

  • geolocation은 현재 사용자의 위치값을 얻어올 수 있는 API!
    MDN

16. 동기, 비동기

1) 동기

하나의 작업이 종료될 때까지 다음 동작은 대기하는 실행 방식을 의미

2) 비동기

하나의 작업이 진행됨과 동시에 또 다른 작업도 함께 진행되는 실행 방식을 의미

  • JavaScript는 한번에 하나의 기능만을 수행하는 싱글 스레드이기 때문에 동기적으로 동작한다다. 그런데 아래의 코드를 실행시켜보면, 1과 3이 먼저 출력되고 2초 후에 2가 출력된다.

    분명 자바스크립트는 싱글 스레드이기 때문에 한번에 하나의 작업만 가능할텐데 어떻게 setTimeout 함수의 실행을 건너뛰어서 3이 먼저 출력될 수 있었을까?

    console.log("1")

setTimeout(() => {
    console.log("2")
}, 2000)

console.log("3")

    JavaScript의 실행 환경 내부에는 call stack과 callback queue라고 하는 영역이 존재한다.

3) stack

나중에 들어온 데이터가 먼저 실행

4) queue

먼저 들어온 데이터가 먼저 실행(들어온 순서대로)

정리
자바스크립트에서는
1. 먼저 기본적인 함수들은 모두 call stack에 쌓이게 됨.
2. 그리고 비동기 함수(Web APIs 포함)들은 모두 callback queue에 쌓이게 됨.
3. call stack에 쌓인 기본 함수들은 먼저 담긴 함수들이 위에 쌓인 함수들의 종료를 기다림
4. callback queue에 쌓인 비동기 함수들은 call stack이 비워져 있다면, 그 때 call stack으로 하나씩 옮겨짐.

5) 비동기 처리해주기

자바스크립트는 싱글 스레드이기 때문에 한번에 하나의 동작만 수행할 수 있습니다. (동기적으로 동작)
이러한 한계점을 해결, 비동기 작업을 수행하기 위해 가장 먼저 나온 해결책은 callback 함수를 활용하는 것이었다. 하지만 callback 함수가 여러번 중첩되는 경우 가독성에서 심각한 손해를 보게 되는 콜백 지옥(callback hell)을 만나게 되는 문제가 있었다.

이러한 문제점을 해결해주는 다양한 방법들
Promise : 현재는 얻을 수 없지만 추후 작업이 완료되면 받아올 수 있는 데이터에 대한 접근 수단의 역할

then(),fetch() : Javascript ES6 문법인 fetch()를 사용해주면 JavaScript에서 바로 통신을 수행할 수 있습니다.

const communicationResult = fetch(HTTP Request)
console.log(communicationResult)

하지만 위와 같이 작성하면 정상적인 응답을 받지 못한다는 것을 확인할 수 있고 그 응답이 돌아올 때 까지 기다려 주어야 하는데, 이때 then() 메서드를 사용할 수 있다.

catch() : 만약 통신에서 문제가 생기거나 then() 메서드 내에서 로직을 수행하다가 에러를 만난다면, catch() 메서드로 그 분기를 나눠줄 수 있다.
❗️해당함수의 매개변수르 error값을 받아올 수도 있음!!

17. 구조분해할당

구조분해할당이란, 구조화 되어 있는 배열, 객체와 같은 데이터를 분해하여 각각의 변수에 다시 할당하는 것을 이야기한다.
구조분해할당을 사용하면 효율적으로 데이터를 복사할 수도 있다.

const arr = [ 1, 2, 3, 4, 5 ];

let one = arr[0];
let two = arr[1];

---------------------------------------------

const obj = {
	name: "otter",
	gender: "male"
}

let userName = obj.name;
let userGender = obj.gender;

위의 코드처럼 작성한다면, 각각의 값을 따로 담아서 관리해줄 수가 있지만,
관리할 데이터가 여러개인 경우 각각의 데이터를 모두 변수로 선언해 주어야 하기 때문에 굉장히 비효율적임. 이런 경우 우리는 구조분해할당을 사용할 수 있다!

  • 배열 구조분해할당
    배열을 구조 분해 할당할 때에는

    1. 먼저 선언 키워드를 적은 후
    2. 변수명이 위치하는 자리에 변수명을 모아 둔 배열을 넣고
    3. 데이터가 담긴 배열을 할당하면 된다.
      아래와 같이 코드를 작성하면
    const arr = [ 1, 2, 3, 4, 5 ];
let [ one, two ] = arr; **// 배열의 구조분해할당**

    배열을 한번 분해해서, one과 two라고 하는 새로운 변수에 담아 주는 것

    const arr = [ 1, 2, 3, 4, 5 ];

let [ one, two ] = arr;

console.log(one); // 1
console.log(two); // 2

    이후 one과 two 변수를 참조해 보면, 배열 arr의 가장 앞의 요소부터 차례대로 숫자 1과 2가 담겨져 있는 것을 확인할 수 있다.

  • 객체 구조분해할당
    객체를 구조분해할당 하는 방법은 조금 다름!

    const obj = {
	name: "otter",
	gender: "male"
}

let { name, gender } = obj

    위의 코드처럼 작성해주면 객체 obj의 구조분해할당이 완료된다.

    1. 선언 키워드를 먼저 적고
    2. 대괄호가 아닌 중괄호를 입력해서 구조분해할당 수행한다.
    let {}
  1. 배열과 같이 중괄호 안에 담기는 명칭들이 변수명이 되는데, 객체의 경우 실제로 obj 객체 안에 존재하고 있는 property의 key를 적어 주어야 그에 대응하는 value들을 해당 변수에 담아주게 된다.
    let { name, gender }
  2. 뒤에는 할당 연산자를 적어주신 후에 구조분해할당 해주고자 하는 객체를 적어주기
    let { name, gender } = obj

❗️만약 해당 데이터를 실제로 존재하는 key가 아닌 별도의 변수명으로 관리하고 싶다면 아래와 같이 입력하면 됨.

let { name: a, gender: b } = obj

18. 스프레드연산자

스프레드 연산자는 하나로 뭉쳐져 있는 값들의 집합을 전개해주는 연산자이다. 전개하고 싶은 배열의 이름 앞에 ...을 붙이는 것으로 사용할 수 있음

const arr = [ 1, 2, 3, 4, 5 ];
console.log(...arr) // 1, 2, 3, 4, 5

19. 얕은 복사 (shallow copy)

spread 연산자를 사용하면 값의 복사를 수행할 수도 있다.

const arr = [ 1, 2, 3, 4, 5 ];
const newArr = [ ...arr ];
  1. arr이라는 배열을 스프레드 연산자를 사용해서 펼쳐준 뒤
  2. 새로운 대괄호로 감싸서 전혀 다른 배열을 하나 생성한 것.
    *이렇게 하면 기존에 arr 배열이 가지고 있던 주소값과 전혀 다른 별개의 새로운 배열이 newArr이라는 변수에 담기게 된다. (참조 타입 값의 복사 성공) 배열 뿐만 아니라 객체도 spread 연산자를 사용한다면 복사가 가능
const obj = {
	name: "otter",
	gender: "male"
}

const newObj = { ...obj }
  1. 객체를 한번 펼쳐준 뒤
  2. 새로운 중괄호로 감싸서 전혀 다른 객체를 하나 생성한 것.
    *이렇게 하면 기존에 obj객체가 가지고 있던 주소값과 전혀 다른 별개의 새로운 객체가 newObj이라는 변수에 담기게 됨

❗️하지만, 얕은복사는 중첩객체까지는 제대로 복사가 되지 않는다.

20. 깊은 복사 (deep copy)

자바스크립트의 실행 환경은 call stack, callback queue 외에도 다양한 영역이 있는데, 그 중에서 heap이라는 영역이 있다. 우리가 아는 참조 타입의 데이터는 heap이라는 임시 저장 메모리에 담기게 된다.

그리고 이 heap이라는 영역은 참조 타입 데이터와 같이 그 데이터의 크기가 유동적으로 변할 수 있다는 특징을 가지고 있다.

그리고 우리가 중첩 객체를 스프레드 연산자로 복사했을 때의 문제점도 이 개념에서 찾아볼 수 있다!!

이러한 문제를 해결하기 위해 JSON.stringify()와 JSON.parse()를 사용할 수 있다. JSON.stringify()는 소괄호 안에 들어가는 값을 JSON 데이터 포맷으로 변환해준다.

JSON?
Javascript Object Notation은 JS 객체 문법을 이용해 구조화된 데이터를 표현하기 위한 문자열 기반의 표준 포맷이다.

const obj = {
	name: "otter",
	gender: "male",
  favoriteFood: {
		first: "sushi",
		second: "hamburger"
  }
}

const copy = JSON.stringify(obj)

console.log(copy)
// {"name":"otter","gender":"male","favoriteFood":{"first":"sushi","second":"hamburger"}}

위의 예시처럼 문자열로 변환이 된다면, copy에 담긴 값은 객체가 아닌 JSON이기 때문에 완전히 새로운 주소를 가지게 된다. 이후, JSON.parse()를 사용해서 JSON 데이터 포맷을 다시 객체 형태로 바꿔주면

const deepCopy = JSON.parse(copy)

console.log(deepCopy)

/*
	{
		name: "otter",
		gender: "male",
	  favoriteFood: {
			first: "sushi",
			second: "hamburger"
	  }
	}
*/

이때 새로운 객체가 생성되며 deepCopy에 담기는 것이기 때문에 원본 객체와는 전혀 다른 주소를 가진 객체가 생성되는 것이다. 이러한 복사를 깊은 복사라 부른다.

21. rest parameter

rest parmeter는 함수의 매개변수(parameter)를 배열로 전달 받는 방식이다.
매개변수를 정의하는 과정에서 rest parameter의 개념을 적용시키면(...rest) 함수를 호출하는 과정에서 다수의 전달인자(arguments)가 건네졌을 때 변화가 생긴다.

const foo = function(one, two, ...rest) {
	console.log(rest)
}

foo(1, 2, 3, 4, 5) // [ 3, 4, 5 ]

one과 two 매개변수에는 주어진 전달인자의 첫번째, 두번째 데이터가 담긴다.
rest 매개변수에는 앞선 두개의 데이터를 제외한 나머지 데이터가 배열의 형태로 담기게 됨.

또한 rest parameter도 매개변수임은 다르지 않기에 원하는 이름으로 사용할 수 있음!

const foo = function(one, two, ...arr) {
	console.log(arr)
  // rest 파라미터 또한, 매개변수이기 때문에 임의의 변수명 지정 가능(arr로 지정)
}

foo(1, 2, 3, 4, 5) // [ 3, 4, 5 ]

추가로, 들어오는 데이터를 전부 rest parameter로 받아올 수도 있다.

const foo = function(...rest) {
	console.log(rest)
}

foo(1, 2, 3, 4, 5) // [ 1, 2, 3, 4, 5 ]

🚫 주의사항 🚫
rest parameter를 작성할 때는 반드시 마지막에 위치해야 함.

// 잘못된 예시
const foo = function(one, ...rest, two) {
	     console.log(rest)
             }

22. 개인적으로 알게된 것

  • * 를 쓰면 str 값을 숫자로 변환하여 리턴할 수 있다. 

    function typeSwitch(str) {

   result = str * 1
   return result;
}

  • 이 문제(부울대수의 규칙에 관련) 를 이해하고 엄청 기분이 좋았던 기억..ㅎㅎ 근데 컴퓨터는 왜 이렇게 생각하는거니?
    부울 대수의 연산 순서는 괄호( )가 제일 큰 우선순위이고 그다음으로 부울 AND이며 최종적으로 부울 OR의 순서를 가진다.

    위 코드는 답이 아님! C그룹, A그룹, B그룹, AB그룹 순서로 써야함

  • 배수 구하는거 (%5 === 0) 요로코롬 쓰기

  • 반복문에서 어떨때 length를 쓰고, 어떨 때 그냥 변수명을 써주는지 헷갈렸는데 문자열 돌릴때만 i < arr.length 이렇게 length 붙임

  • shift 사용 문제

    .push() : 배열의 맨 끝에 값을 추가한다.

    .unshift() : 배열의 맨 앞에 값을 추가한다.

    .pop() : 배열의 맨 끝에 값을 제거한다.

    .shift() : 배열의 맨 앞에 값을 제거한다.

  • boolean 으로 간단하게 할 수 있는 문제! (주석처리 참고)

  • Array.isArray : 배열인지 아닌지 확인 할 수 있는 메소드

  • 대소문자 변환 (LowerCase, UpperCase) 참고

    const str = "Hello, World, JavaScript"

const result = str.toUpperCase(); 
let result; // output : HELLO, WORLD, JAVASCRIPT

위 코드는 대문자로 변환. 소문자도 똑같이 하면 됨!

  • type of 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다. MDN참고

  • rest parameter

    객체 안에 name, age, hobby 등등 있을 때
    const {petName, hobby, …rest} = origin 이렇게 쓰면 레스트에는 객체가 담긴다.
    필요한 데이터를 rest 라고 묶어서 뺄 수 있다. 혹은 반대로!
    rest 는 변수명 역할을 하기때문에 any, others 이렇게 써도 상관없다.

  • replace()
    replace (",", "") -> , 를 공백으로 바꿔라!

✔️ What I Liked

  • 이번 한주는 실력적으로 스스로에게 만족한 점은 없지만.. 그래도 굳이굳이 찾아보자면 조금이지만 하루하루 발전한 오늘의 나를 발견했던 순간들이 있었다. ㅎㅎ 이런것을 느끼면서 무조건 반복학습을 해야겠군 이라고 생각했다.

✔️ What I Lacked

  • 아직 많이 부족한 자바스크립트
  • 요새 집중력이 떨어지면 자꾸 포기하거나 다음으로 미루게된다.
  • 활용을 잘 못하는 것 같다. 찾아보고 답을 알아도 내 코드에 적용을 잘 못함
  • 아주 느리다 모든것이..🥹

✔️ What I long for

  • 다음주는 본격적으로 본캠프과정이 시작되는데, 모르는거 무조건 알고, 이해하자. 캠프 과정 끝나면 진짜 나혼자 해결해야하잖아!!
  • 느린것은 조금 많이 반복해서 공부하다보면 빨라질 거라 생각함..
  • 시간활용 잘하기.
  • 나는 칭찬받아야 잘하는 스타일이라서 스스로라도 자신감이나 자존감 깎지 말기!
  • 조급해하지 말고 천천히 재미있게 공부하기. 앞으로 계속 할 공부니까! 그렇다고 여유 부리지는 말 것..ㅎㅎㅎㅎㅎㅎㅎㅎㅎ
  • 자바스크립트 이해하기 x 100000000 🙏🏻
profile
망구씨
Slow and steady wins the race.
이전 포스트

[회고] _ CSS

다음 포스트

[회고]23/03/13 - 23/03/17

0개의 댓글