자바스크립트 개념 정리 1

자바스크립트 개념이 잘 정리가 안 된다 ㅜㅜ 그래서 다시 정리해보고자 처음 읽었었던 혼자 공부하는 자바스크립트를 다시 정리해본다.

 

이게 처음엔 이해가 안 되는 부분이 많아서 건너 뛰거나, 제대로 안 읽었던 부분이 많은데

이 책부터 다시 제대로 이해하고, 정리해서 그 다음 단계로 가야할 것 같다.

1.

 

기본적인 용어

 

1. 표현식 : 값을 만들어내는 간단한 코드 = 뭘 해도 결과적으로 값이 만들어지면 표현식이다.

2. 문장 : 표현식이 하나 이상 모인 것 = 문장의 종결 의미하는 세미콜론, 줄바꿈을 넣으면 문장이다.

3. 프로그램 : 이러한 문장이 모인 것

---

 

☑️ 키워드 : 자바스크립트가 처음 만들어질 때 정해놓은 특별한 의미가 있는 단어다.

---

☑️ 식별자 : 프로그래밍 언어에서 이름을 붙일 때 사용하는 단어다. (변수, 함수명 같은)

* 식별자를 만들 때는 키워드 사용, 숫자로 시작, _ $ 제외한 특수문자, 공백문자 포함한 것들 x

 

**

클래스 : 대문자로 시작해서 + 소문자

변수, 함수, 인스턴스, 메소드 : 소문자로 시작

여러 단어로 이루어진 식별자 : 각 단어 첫글자를 대문자로 작성

 

**

☑️ 식별자 종류

구분	단독 사용	다른 식별자와 사용 (앞에 점 찍고 사용)
식별자 뒤에 괄호X	변수 (ex. input)	속성 (ex. array.length)
식별자 뒤에 괄호O	함수 (ex. function())	메소드 (ex. math.abs(-273))

---

주석

 

☑️ HTML :

<!-- 주석 -->

 

☑️ JS :

// 한 줄 주석

 

/*

여러 줄 주석

*/

---

2.

자료와 변수

 

자료 : 프로그래밍에서 프로그램이 처리할 수 있는 모든 것

 

자료형 : 자료 형태에 따라 나눠 놓은 것

---

문자열 자료형 

 

☑️ 문자열

console.log('this is "string"')
= this is "string"

console.log("this is 'string'")
= this is 'string'

 

 

⬇️이스케이프 문자(\) 사용

console.log('this is \"string\"')
= this is "string"

console.log("this is \'string\'")
= this is 'string'

\n = 줄바꿈

\t = 탭

\\ = 역슬래시 그 자체

 

☑️연산자

 

⬇️문자열 연결 연산자

'str' + 'ing' 
= 'string'

 

⬇️문자 선택 연산자

'string'[1] //이때 숫자는 인덱스라고 부름
= 't'

 

⬇️문자열 길이 구하기 (문자열 내부의 문자 개수, 인덱스 x)

''.length
= 0

'string'.length
= 6

---

숫자 자료형

 

⬇️숫자 연산자

+ 더하기
- 빼기
* 곱하기
/ 나누기
% 나머지 연산자

 

연산자 우선 순위 고려 = 먼저 계산하고 싶다면 괄호 사용

---

☑️ 불 자료형

 

⬇️불 만들기

=== 양쪽이 같다
!== 양쪽이 다르다
> 왼쪽이 더 크다
< 오른쪽이 더 크다
>= 왼쪽이 더 크거나 같다
<= 오른쪽이 더 크거나 같다

 

⬇️불 부정 연산자 (참을 거짓으로, 거짓을 참으로)

!true
= false

!false
= true

 

⬇️불 논리합, 논리곱 연산자

&& -> 논리곱 연산자 = 양쪽이 true여야 true
|| -> 논리합 연산자 = 한 쪽만 true여도 true

 

⬇️자료형 검사

typeof(자료)
typeof 자료

---

☑️ 상수

만드는 과정 : 선언

const 이름 = 값

 

☑️ 변수

let 이름 = 값

