JavaScript - 2

---

 

 

 

 

 

1 . 자료형 - 참조 타입

 

 

 

 

 

 

 

참조 타입

• 값의 주소(참조)를 저장
• 여러 값을 묶어 관리할 수 있음

 

 

Object

• 키와 값의 쌍으로 이루어진 객체

=> ex) let user = { name : "김사과", age : 20 }

 

 

Array

• 여러 값을 순서대로 저장

=> ex) let scores = [90, 80, 70]

 

 

Function

• 실행 가능한 코드 블록

=> ex) function hello() {console.log("안녕하세요")}

            let hello = function() {console.log("안녕하세요")}

 

 

 

 

 

 

 

 

1 - 1 . 원시 타입과 참조 타입의 저장 방식

 

 

 

 

원시 타입

 

• 값 그 자체가 변수에 직접 저장
• 숫자나 문자열을 변수에 넣으면 그 변수 안에 실제 값이 들어감
• 다른 변수에 복사하면 완전히 새로운 값이 복사되며 한쪽을 변경해도 다른 쪽에는 영향을 주지 않음

 

 

참조 타입

• 값이 저장된 위치(주소)를 변수에 저장
• 객체나 배열을 변수에 담으면 변수에는 실제 데이터가 아니라 데이터가 있는 곳의 주소가 들어감
• 다른 변수에 할당하면 같은 데이터를 가리키게 되고 한쪽에서 값을 수정하면 다른 쪽에서도 변경된 결과가 보임

 

 

 

 

 

1 - 2 . 참조 타입의 특징

 

 

 

• 참조 타입의 저장 방식에 따라 복사본에 새로운 값을 대입하면 원본의 값도 따라서 변경됨

=> 두 변수(user)가 같은 주소를 가지고 있기 때문

 

 

 

 

 

 

 

 

2 . 스택 vs 힙

 

 

 

 

 

2 - 1 . 스택(stack)

 

• 프로그램 실행 중 함수 호출과 지역 변수, 매개변수 같은 임시 데이터가 저장되는 메모리 공간
• 코드가 실행되는 순서대로 쌓였다가 함수가 종료되면 자동으로 제거되는 후입선출(LIFO) 구조를 가짐
• 관리가 단순하고 접근 속도가 빠름

 

 

 

 

 

2 - 2 . 힙(heap)

 

• 객체, 배열처럼 크기가 유동적이거나 오래 유지되어야 하는 데이터가 저장되는 메모리 공간
• 프로그램 실행 중 필요할 때 할당되고 더 이상 사용되지 않으면 가비지 컬렉터에 의해 정리됨
• 스택보다 관리가 복잡하지만 큰 데이터와 공유 데이터를 다루기에 적합함

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

2 . 연산자

 

 

 

 

 

2 - 1 . 산술 연산자

• +
• -
• *
• /
• %
• **

 

 

2 - 2 . 대입 연산자

• = : 
• +=
• -=
• *=
• /=
• %=

 

 

2 - 3 . 비교 연산자

• == : 값만 비교 (같다)
• != : 값만 비교 (같지 않다)
• >
• <
• >=
• <=
• === : 값 + 타입 비교
• !== : 값 + 타입 비교

 

 

2 - 4 . 논리 연산자

• %% : and
• || : or
• ! : not

 

 

2 - 5 . 증감 연산자

• ++
• --

 

 

=>  전치, 후치 연산자로 나뉨

 

전치 : 값을 연산하고 =에 대입

후치 : =에 대입하고 연산

 

 

 

2 - 6 . 문자열 연산자

• + : 문자열 연결

 

 

2- 7 . 조건(삼항) 연산자

• 조건에 따라 값1이나 2를 선택
• 조건? 값1 : 값2

 

=> 조건이 참이라면 값 1, 조건이 거짓이라면 값 2

 

 

 

2 - 8 . 타입 관련 연산자

• typeof : 변수의 타입을 반환
• instanceof : 변수가 특정 객체의 타입인지 확인

 

 

 

2 - 9 . 기타 연산자

