[SOPT] week02 세미나 TIL - JavaScript

데이터 타입 (자료형)

원시 타입

- 변경 불가능한 값 

- 값에 의한 전달 (Pass by value)

- 종류: boolean, number, string, undefined, null, symbol

(: let x= 'a', let a = 'a'이면 메모리에 x의 'a'생기고, a는 x의 메모리 부분의 값을 복사하여 자신(a)의 새로운 'a'값을 메모리에 할당. a와 x 비교하면 값은 동일하기에 true

그후 a = 'b'라고 하면,  'a'가 'b'로 변하는게 아니라 'b'가 추가로 쌓이고 걔를 참조함 -> -> 가비지 컬렉터)

 

boolean

false: 비어있는 문자열 "", null, undefined, 0

number

숫자, Infinity, -Infinity, NaN

undefined

: 선언되었지만 값을 할당하지 않은 변수 접근 or 존재하지 않는 객체 프로퍼티 접근

개발자가 undefined를 할당할 수는 있지만 권장 x 대신 null 사용 권장!

본질은, JS 엔진에 의해 초기화 된 것임

 

symbol

충돌 위험이 없는 '유일한 객체의 프로퍼티 키'를 만들기 위해 사용

https://www.notion.so/dosopt/JavaScript-dcc8ea05d51c43b79828e88ce77712f8?pvs=4#1d67c00beb0442c69b993976e073fdbb 

 

 

객체 타입

- 변경 가능한 값 

- 참조에 의한 전달 (Pass by reference)

- 종류: object, reference type

얕은 복사.

const webPart1={ ~~ } 선언 후 const webPart2={ ~~ }를 선언하면, 값이 아예같아도 메모리에 각각이 생김. 그 후 webPart1과 webPart2가 같냐고 비교하면 false 출력. webPart1=webPart2라고 해주면 같은 메모리 주소로 변경. 

---

연산자

: 하나 이상의 표현식을 대상으로, 산술/할당/비교/논리/타입연산 등을 수행해서 하나의 값으로 만듦

표현식: 리터럴, 식별자, 연산자, 함수 호출 등의 조합 => 평가 후 하나의 값으로 취급!

산술연산자

- 종류: 이항 산술 연산자, 단항 산술 연산자, 문자열 연결 연산자

문자열 연결 연산자

+ 연산자의 피연산자 중 하나 이상이 문자열일때, 문자열로 취급해서 연산함

'+'일때만 해당!

ex) '나나'+ 1 -> '나나1'

 

할당연산자

- 종류: =, +=, -=, *=, /=, %=

console.log(x=1) -> 1을 출력. x=1 출력 X. 왜냐? 표현식은 하나의 값으로 평가!

 

비교연산자

동등/일치 비교 연산자

동등 비교: '값'을 비교. ex) ==, !=

일치 비교: '값과 타입'을 비교. ex) ===, !==

1=='1' -> true

1==='1' -> false

 

어케 값이 같은지를 판단하는지? : js의 암묵적 타입 변환 (타입 강제 변환)

#### 암묵적 타입 변환

js는 동적타입언어. js엔진에 의해 암묵적으로 타입이 자동 변환되기도.

js엔진은 표현식 평가시 Context를 고려해서 암묵적으로 ~함

ex) 문자열 타입으로 변환, 숫자 타입으로 변환, 불리언 타입으로 변환

=> 동등비교 연산자는 부작용 多. 사용 지양

 

cf) NaN ==== NaN -> false. 항상 자신과 일치 않는 유일한 값. 숫자가 NaN인지 조사하려면 isNaN(NaN) -> true

 

대소관계 비교 연산자

 

삼항 조건 연산자

 

논리 연산자

- 종류: ||, &&, !

cf) 단축 평가 (단락평가)

: 논리 평가를 결정한 피연산자의 평가결과를 그대로 반환함. 왼쪽부터 평가 진행

&&: falsy 만나면 평가 끝/해당피연산자 반환, truthy 만나면 오른쪽 피연산자 반환

||: truthy만나면 평가 끝/해당피연산자 반환, falsy 만나면 오른쪽 피연산자 반환

 

쉼표 연산자

