[데브코스 FE] 2주차 두번째 수업 2024/07/23

2주차 화요일 수업에서는 

JS 문법 중 데이터, 객체, 함수에 대해 배웠다.

 

문법은 어느 언어나 얕게보면 정말 단순하고 쉬운거같은데,

제대로 깊게 파악해보려니 기본 개념이 탄탄해야겠다는 생각이 들었다.

 

JavaScript로 API의 데이터를 받아오다보면

자주 보이는 데이터 형태가 바로 객체(Object)이다.

그래서 객체나 객체와 관련한 함수들을 잘 다루는것이 곧 실력인 것 같다.

 

이번엔 데이터 , 객체, 함수 문법들을 중심으로

내용을 따로 정리해보고자 한다.

 

---

학습내용

1. 객체(Object) 와 Symbol 자료형
2. JS 함수 종류, rest 인자
3. swiper 사용시 tip
4. 수업 때 질문들 Q&A

---

1. 객체(Object) 와 Symbol 자료형

출처 : https://velog.io/@oneook/%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%83%80%EC%9E%85%EA%B3%BC-%EC%9E%90%EB%A3%8C-%EA%B5%AC%EC%A1%B0-JavaScript-Basics

 

자바스크립트에는 크게 2가지의 데이터 타입이 있다.

하나는 원시 타입(Primitive Type), 나머지 하나는 참조 타입(Reference Type) 이다.

 

원시 타입은 우리가 잘 알고있는 자료형들(number, string ... )이 포함되고,

참조 타입은 객체, 배열, 함수등이 포함된다.

 

이 두 개의 데이터 타입은 값이 들어있는 메모리에 접근하는 방식이 다르다.

원시 타입 데이터는 값을 읽거나 쓸때, 값이 저장된 메모리에 직접적으로 접근하여 가져다 쓴다.

반면, 참조 타입 데이터는 값이 메모리에 직접 저장되는 것이 아니라,

힙(Heap) 이라는 저장소에서 해당 데이터가 들어있는 주소값을 저장한다.

 

즉! 우리가 알아보고자 하는 객체는

힙 영역에 저장되고, 값을 참조할때 직접 참조가 아닌 주소값으로 데이터에 접근한다.

 

참조 타입에 대한 자세한 설명은 추후 수업 기록때 다룰 예정이다.(2주차 5번째 수업)

(업데이트시 링크 남겨놓을게욤)

 

🔍Symbol 자료형

수업에서 강사님이 symbol 자료형에 대해 간단히 언급하고 넘어가셨는데

처음 들어보는 자료형이라 이 글을 작성하면서 추가적으로 찾아보았다.

 

Symbol 자료형은 ES6부터 추가되었는데,

Symbol은 Object 자료형에 비밀스런 key값을 부여하고 싶을 때 사용한다.

 

이게 무슨말이냐?비밀스런 key값? 싶은데

원래 Object 자료형에는 key값으로는 문자만 가능했다.

하지만 symbol을 사용하면 문자가 아닌 것을 입력하더라도 문자로 자동 치환된다.

문자만 받는다는 컨셉만 유지한채 입력자료형을 늘려준것이다!

symbol 사용법

let height = Symbol("내 키");

let person = { name: "Shin", [height]: 154 };

 

Object를 만들 때

key값에 [ ] 를 이용하여 Symbol이름을 넣어주면

비밀스런 key값을 사용할 수 있다!

 

symbol 사용시 주의할점

 

이때 주의할점은~

같은 Symbol값이라고 해서 다같은 symbol이 아니다!

마치 [ ] === [ ] 가 false인 것 처럼 말이다.

let a = Symbol('설명1');
let b = Symbol('설명1');
console.log(a === b); // false

 

symbol은 이정도로만 간단히 알아두도록 하자!

나중에 필요할 때 더 찾아봐가면서 사용해봐야 겠다.

 

2. JS 함수, rest 인자

자바스크립트 JS 에서는 선언 함수, 익명함수, 화살표 함수 라는 3가지의 함수 종류가 있다.

선언 함수, 화살표 함수는 많이 봤고 실제로도 많이 써봤는데

익명 함수에 대해서는 처음 알게되어 더 찾아보았다.

 

1. 선언 함수(Function Declaration)

함수 선언식으로 작성된 함수이다. 

return 을 사용하여 값을 반환할 수 있다.

function greet() {
    console.log("Hello!");
    return "Hello";
}

 

event작성을 위해 함수 내부에서 'this' 키워드를 사용하여

함수를 호출한 객체를 가리킬 수 있다.

 

2. 화살표 함수(Arrow Function)

const greet = () => {
    console.log("Hello!");
}

 

ES6에서 도입됐으며, 코드가 간단한경우 중괄호를 생략할 수 있고

'return' 키워드도 생략할 수 있다.

화살표 함수 내부의 this는 상위 스코프의 'this'를 가리키는것이 1.의 선언 함수와 살짝 다르다.

 

아래 예시를 통해, 선언 함수의 this와 화살표 함수의 this가 다른 것을 확인할 수 있다.

예제 ) 일반 함수와 화살표 함수의 this 차이

const obj = {
    value: 42,
    regularMethod: function() {
        console.log('Regular Method:', this.value); // 42
    },
    arrowMethod: () => {
        console.log('Arrow Method:', this.value); // undefined
    }
};

obj.regularMethod();
obj.arrowMethod();

 

 선언 함수의 'this'는 메서드를 호출한 'obj'객체를 가리키고,

