[JavaScript] 문법

유얌얌·2023년 10월 24일

JavaScript

목록 보기

1/30

자바스크립트 문법 공부하기
- 자바스크립트 스타일 가이드

🍀 변수

식별자(변수명) 작성 규칙

대소문자를 구분

카멜 케이스(camelCase)
- 변수, 객체, 함수에 사용
파스칼 케이스(Pascal)
- 클래스, 생성자에 사용
대문자 스네이크 케이스(SNAKE_CASE)
- 상수(constants)에 사용

⭐ 변수 선언 키워드

변수를 선언하는 것과 할당하는 것을 따로해야함

let
- 블록 스코프(block scope)를 갖는 지역 변수를 선언 (블록 : 중괄호, 중괄호 사이의 영역)

재할당 가능
재선언 불가능
초기값없이 선언 가능(undefined)
ES6에서 추가

		let number = 10 // 선언 및 초기값 할당
   			number = 20 // 재할당
		let number = 30 // 재선언 불가능
   			let abc  // 초기값 없이 선언 가능 undefiend

const
- 블록 스코프를 갖는 지역 변수를 선언
- 재할당 불가능
- 재선언 불가능
- 초기값없이 선언 불가능
- ES6에서 추가

    	const array = [1, 2, 3]
        array[0] = 100
        console.log(array) // [100, 2, 3] array의 주소를 할당한 것이기 때문에 가능

		array = [101, 2, 3] // 이건 불가

블록 스코프

블록 스코프
- if, for, 함수 등의 '중괄호({}) 내부'를 가리킴
- 블록 스코프를 가지는 변수는 블록 바깥에서 접근 불가능 (큰 곳에서 작은 곳으로는 못와)
- 지역변수에 없으면 상위에서 변수를 찾긴함(권장x)

변수 선언 키워드 정리

기본적으로 const 사용을 권장
재할당이 필요한 변수는 let으로 변경해서 사용
=> const를 쓰다가 재할당이 필요하면, 그 때 let으로 변경

🍀 데이터 타입

데이터 타입

데이터 타입
1. 원시 자료형 (Primitive type)
- Number, String, Boolean, undefined, null
2. 참조 자료형 (Reference type)
- Objects (Object(파이썬에서의 딕셔너리같은 타입, 타입의 이름이 object), Array, Function)
- object는 순서X
원시 자료형 : 변수에 값이 직접 저장되는 자료형
- 불변, 값이 복사
- 변수에 할당될 때 값이 복사됨
- 변수 간에 서로 영향을 미치지 않음
- a와 b가 서로 관계가 없음 a의 값만 b에 할당한 것

    const bar = 'bar'
    console.log(bar) // bar

    bar.toUpperCase()  // 이때만 반환
    console.log(bar)  // bar

    let a = 10
    let b = a
    b = 20
    console.log(a) // 10
    console.log(b) // 20

참조 자료형 : 객체의 주소가 저장되는 자료형
- 가변, 주소가 복사
- 객체를 생성하면 객체의 메모리 주소를 변수에 할당
- 원본 데이터의 주소를 복사해서 바꿈
- 변수 간에 서로 영향을 미침

    const obj1 = { name: 'Alice', age: 30 }
    const obj2 = obj1  // obj1의 주소를 obj2에 할당해준 것
    obj2.age = 40

    console.log(obj1.age)  // 40
    console.log(obj2.age)  // 40

원시 자료형

Number
- 정수 또는 실수형 숫자를 표현하는 자료형
- NaN : Not a Number 숫자가 아님
- typeof(NaN) // number

	const a = Infinity
    const b = -Infinity
    const c = NaN

String
- 텍스트 데이터를 표현하는 자료형
- '+' 연산자를 사용해 문자열끼리 결함
- 더하기만 가능

	const firstName = 'Tony'
    const lastName = 'Stark'
    const fullName = firstName + lastName
    
    console.log(fullName)  // TonyStart

Template literals (템플릿 리터럴)
- 내장된 표현식을 허용하는 문자열 작성방식
- 파이썬에서의 f-string과 같은
- Backtick(``)을 이용하며, 여러 줄에 걸처 문자열을 정의 할 수 있고 JavaScript의 변수를 문자열 안에 바로 연결할 수 있음
- 표현식은 '${expression}'으로
- ES6+ 부터 지원

    const age = 100
    const message = `홍길동은 ${age}세 입니다`
    console.log(message)  // 홍길동은 100세입니다.

null과 undefined
- null
  변수의 값이 없음을 의도적으로 표현할 때 사용
  타입이 'object' (자바스크립트의 설계실수)