왼쪽부터 피연산 차례대로 평가. 마지막 피연산자 평가 끝나면 걔의 결과 반환

 

그룹 연산자

걍 ( ) 얘

 

typeof 연산자

null은 없음

string, number, boolean, undefined, symbol, object, function만 존재

ex) const me=null;

console.log(typeof me === null) -> false

console.log(me === null) -> true => null인지 확인하고프면 일케해야댐!

console.log(typeof me) -> object (그냥 js 버그라 수용 ㅎ)

 

심화 내용

옵셔널 체이닝 연산자, null병합 연산자, 프로퍼티 삭제

 

형변환

to String

방법

1. String( ~~ )

2. (~~).toString()

3. "" + (~~)

4. `${ ~~ }`

 

to Number

방법

1. Number(~~)

2. parseInt(~~) or parseFloat(~~)

3. +(~~)

4. (~~) * 1

 

to Boolean

방법

1. Boolean(~~)

2. !!(~~)

---

제어문

: 주어진 조건 따라 코드블록 실행 or 반복실행하는 문

블록문

조건문

종류: if-else문, switch문

 

cf) 매직넘버 사용 하지 않기 -> 상수화해서 저장시켜 활용하기

---

함수

정의 방법

종류: 함수 선언문, 함수 표현식, 화살표 함수

 

1 함수 선언문

function 함수명 () {  return ; }

 

2 함수 표현식

리터럴 방식으로 함수 정의하고 변수에 할당할 수 있음. 함수는 일급객체이기 때문

let 변수명 = function() { return ; }

일반적으로 함수명 생략 = 익명함수

변수는 할당된 함수를 가리키는 참조값 저장

but. 함수명을 사용해 호출하게되면 에러 발생

 

3 화살표 함수

항상 익명함수로만 사용.

ES6 문법임.

 

심화) 일반함수와 arrow와 차이점은 this임!

1. function 키워드로 생성한 일반함수

: 함수의 내부함수, 콜백함수에 사용되는 this는 전역객체 window임

window객체말고 메소드를 호출한 객체를 가리키게 하려면, 1. 또다른 변수 선언해서 this할당, 2. bind() 사용

 

2. 화살표함수

: 함수 선언시 this에 바인딩할 객체가 정적으로 결정됨. 언제나 상위 스코프의 this 가리킴.

bind 메소드 사용 불가

 

매개변수

1. 원시타입인수

call by value로 동작

 

2. 객체형 인수

call by reference로 동작

 

함수 선언식 vs 함수 표현식

함수 호이스팅

js는 let, const 포함 모든 선언을 호이스팅함

 

변수 호이스팅: 변수 선언 및 초기화와 할당이 분리되어 진행

but, 함수 호이스팅: 함수선언, 초기화, 할당이 한번에 진행

=> 함수 선언문의 경우, 함수 선언 위치와 상관없이 아무대서나 함수 호출 가능 

=> 함수 표현식의 경우, 변수 호이스팅이 발생. 함수 호이스팅 아니라. 따라서 해당 함수에 도달했을때부터 함수 사용 가능

 

=> 함수 표현식이 더 안전한 함수 호출 가능 (?)

 

일급함수

함수를 변수에 할당한다

함수를 인자로 전달한다

콜백함수

: 함수를 명시적으로 호출하는 방식이 아닌, 특정 이벤트가 발생했을 시 시스텡ㅁ에 의해 호출되는 함수.

 

함수를 반환한다

-> 추상화 가능

와 모르겠다 ㅎ.ㅎ

 

심화) 고차함수

함수를 인자로 전달받거나 함수를 결과로 반환하는 함수.

불변성을 지향하는 함수형 프로그래밍에 기반 두고 있음

 

심화) 클로저

주변상태에 대한 참조와 함께묶인 함수의 조합.

내부함수가 자신이 선언됐을때 환경인 스코프를 기억하여, 자신이 선언됐을때의 환경 밖에서 호출되어도 그 환경에 접근 할 수 있는 함수

 

좋은 함수 만들기

---

객체

키와 값으로 구성된 프로퍼티들의 집합

객체 선언시 주로 '객체 리터럴 문법'을 사용함

 

객체 리터럴