• , : 여러 표현식 나열
• ?. : 옵셔널 체이닝(null인지 아닌지 체크)
• ?? : null 병합 연산자

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

3 . 제어문 - 조건문

 

 

 

 

 

 

3 - 1 . if ~ else if ~ else 조건문

 

 

 

 

• 조건이 참밖에 없을 때

 

 

 

• 조건이 참, 거짓으로 나뉠 때

 

 

 

• 조건이 여러 개일 때

 

 

 

• ex)

=> 성인입니다 출력

 

 

 

 

 

 

 

 

3 - 2 . switch 문

 

 

 

• 여러 개의 경우(case)를 비교할 때 사용하는 조건문

 

 

 

• ex)

=> 열정 가득 출력

 

 

=> 큰 따옴표나 작은따옴표 대신 백틱을 사용하고 $ 뒤에 중괄호,  안에 변수를 넣으면 변수를 사용할 수 있음

 

 

 

 

• break : 해당 조건에 만족해서 실행하면 바로 조건문을 빠져나감

=> 없을 시 다음 조건도 실행됨

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

4 . 제어문 - 반복문

 

 

 

 

 

 

4 - 1 . while / do ~ while 문

 

 

• while문
  • 조건이 false일 때 실행되지 않음

 

 

• ex)

 

 

 

 

• do ~ while문
  • 조건이 false여도 한 번은 실행됨

 

 

• ex)

 

 

 

 

 

 

 

 

 

4 - 2 . for 문

 

 

 

 

 

 

 

 

• ex)

=> 초기식 : let i = 1     => 변수 i는 1

=> 조건식 : i <= 5     => i가 5보다 작거나 같으면

=> 증감식 : i++     => 돌 때마다 값 1씩 증가

 

 

 

• 중첩 for문

 

 

 

 

 

 

 

 

4 - 3 . break

 

 

 

• 반복문(for, while)이나 switch 문을 그 자리에서 즉시 종료하고 탈출시키는 명령어
• 특정 조건을 만족했을 때 해당 문을 빠져나옴

=> i가 5보다 커지면 break, 해당 for문을 빠져나옴

 

 

 

 

 

 

 

4 - 4 . continue

 

 

 

• 반복문 안에서 현재 차례의 남은 코드를 건너뛰고 곧바로 다음 반복으로 넘어가는 명령어

=> i를 3으로 나눴을 때 나머지가 0이면 건너뜀

-> 콘솔 출력 시 3의 배수는 출력되지 않음

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

5 . 함수

 

 

 

 

5 - 1 . 함수 선언식

• 가장 기본적인 함수 방식
• 코드 어디에서든 호출할 수 있다는 특징을 가짐
• function 키워드로 함수를 직접 선언하는 방식

 

• ex)

=> 호이스팅 발생으로 위 두 줄과 아래 두 줄을 바꿔서 작성해도 정상적으로 작동함

 

 

 

 

호이스팅

• 자바 스크립트가 코드를 실행하기 전에 변수와 함수 선언을 해당 스코프의 최상단으로 끌어올려 처리하는 동작방식
• 함수 선언식은 코드의 위치와 상관없이 호출 가능
• var로 선언된 변수도 선언 자체는 끌어올려지지만 값은 초기화되지 않아 undefined상태가 됨  

 

 

 

 

5 - 2 . 함수 표현식

• 함수가 변수에 할당하는 방식
• 함수가 변수에 저장되기 때문에 선언 이전에는 사용할 수 없음

 

• ex)

 

 

 

 

5 - 3 . 화살표 함수

• 간결한 함수 표현 방식으로 기존 함수보다 코드가 짧고 직관적임
• this를 자체적으로 가지지 않고 상위 스코프인 this를 그대로 사용하기 때문에 콜백 함수나 간단한 연산 로직에 자주 사용됨

 

• ex) 

 

 

 

 

5 - 4 . 익명 함수

• 이름이 없는 함수
• 주로 함수 표현식이나 콜백 함수 형태로 사용됨
• 한 번만 사용되거나 특정 상황에서 즉시 전달해야 하는 로직에 적합
• 익명 함수만 단독으로 사용하게 될 경우 오류가 발생하므로 보통 변수에 저장하거나 다른 함수의 인자로 전달해서 사용됨

 