// 변수 값 변경
변수 = 값

 

☑️  변수에 적용할 수 있는 연산자

 

⬇️ 복합 대입 연산자 : 대입 연산자 + 다른 연산자

+= -> a = a + 1
-=
/=
*=
/=
%=

 

⬇️ 증감 연산자

변수 ++ -> 기존 변수 값에 1을 더함 (후위: 해당 문장 실행 후 값을 더함)
++ 변수
변수 --
-- 변수

---

☑️  undefined 자료형

 

⬇️ 상수, 변수로 선언하지 않은 식별자

typeof(abc)
= undefined

typeof(그냥식별자)
= undefinde

 

⬇️ 값이 없는 변수

let a
= undefined

typeof(a)
= undefined

---

☑️ 자료형 변환

 

⬇️ 문자열 입력

prompt (메시지 문자열, 기본 입력 문자열)

 

⬇️ 불 입력

confirm(메시지 문자열)

 

⬇️ 숫자 자료형으로 변환

Number(자료)

숫자 연산자 - * /를 사용해도 변환됨

 

⬇️ 문자 자료형으로 변환

String(자료)

빈 문자열을 연결해도 문자열 자료형으로 변환됨

 

⬇️ 불 자료형으로 변환

Boolean(자료)

null, undefined, NaN, 0, ... -> false로 변환됨
논리 부정 연산자(!!) 를 사용해도 변환됨

 

⬇️ 예제

inch -> cm 단위로 변경하기

 

const rawInput = prompt('inch를 입력해주세요');

const inch = Number(rawInput);
const cm = inch * 2.54;

alert(`${inch}inch는 ${cm}cm입니다`);

---

3.

조건문

 

조건문을 사용하면 조건에 따라 코드를 실행할 수도 있고, 실행하지 않을 수도 있다.

 

조건 분기 : 이처럼 코드가 실행되는 흐름을 변경하는 것

 

☑️if  조건문

if (불 값이 나오는 표현식) {
  불 값이 참이면 실행
  }

 

☑️if else 조건문

if (불 값이 나오는 표현식) {
  불 값이 참일 때 실행
} else {
  불 값이 거짓일 때 실행
}

 

☑️중첩 조건문 (조건문 안에 조건문 중첩)