중괄호를 사용하여 객체를 생성하는 방법

 

프로퍼티

key와 value값으로 구성

key: 빈문자열 포함하는 모든 문자열 또는 symbol 값

• key는 암묵적으로 타입이 변환되어 문자열이 됨
• 이미 존재하는 key 중복 선언시, 나중에 선언한 프로퍼티가 덮어씀
• 표현식을 key로 사용하려면,, key로 사용할 표현식을 대괄호로 묶어야함
• 객체는 프로퍼티 열거시 순서 보장 X. but 정수 프로퍼티는 자동 정렬
• 프로퍼티 값(value)가 함수인경우 = 메소드

프로퍼티 값 읽기

• 마침표 . 표기법
• 대괄호 [] 표기법 : 변수로 키 사용하고 싶을때 or 여러단어를 조합해 프로퍼티 키를 만든 경우
  • 대괄호 내에 들어가는 프로퍼티 이름은 반드시 문자열

 

프로퍼티 동적 생성

 

프로퍼티 삭제

delete 연산자 사용

 

단축 프로퍼티

function makeUser(name, age) {
  return {
    name,
    age,
    birthday : "0522",
  };
}

const user = makeUser("감자", 20); 
console.log(user);

 

객체 반복문

in 연산자

프로퍼티가 존재하는지 여부를 확인하는 연산자

 

for ... in 문

문자열 key를 순회하기 위한 문법.

순서는 보장 x

배열에는 사용 지양. 객체에서만 사용 지향

 

 

심화) 깊은 복사, 얕은 복사

깊은 복사: 객체의 실제 값을 복사 -> for문 이용하는 방법

얕은 복사: 객체의 참조값을 복사

 

심화) 객체의 방어적 복사, 불변객체

흠 이건 정말 모르겠군

객체의 방어적 복사: Object.assign (객체의 프로퍼티를 복사한 새로운 객체 반환)

불변객체화 통한 객체 변경 방지: Object.freeze

---

배열과 반복문

js 배열은 객체 타입임

배열 생성하기

방법: 배열 리터럴, Array()생성자 함수

배열 리터럴

Array() 생성자 함수

 

index와 length 프로퍼티

내장 메서드

종류: pop, push, shift, unshift, reverse, includees, splice, slice,

splice VS slice

splice: 원본배열을 변경함

 

반복문

for문

for ... of

: 배열 요소의 값을 순차적으로 가져옴

forEach 

주어진 함수, 즉 콜백함수를 배열요소 각각에 대해 실행할 수 있게 해줌

arr.forEach((element, index, array) => { //로직 })

 

map

콜백함수 실행 + 그 반환값들을 새로운 배열로 반환함

 

filter

조건에 맞는 요소 전체를 담은 새로운 배열을 반환

---

ES6

ECMAScript6

ES6 = ECMAScript6 in 2015

자바스크립트의 표준, 규격을 나타내는 언어 명세

 

Babel

개발자는 ES6 사용가능하지만, 브라우저가 호환되지 않아 babel이 그를 동일한 ES5코드로 변환해줌

 

JavaScript VS ECMAScript

ECMAScript: 어떻게 스크립트 언어를 만들 수 있는지

JavaScript: 어떻게 스크립트 언어를 쓸 수 있는지

 

ES6 문법

템플릿 리터럴

백틱 `을 사용해 문자열 나타내는 것

 

구조 분해 할당

배열이나 객체를 해체하여 그 값을 각각 변수에 담는 것

https://www.notion.so/dosopt/JavaScript-dcc8ea05d51c43b79828e88ce77712f8?pvs=4#0464ae87967149f2a014e7ff43fd3327 

 

이거 중요할거같은ㄱㅔ 내가 자주 봤는데 항상 헷갈렸음

 

rest 문법

• 객체, 배열에서 구조분해할당 문법과 같이 사용하면 '나머지값'들을 모아서 추출함
• ...를 앞에 붙임
• https://www.notion.so/dosopt/JavaScript-dcc8ea05d51c43b79828e88ce77712f8?pvs=4#3dec091c1dc04bd991afb9e598da06a9

spread 연산자

• 객체 혹은 배열을 펼칠 수 있음
• ... 를 앞에 붙임