• ex)

 

 

 

 

5 - 5 . 즉시 실행 함수

• 함수를 만들자마자 즉시 실행함
• 한 번만 실행됨
• ES6 모듈 등장 이후 사용 빈도가 줄어듦

 

• ex)

=> 지금의 자바스크립트에선 세미콜론을 사용하지 않아도 되지만 즉시 실행 함수를 사용했다면 바로 앞 문장 끝에는 세미콜론이 붙어야 오류가 나지 않음

 

 

 

 

5 - 6 . 콜백 함수 

• 함수의 인자로 전달됨

 

• ex)

 

 

 

 

5 - 7 . 가변 매개변수를 가진 함수

• 함수의 전달되는 인자의 개수가 정해져 있지 않을 때
• 여러 개의 값을 하나로 묶어 받아 처리할 수 있도록 해주는 기능

 

• ex)

=> for문 안의 of : 반복 가능한 객체(배열 등)의 값을 하나씩 꺼내라는 의미

 

 

 

 

5 - 8 . 중첩 함수

• 함수 안에 또 다른 함수를 정의하는 방식
• 내부 함수는 외부 함수의 영역 안에서만 사용할 수 있음
• 외부 함수의 변수에 접근할 수 있어 관련된 로직을 하나의 기능 단위로 묶을 수 있으며 불필요한 전역 변수 사용을 줄이고 코드의 안정과 가독성을 높일 수 있음

 

• ex)

 

 

 

 

 

5 - 9 . 고차 함수

• 함수를 인자로 전달받거나 함수를 반환하는 함수

 

 

• ex)

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

6 . 스코프

 

 

 

 

 

• 스코프 : 변수, 함수, 객체 등에 접근할 수 있는 유효 범위

 

 

 

 

6 - 1 . 스코프의 종류

 

전역 스코프

• 어느 곳에서든 접근 가능한 최상위 범위
• 브라우저 환경에서는 전역에서 var로 선언한 변수는 보통 window의 프로퍼티가 됨
• 브라우저 환경에서는 전역에서 let/const로 선언한 변수는 프로퍼티로 붙지 않음

=> ex) var a = window.a

            let b = window.b 

로 코드를 작성하면 let으로 선언한 b는 사용 불가능

 

 

• ex)

 

 

 

 

함수 스코프

• 함수 내부에서 선언된 변수
• var는 블록의 중괄호를 무시하고 함수 단위로만 스코프가 결정되는 함수 스코프를 가짐
• var를 블록 안에서 선언해도 함수 밖에서 접근 가능한 경우가 많아 버그의 원인이 될 수도 있음

=> 이러한 이유 때문에 var를 잘 사용하지 않음

=> 값이 변경되어야 하면 let, 기본적으로는 const 사용함

 

 

 

• ex)

 

 

 

 

블록 스코프

• {} 블록 단위로 범위가 결정되는 스코프
• let/const는 블록 스코프를 가짐 -> if, for, wjile, try/catch 등의 블록 안에서 선언하면 그 블록 밖에서는 접근 불가능

 

• ex)

 

 

 

 

지역 스코프

• 보통 전역이 아닌 모든 스코프(함수, 블록 등)를 통칭하는 말

 

• ex)

 

 

 

 

렉시컬 스코프(정적 스코프)

• 함수가 어디에서 호출되었는지가 아니라 어디에 선언되었는지에 따라 상위 스코프가 결정됨
• 내부 함수는 자신이 선언된 위치 기준으로 바깥 변수에 접근할 수 있음

 

• ex)

=> func3()  ->  inner()  -> x  -> outer

 

 

 

 

스코프 체인

• 변수를 찾을 때 자바스크립트는 현재 스코프 -> 상위 스코프 -> . . . -> 전역 스코프 순서로 올라가며 검색
• 이 연결 구조를 스코프 체인이라 함

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

7 . 배열

 

 

 

 

 