- undefined
  변수 선언 이후 직접 값을 할당하지 않으면, 자동으로 할당됨
  타입이 'undefined'
  - 숫자를 할당해주지않으면, 계산할때 undefined라서 계산 값이 NaN이 됨

	let a = null
    console.log(a) // null

	let b 
    console.log(b) // undefined

Tip javascripte에 type을 알아보는법
- typeof 알고싶은 변수
```
typeof()
```

Boolean
- 조건문 또는 반복문에서 Boolean이 아닌 데이터 타입은 자동 형변환 규칙에 따라 true 또는 false로 변환됨
- true / false 소문자
자동 형변환

데이터 타입	false	true
undefiend	항상 false	X
null	항상 false	X
Number	0, -0, NaN	나머지 모든 경우
undefiend	빈 문자열	나머지 모든 경우

🍀 연산자

할당 연산자

오른쪽에 있는 피연산자의 평가 결과를 왼쪽 피연산자에 할당하는 연산자
단축 연산자 지원

    let a = 0
    a += 10
    console.log(a) // 10

    a *= 10
    console.log(a) // 100

증가 & 감소 연산자

증가 연산자(++)
- 피연산자를 증가 (1을 더함)시키고 연산자 위치에 따라 증가하기 전이나 후의 값을 반환
감소 연산자 (--)
- 피연산자를 감소(1을 뺌) 시키고 연산자의 위치에 따라 감소하기 전이나 후의 값을 반환

➡️ +=또는 -=와 같이 더 명시적인 표현으로 작성하는 것을 권장

비교 연산자

피연산자들(숫자, 문자, Boolean 등)을 비교하고 결과 값을 boolean으로 반환하는 연산자

    3 > 2 // true
    'Z' > 'a' // true
    '가' < '나' // true

동등 연산자 (==)

== 두개짜리는 값만 일치하면 돼, 타입은 자동 변환
두 피 연산자가 같은 값으로 평가되는지 비교 후 boolean 값을 반환
암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교
- boolean([]) // 빈 어레이는 true로 나옴
- boolean({}) // 빈 객체도 true
두 피연산자가 모두 객체일 경우 메모리의 같은 객체를 바라보는지 판별

    console.log('1' == 1)  // true
    console.log(0 == false)  // true

일치 연산자 (===)

암묵적 타입 변환을 진행하지 않음
그래서 기본적으로 일치 연산자 사용 권잔
두 피연산자의 값과 타입이 모두 같은 경우 true를 반환
같은 객체를 가리키거나, 같은 타입이면서 같은 값인지를 비교

    console.log('1' == 1)  // false
    console.log(0 == false)  // false

논리 연산자

and 연산
- &&
or 연산
- ||
not 연산
- !
- !=, !==
단축 평가 지원

	// 단축평가의 결과가 반환되는 것
	1 && 0  // 0
	4 && 7 // 7
	1 || 0 // 1
	4 || 7 // 4

🍀 조건문

if

조건 표현식의 결과값을 boolean 타입으로 변환 후 참/거짓을 판단

    const name = 'customer'
    
    if (name === 'admin') {
      console.log('1')
    } else if (name === 'customer') {
      console.log('2')
    } else {
      console.log('3')
    }

    // 조건 연산자
    const person = 100
    if (person > 17) {
      return 'Yes'
    } else {
      return 'No'
    }

    // person > 17 ? 'Yes' : 'No'

조건 (삼항) 연산자
- 세 개의 피연산자를 받는 유일한 연산자
- 앞에서부터 조건문, 물음표, 조건문이 참일 경우 실행할 표현식, 세미콜론(;), 조건문이 거짓일 경우 실행할 표현식이 배치

🍀 반복문

while

조건문이 참이면 문장을 계속해서 수행

	while (조건문) {
      // do something
    }

예시

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

for

특정한 조건이 거짓으로 판별될 때까지 반복

	for ([초기문]; [조건문]; [증감문]) {
      // do something
    }

예시

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

for 동작 원리
1. 반복문 진입 및 변수 i 선언
2. 조건문 평가 후 코드 블럭 실행
3. 코드 블럭 실행 이후 i값 변경
4. 2<->3을 반복

for ... in

객체의 열거 가능한 속성(property)에 대해 반복 (자바스크립트의 key)

	for (variable in object) {
      statement
    }

    // for ... in
    const fruits = {
      a: 'apple', 
      b: 'banana'
    }

    for (const property in fruits) {
      console.log(property) // a b
      console.log(fruits[property]) // apple banana
    }