화살표 함수의 'this'는 'obj가 아닌, 화살표 함수가 정의된 위치의 'this'를 가리킨다.

여기서는 상위 스코프인 전역 객체('window')가 되므로 this.value가 undefined가 된다.

 

3. 익명 함수(Anonymous Function)

const greet = function() {
    console.log("Hello!");
}

 

이름이 없는 함수로, 주로 변수에 할당하거나 다른 함수의 인자로 사용되는 함수이다.

익명 함수에서의 'this'는 1.선언 함수의 'this'와 동일하게 작동하는 특징이 있다. (호출한 객체 가리킴)

 

익명 함수라는 이름을 처음들어서 내가 처음 보는 형태의 함수인줄 알았는데,

알고보니!! 내가 주로 작성하던 함수 형태 중 하나가 익명함수였다!

변수에 function을 할당하는 식으로..

저러한 함수의 형태가 익명함수 형태라는 것을 알아가게 되었다~

 

이때!

화살표 함수랑 선언 함수와의 기능적 차이점이 무엇인가? 

가 궁금할 수도 있다.

위에 설명에서 힌트가 나왔지만, 아래 목록 중 4. 수업때 Q&A 부분에서 

자세히 다뤄보도록 하겠다!

 

🔍rest 인자

 

rest 인자를 사용하면 함수가 가변 인자를 받을 수 있다.

나머지 인자들을 배열로 수집하게 된다.

 

사진처럼, sum 함수에 6개의 parameter가 전달되었을때

함수 내부에서 a,b,만 사용하고 나머지 인자들은 ...rest 가변인자로 처리할 수 있다.

또한 배열이기 때문에 forEach와 같은 배열 메서드를 사용할 수 있다.

 

🔍arguments 인자

rest인자에 대해서 공부하다가 arguments 인자라는 것도 알게되었다.!

function add(a, b) {
    console.log(a); // 1
    console.log(b); // 2
    console.log(arguments); // [Arguments] { '0': 1, '1': 2 }
}

add(1, 2);

 

'arguments'는 객체로, 함수에 전달된 모든 인수를 객체로 포함한다.

배열과 유사한 객체로 제공되지만

단, 배열이 아니므로 배열 메서드를 사용할 수 없다.

 

찾아보니 arguments 는 함수에 전달된 모든 인수가 포함이어서,

가변 인수를 처리할 때는 rest 인자를 사용하는 것이 더 바람직해보인다.

배열으로 수집되어 배열메서드도 쓸 수 있다는 장점이 있으니 말이다!!

 

 

3. 콜백(callback)함수

JS에서 악명높기로 유명한 콜백(callback) 개념!! (일명 콜백지옥)

사실 콜백 개념에 관한건 유튜브에 더 쉽고 자세하게 알려주는 영상들이 많다.

(유튜브 드림코딩님이 알려주시는 콜백 개념이 가장 와닿았던것 같다.)

https://youtu.be/s1vpVCrT8f4?si=rn2CexC0wRSHO0xp

 

콜백의 개념과 콜백함수의 단점으로 콜백 지옥이 있다는 것은 영상에서 확인했다고 하고,

콜백의 필요성에 대해서만 상기시킬겸 간단히 요약해보고자 한다.

 

🔍 왜 콜백 함수가 필요한가?

JS에서는 비동기적으로 작업을 처리할 수 있는 능력이 있다.

비동기라함은 동기의 반대말으로,

한꺼번에 같은 시간에 실행되는 것이 아니라

순차적으로 앞의 함수가 끝나길 기다리고 나서 그 뒤 순서의 함수가 실행되도록하는

실행 시작 시간이 서로 다른 방식을 말한다.

 

콜백함수는 이러한 비동기 작업이 완료된 후에 실행할 코드를 정의할 수 있게 해준다.

즉, 비동기 작업 처리할때 콜백 함수가 유용하게 사용된다.

 

하지만 영상처럼 콜백 지옥 문제가 있어서

이런 문제를 피하기 위해

ES6부터 'Promise'와 'async/await' 방식이 도입되었다.

 

그래서 앞으로 API를 통해 데이터를 가져오는 등의 함수 작업을 할때에는 

async/await를 사용하여 함수를 원하는 타이밍과 방식대로

잘 사용할 수 있도록 하는 능력이 필요하다고 생각된다.

 

간단한 예시는 다음과 같다!

async function getData() {
    const data = await fetchData();
    console.log(data); // "서버에서 가져온 데이터" 출력
}

getData();

 

4. 수업때 Q&A 

Q: 변수에서 var와 let중에 어떤 것이 많이 쓰이나요?

A: var는 호이스팅이 일어나서, 블록레벨의 let을 더 많이 쓰는 경향이 있습니다.

Q: 화살표함수랑 선언함수랑 기능적인 차이점이 무엇인가요?

A: 함수 내부에서 this.을 사용하는 경우, arraw function은 무조건 this = 윈도우 를 가리키게 된다.

그 외의 함수에서 this.는 함수 발생 이벤트를 가리킨다.

---

자바스크립트의 기본 문법이 쉽다고만 생각했었는데

수업때와 이번 포스팅하며 복습때

각 함수마다 다르게 가리키는 'this',

symbol 타입,

콜백 개념 및 필요성 복습,

rest 인자와 arguments 객체

등 많은 것을 알아갈 수 있었다.

 

역시 그냥 아는것과

복습으로 다시 아는 것은 다르다는 것을 느끼며!

2주차 배운 내용들도 신나게 복습해봐야겠다 ~ :)