• 여러 개의 값을 하나의 변수에 순서대로 저장할 수 있는 자료구조
• index 번호로 구분되며 대부분 0으로 시작함
• 여러 가지 자료형을 함께 저장할 수 있음
• 인덱스를 기준으로 값을 저장하고 접근함
• 길이는 자동으로 관리됨 -> 배열의 크기를 굳이 정하지 않아도 됨
• 자바 스크립트의 배열은 연속적일 필요가 없음 
• 배열도 사실은 객체(object) 임
• let 변수명 = [값1, 값2, 값3, ...] 형태로 사용

 

 

 

• ex)

=> 여러 자료형 함께 저장

 

=> 위 배열 mixed의 인덱스 0번의 값 출력

 

=> 위 배열 mixed의 인덱스 1번의 값 "HELLO"에서 "반하나"로 변경

 

=> 배열 mixed의 길이 출력

 

=> 배열은 연속적일 필요가 없음, 현재 인덱스 4번까지 있으나 6번에 100을 추가하면 5번은 undefined(값없음)가 들어감

 

=> 기존 길이 5에서 인덱스 5번 6번이 추가 됐으므로 배열의 길이는 7이 됨

 

 

 

 

 

 

 

 

7 - 1 . 배열 메서드

 

 

 

push()

• 배열의 끝에 요소 추가

=> user 배열의 끝에 "ISTJ" 요소 추가

 

 

 

pop()

• 배열의 마지막 요소를 제거

=> pop()으로 배열의 마지막 요소를 제거하고 변수 temp에 제거한 요소 저장

=> 배열 user를 출력하면 마지막 요소의 값이 삭제되어 있음

=> 변수 temp를 출력하면 제거한 요소 출력됨

 

 

 

unshift()

• 배열의 앞에 요소 추가

 

• ex)

=> 배열 user의 맨 앞(인덱스 0)에 요소 111 추가

 

 

 

shift()

• 배열의 첫 번째 요소 제거

=> 배열의 첫 번째 요소를 제거하고 변수 temp에 저장

=> 배열 user를 출력하면 첫 번째 요소의 값이 삭제되어 있음

=> 변수 temp를 출력하면 제거한 요소 출력됨

 

 

 

forEach()

• 배열의 각 요소를 순서대로 하나씩 처리

 

• ex)

=> arr2를 하나씩 순회

 

 

 

map()

• 각 요소를 가공하여 새로운 배열을 반환

 

 

 

filter()

• 조건을 만족하는 요소만 골라 새 배열 반환

 

 

 

reduce()

• 배열을 하나의 값으로 누적 계산 (합계, 객체 생성)

 

 

 

find()

• 조건을 만족하는 첫 번째 요소 반환

 

 

 

findIndex()

• 조건을 만족하는 첫 번째 요소의 인덱스 반환

 

 

 

includes()

• 특정 값이 포함되어 있는지 여부 반환

 

 

 

indexOf()

• 특정 값의 첫 인덱스 반환
• 없을 시 -1 반환

 

 

 

sort()

• 배열 요소를 정렬(기본값 : 오름차순)
• 배열의 원본 자체를 변경시킴

 

• ex)

 

 

 

 

reverse()

• 배열 순서 반전
• sort()를 시키고 reverse()하면 내림차순이 됨

 

• ex)

 

 

 

 

slice()

• 배열의 일부를 잘라 새 배열 반환
• 원본 유지하고 복사본을 만듦

 

 

 

splice()

• 요소 추가, 삭제, 교체
• 배열의 원본 자체를 변경시킴

 

 

 

concat()

• 배열을 합쳐서 새 배열 반환

 

• ex)

=> 배열 user와 배열 profile을 합침

 

 

 

 

flat()

• 중첩 배열을 평단화
• 기본적으로 1단계만 평단화 시킴
• () 안에 깊이 지정 시 모두 평단화 시킬 수도 있음

 

• ex) 

=> 결과 : [1, 2, 3, 4, 5, 6, 7]

 

 

 

 

 

 

 

 

 

 

 

---