if ( 1 ) {
  if ( 2 ) {
   2가 참
  } else {
   2가 거짓 [
  } = 1이 참이면 실행
} else {
  if ( 3 ) {
   3이 참
  } else {
   3이 거짓
  } = 1이 거짓이면 실행
}

 

☑️if else if 조건문 (겹치지 않는 3가지 이상의 조건)

if (표현식) {
  문장
} else if (표현식) {
  문장
} else if (표현식) {
  문장
} else {
  문장
}

 

☑️switch 조건문 (특정 값의 조건 비교할 때)

switch (비교할 값) {
  case 조건A:
    break
  case 조건B:
    break
  default:
    break
}

default는 생략 가능

break 키워드는 switch 조건문이나 반복문을 빠져나가기 위해 사용하는 키워드

괄호 안의 값과 조건 a, b 비교

 

☑️조건부 연산자 = 삼항 연산자

불 표현식 ? 참일 때의 결과 : 거짓일 때의 결과

 

☑️짧은 조건문

* 논리합 사용
true || ??? 
-> 불 표현식 || 불 표현식이 거짓이면 실행
(뒤에 어떠한 값이 들어가도 항상 참 (참이 확실하면 추가 연산을 진행하지 않으므로))

* 논리곱 사용
false && ???
-> 결과가 거짓인 불 표현식 && 불 표현식이 참이면 실행
(좌변이 거짓이면 항상 거짓)

---

4.

반복문

 

☑️ 배열 : 여러 자료를 묶어서 활용할 수 있는 특수한 자료

(문자열 인덱스, length 속성은 배열에서도 똑같이 사용됨)

 

☑️ 배열 만들기 

[요소, 요소, 요소, ...]

요소 : 배열 내부의 값

 

☑️ 배열 요소에 접근하기

배열[인덱스]

배열의 이름은 복수형으로 지음

 

☑️ 배열 요소 개수 확인하기

배열.length

 

☑️  배열 뒷부분에 요소 추가하기

 

⬇️push() 메소드 사용 (뒷부분에 요소 추가)

배열.push(요소)

 

⬇️인덱스 사용 (뒷부분에 요소 추가)

const fruits = ['사과', '배', '포도']

fruits[10] = '귤'
 
console.log(fruits)
(11) ['사과', '배', empty x 7, '귤']

// 배열 10번째 인덱스에 추가했으므로 4~9 인덱스는 비어있음


+ 이 방법을 활용하면 length 속성을 사용해 배열 마지막 위치에 요소 추가 가능

fruits[fruits.length] = '바나나'
-> fruits[3]에 '바나나' 추가한 셈

 

☑️ 배열 요소 제거하기

 

⬇️인덱스로 요소 제거

배열.splice(인덱스, 제거할 요소 개수)

splice는 요소 제거 뿐만 아니라 중간에 넣을 때도 사용

 

⬇️값으로 요소 제거

const 인덱스 = 배열.indexOf(요소) // indexOf로 특정 값의 위치 찾아 값 위치 추출
배열.splice(인덱스, 1) // 해당 요소 인덱스 출력하면 그 인덱스 요소 제거

// indexOf -> 배열 내부 요소가 있으면 인덱스 리턴, 없으면 -1 리턴

문자열의 indexOf 메소드는 문자열 내부에서 특정 문자열의 위치를 찾을 수 있다

 

☑️ 배열 특정 위치에 요소 추가하기

배열.splice(인덱스, 0, 요소)

2번째 매개변수 : 0을 입력하면 아무것도 제거하지 않음
3번째 매개변수 : 추가하고 싶은 요소 입력

 

☑️ 파괴적 처리, 비파괴적 처리

⬇️파괴적 처리

처리 후에 원본 내용이 변경됨 ex. 배열에 무언가를 추가하면 원본 배열이 바뀜

= 메모리를 절약할 수 있지만 원본이 사라지기 때문에 위험할 수 있음

 

⬇️비파괴적 처리

처리 후에 원본 내용이 변경되지 않음 ex. 문자열을 연결해도 원본 내용이 변경되지 않음

☑️ for in 반복문 (index를 가져올 때)

배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용한다.

const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']

for ( const i in todos) {
  console.log(`${i}번째 할 일: ${todos[i]})
}

// 위 i(반복 변수)에서는 요소의 인덱스들이 들어옴
배열 & 객체와 사용

 

☑️ for of 반복문 (value를 가져올 때)

배열 요소 개수만큼 반복이 일어난다.

for (const 반복 변수 of 배열 또는 객체) {
 문장
}

// 배열 & 객체와 사용

 

☑️ for 반복문 (특정 횟수만큼 반복하고 싶을 때)

for (let i = 0; i < 반복 횟수; i++) {
  문장
]

* (어디부터 ; 어디까지 ; 몇 씩 증가 & 감소)

// 다른 반복문과 다르게 반복 변수를 let으로 선언한다.

 

☑️ while 반복문

if 조건문과 비슷하지만 한 번 실행하고 끝나는 것이 아니라 계속해서 문장을 실행한다.

그러므로 조건을 거짓으로 만들 수 있는 내용이 문장에 포함되어 있어야 한다. (break 등 사용)

while (불 표현식) {
 문장
} break

 

☑️ break 키워드

switch 조건문이나 반복문을 벗어날 때 사용하는 키워드다.

while 반복문은 조건이 항상 참이므로 무한 반복하는데, break를 써야 빠져나올 수 있다.

 

☑️ continue 키워드

반복문을 탈출하지 않고 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동한다.

(건너뛴다)

 

☑️ 중첩 반복문 (반복문을 여러 겹 중첩해 사용하는 것)

1차원 배열 -> [1, 2, 3]

2차원 배열 -> ([1, 2, 3], [4, 5, 6])

 

이러한 n-차원의 배열 요소를 모두 확인하기 위해서는 반복문을 중첩해서 사용해야 한다.