Object(객체)에서만 사용
객체의 특징 key : value 가 있음
- Object는 순서가 없는 배열 느낌
- Array의 key는 인덱스(순서가 정수인)임 (배열도 근본이 객체라는 뜻, typeof해보면 object나옴)
- 배열의 속성값은 인덱스
- 근데 Array의 인덱스를 뽑고 싶을 때, for ... in 을 쓴다? -> 안됨
왜냐하면, 특정 순서에 따라 인덱스를 반환하는 것을 보장할 수 없음 (순서가 없으니까 in은 = 배열의 반복자 대신 속성 열거를 사용하기 때문에)
⭐ 인덱스의 순서가 중요한 배열에서는 사용하지 않음
⭐ 배열에서는 for 반복, for ... of 반복을 사용

object에서 key, value값을 출력하는 법

    const foods = {
      fruit: 'banana',
      drink: 'juice',
      snack: 'kitkat'
    }
    
    for (food in foods) {
      console.log(food)   // fruit, drink, snack (key값만 출력됨)
      console.log(foods[food])  // value값만 출력됨
      console.log(`${food} : ${foods[food]}`)
    }

for ... of

반복 가능한 객체(순서가 있는 : 배열, 문자열 등)에 대해 반복 (반복 가능한 객체 -> 순서가 있음=인덱스)
iterable

	for (variable in object) {
      statement
    }

	// for ... of
    const numbers = [0, 1, 2, 3]

    for (const number of numbers) {
      console.log(number)  // 0, 1, 2, 3
    }

	// for ... of, for ... in
    const numbers2 = ['a', 'b', 'c', 'd']

    for (const number of numbers2) {
      console.log(number)  // a, b, c, d
    }

    for (const number in numbers2) {
      console.log(number)  // 0, 1, 2, 3 
    }

객체가 for ... of 를 사용한다면, TypeError가 발생함

반복문 사용 시 const 사용 여부

for 문
- for(let i = 0; i < arr.length; i++) {...} 의 경우에는 최초 정의한 i를 재할당 하면서 사용하기 때문에, const를 사용하면 에러 발생
for ... in, for ... of
- refresh 느낌
- 재할당이 아니라, 매 반복마다 다른 속성 이름이 변수에 지정되는 것이므로 const를 사용해도 에러가 발생하지 않음
- 단, const 특징에 따라 블록 내부에서 변수를 수정할 수 없음

반복문 종합

키워드	연관 키워드	스코프
while	break, continue	블록 스코프
for	break, continue	블록 스코프
for...in	break, continue, object 순회	블록 스코프
undefiend	break, continue, iterable 순회	블록 스코프

🍀 참고

세미콜론 (semicolon)
- 자바스크립트는 세미콜론을 선택적으로 사용 가능
- 세미콜론이 없으면 ASI에 의해 자동으로 세미콜론이 삽입됨
- ASI(Automatic Semicolon Insertion, 자동 세미콜론 삽입 규칙)
변수 선언 키워드 - 'var'
- ES6 이전에 변수 선언에 사용했던 키워드
- 재할당 가능 & 재선언 가능
- "호이스팅" 되는 특성으로 예기치 못한 문제 발생 가능
  - 따라서 ES6 이후부터는 var 대신 const와 let을 사용하는 것을 권장
- 함수 스코프를 가짐
  - 블록 스코프가 아니라 function scope를 가짐
  - 반복문, 조건문의 중괄호를 쓰는 영영들은 전부 다 글로벌 스코프(전역)으로 침, 함수 영역만 따로
- 변수 선언 시 var, const, let 키워드 중 하나를 사용하지 않으면 자동으로 var로 선언됨

함수 스코프 (function scope)
- 함수의 중괄호 내부를 가리킴
- 함수 스코프를 가지는 변수는 함수 바깥에서 접근 불가능
호이스팅 (hoisting)
- 변수를 선언 이전에 참조할 수 있는 현상
- 변수 선언 이전의 위치에서 접근 시 undefined를 반환
- 변수 선언만 뒤에서 가져오고, 변수의 값은 가져오지않음
- JavaScript에서 변수들은 실제 실행시에 코드의 최상단으로 끌어 올려지게 되며 (hoisted) 이러한 이유 때문에 var로 선언된 변수는 선언 시에 undefined로 값이 초기화 되는 과정이 동시에 발생

	console.log(name)  // undefined => 선언 이전에 참조
	var name = '홍길동' //  선언

NaN을 반환하는 경우 예시
- 숫자로서 읽을 수 없음
- 결과가 허수인 수학 계산식
- 피연산자가 NaN (7**NaN)
- 정의할 수 없는 계산식 (0 * Infinity)
- 문자열을 포함하면서 덧셈이 아닌 계산식

유얌얌

조금씩이라도 꾸준하게

다음 포스트