JavaScript 기초

변수와 식별자

• 식별자는 반드시 문자, $ 또는 _로 시작
• 대소문자를 구분하며, 클래스명 외에는 모두 소문자로 시작
• 예약어 사용 불가능

 

식별자의 정의

 

1) 카멜 케이스 : 변수, 객체, 함수에 사용

// 변수
let dog
let variableName

// 객체
const userInfo = { name:'Yuna', age:23 }

// 함수
function solve(){}

2) 파스칼 케이스 : 클래스, 생성자에 사용

// 클래스
class User {
  constructor(options) {
    this.name = options.name
  }
}


// 생성자 함수
function User(options) {
  this.name = options.name
}

3) 스네이크 케이스 : 상수에 사용 (개발자의 의도와 상관없이 변경될 가능성이 없는 값)

// 값이 바뀌지 않을 상수
const API_KEY = 'my-key'
const PI = Math.PI

// 재할당이 일어나지 않는 변수
const NUMBERS = [1, 2, 3]

 

 

 

변수 선언 키워드

 

1. let : 블록 스코프 지역 변수를 선언 (동시에 값을 초기화)

- 재할당 가능 & 재선언 불가능

 

2. const : 블록 스코프 읽기 전용 상수를 선언 (동시에 값을 초기화)

- 재할당 불가능 & 재선언 불가능

 

3. var : 변수를 선언 (동시에 값을 초기화)

- 재할당 가능 & 재선언 가능

 

-> 변수 선언시 키워드중 하나를 사용하지 않으면 자동으로 var로 선언됨!!

 

	재선언	재할당	스코프
let	X	O	블록스코프
const	X	X	블록스코프
var	O	O	함수스코프

 

[참고]

hoisting

: 변수를 선언 이전에 참조할 수 있는 현상

 

var로 선언된 변수는 선언 이전에 참조할 수 있으며 이러한 현상을 호이스팅이라 함

console.log(name)

var name = '유나'

-> 코드의 논리적인 흐름을 깨뜨리는 행위! 즉, var는 쓰지 않아,,

 

 

 

 

 

데이터 타입

- 크게 원시 타입과 참조 타입으로 분류

 

 

1. Number

: 정수 또는 실수형 숫자를 표현하는 자료형

const a = 11
const b = -2
const c = 3.14   // 실수형 숫자 표현
const d = 2.94e7  // 2.94 * 10^7
const e = Infinity
const f = -Infinity
const g = NaN  // Not a Number

 

"NaN"

: 숫자가 아님을 나타냄

- 주어진 값의 유형이 Number이고 NaN이면 True, 아니면 False를 반환

 

NaN을 반환하는 경우

1. 숫자로서 읽을 수 없음

2, 결과가 허수인 수학 계산식

3. 피연산자가 NaN

4. 정의할 수 없는 계산식

5. 문자열을 포함하면서 덧셈이 아닌 계산식

 

 

2. String

: 문자열을 표현하는 자료형

- 큰 따옴표, 작은 따옴표 모두 가능

- 덧셈을 통해 문자열을 붙일 수 있음

 

* Template Literal을 사용하면 줄 바꿈이 되며, 문자열 사이에 변수도 삽입 가능

== "python의 f-string"

- Backtick을 이용!! 

const age = 26

const tell = `영희는 ${표현식}세 입니다.`

 

 

3. Empty Value

: 값이 존재하지 않음을 표현하는 값으로 null 과 undefined 가 존재

 

1) null  : 값이 없음을 의도적으로 표현할 때 사용

let lastName = null
console.log(lastName)  // 의도적으로 값이 없음을 표현

2) undefined :  값이 정의되어 있지 않음을 표현하는 값

let firstName           // 선언만 하고 할당하지 않음
console.log(firstName)  // undefined

 

 

 

4. Boolean

: 참과 거짓을 표현하는 값

- 조건문 또는 반복문에서 boolean이 아닌 데이터 타입은 자동 형변환!

 

ToBoolean Conversions

데이터 타입	False	True
undefined	항상 거짓	X
null	항상 거짓	X
Number	0, -0, NaN	나머지 모든 경우
String	빈 문자열	나머지 모든 경우
Object	X	항상 참

 

 

 

 

연산자

1. 할당 연산자

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

 

* Increment 및 Decrement 연산자

: += 또는 -= 와 같이 분명한 표현으로 적을 것을 권장

 

 

2. 비교 연산자

: 피연산자들을 비교하고 결과값을 boolean으로 변환하는 연산자

- 알파벳 순서상 후순위가 더 크다

- 소문자가 대문자보다 더 크다

 

 

3. 동등 연산자 (==)

: 두 피연산자가 같은 값으로 평가되는지 비교 후  boolean 값을 반환

• 비교할 때 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교
• 두 피연산자가 모두 객체일 경우 메모리의 값은 객체를 바라보는지 판별

const a = 1
const b = '1'

console.log(a == b) // True
console.log(a == True) // True

// 자동 형변환 예시
console.log(5 * null)    // 0
console.log('5' - 1 )    // 4
console.log('5' + 1 )    // '51'
console.log('five' * 2 ) // NaN

 

4. 일치 연산자 (===)

: 두 피연산자의 값과 타입이 모두 같은 경우 True 반환

• 같은 객체를 가리키거나, 같은 타입이면서 같은 값인지를 비교
• 엄격한 비교가 이뤄지며 암묵적 타입 변환이 발생하지 않음

const a = 1
const b = '1'

console.log(a === b)   // False
console.log(a === Number(b))  // True

 

5. 논리 연산자

: and 연산은 '&&' 연산자, or 연산은 '||', not 연산은 '!' 연산자

 

* 단축 평가 지원

ex) False && True => False

ex) True || False => True

 

 

 

6. 삼항 연산자

: 3개의 피연산자를 사용하여 조건에 따라 값을 반환하는 연산자

- 가장 앞의 조건식이 참이면 : 앞의 값이 반환, 그 반대일 경우 : 뒤의 값이 반환

- 삼항 연산자의 결과 값은 변수에 할당 가능

true ? 1 : 2   // 1
false ? 1 : 2  // 2

const result = Math.PI > 4 ? 'Y' : 'N'
cosole.log(result)   // N

 

 

 

 

조건문

1. if statement

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

const name = '조승우'

if (name == 'admin') {
  console.log('관리자님 안녕하세요.')
} else if (name === '조승우') {
  console.log('조승우님 안녕하세요.')
} else {
  console.log(`$[name}님 안녕하세요.')
}

 

 

2. switch statement

: 표현식의 결과값을 이용한 조건문

- 표현식의 결과값과 case문의 오른쪽 값을 비교

-break문이 없는 경우 break문을 만나거나 default문을 실행할 때 까지 다음 조건문 실행

const name = '조승우'

switch(name) {
  case '조승우' : {
  	console.log('조승우님 환영합니다')
    break
  }
  case '고동만' : {
  	console.log('고동만님 환영합니다')
    break
  }
  default: {
  	console.log(`${name}님 환영합니다`)
  }
}

- > 조건이 많은 경우 switch문을 통해 가독성 향상 기대

- > 일반적으로 중첩 else-if문은 유지보수가 어려운 문제도 있음

 

 

 

 

 

반복문

 

1. while

: 조건이 참이기만 하면 문장을 계속해서 수행

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

 

2. for

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

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

 

3. for...in

: 객체의 속성을 순회할 때 사용

- 배열도 순회 가능하지만 인덱스 순으로 순회한다는 보장이 없으므로 권장하지 않음

for (variable in object) {
  statements
}

 

4. for...of

: 반복 가능한 객체를 순회할 때 사용

- 반복 가능한 객체의 종류 : Array, Set, String 등

for (variable in object) {
  statements
}

const numbers = [0, 1, 2, 3]

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

 

* for...in과 for...of 의 차이점

=> for..in은 속성 이름을 통해 반복 for...of는 속성 값을 통해 반복!!

=> for..in은 객체 순회에 적합 반복 for...of는 iterable 순회 적합!!

 

 

[참고]

일반적인 for문의 경우에는 최초 정의한 i를 재할당 하면서 사용하기 때문에 const를 사용하면 에러 발생

-> 다만 for..in, for...of 의 경우에는 재할당이 아니라, 매 반복 시 해당 변수를 새로 정의하여 사용하므로 에러가 발생하지 않음

 

 

 

함수

 

함수의 정의

- JavaScript 에서 함수를 정의하는 방법은 주로 두가지로 구분됨

1) 함수 선언식    2) 함수 표현식

 

 

함수 선언식

function 함수명() {
  // do something
}

function add(num1, num2) {
  return num1 + num2
}

console.log(add(3, 7))  // 10

 

 

함수 표현식

: 표현식 내에서 함수를 정의하는 방식

 

함수 표현식은 함수의 이름을 생략한 익명 함수로 정의 가능

변수키워드 함수명 = function () {
  // do something
}

const sub = function (num1, num2) {
  return num1 - num2
} 

console.log(sub(10, 3))

 

* 기본인자

: 인자 작성 시 '=' 문자 뒤 기본 인자 선언 가능

const greeting  = function (name='Anonymous') {
  return `Hi ${name}`
}

console.log(greeting())

 

* 매개변수와 인자의 개수 불일치 허용

1) 매개변수보다 인자의 개수가 많을 경우

const noArgs = function () {
  return 0
}

noArgs(1, 2)   // 0

const twoArgs = function (num1, num2) {
  return [num1, num2]
}

noArgs(1, 2, 3, 4)   // [1, 2]

2) 매개변수보다 인자의 개수가 적을 경우

const threeArgs = function (num1, num2, num3) {
  return [num1, num2, num3]
}

threeArgs()        // [undefined, undefined, undefined]
threeArgs(1)       // [1, undefined, undefined]
threeArgs(1, 2)    // [1, 2, undefined]

 

 

Spread syntax (전개 구문)

: 배열이나 문자열과 같이 반복 가능한 객체를 배열의 경우는 요소, 함수의 경우는 인자로 확장 가능

 

1. 배열과의 사용

let part = ['apple', 'orange']
let friuts = ['grape', ...part, 'peach']
// ['grape', 'apple', 'orange', 'peach']

2. 함수와의 사용

- The rest parameter syntax를 사용하여 정해지지 않은 수의 매개변수를 배열로 받을 수 있음

const restArr = function (num1, num2, ...restNums) {
  return [num1, num2, restNums]
}

restNums(1, 2, 3, 4, 5)    // [1, 2, [3, 4, 5]]
restNums(1, 2)             // [1, 2, []]

 

 

 

 

선언식과 표현식

 

함수의 타입

- 선언식 함수와 표현식 함수 타입은 모두 function으로 동일

 

 

호이스팅

* 함수 선언식으로 정의한 함수는 호이스팅 발생

-> 즉, 함수 호출 이후에 선언해도 동작

 

* 반면 함수 표현식으로 선언한 함수는 함수 정의 전에 호출 시 에러 발생

-> 함수 표현식으로 정의된 함수는 변수로 평가되어 변수의 scope 규칙을 따름

= Airbnb Style Guide 권장 방식!!

 

 

Arrow Function (화살표 함수)

"함수를 비교적 간결하게 정의"

 

- function 키워드와 중괄호를 이용한 구문을 짧게 사용하기 위해 탄생

• function 키워드 생략 가능
• 함수의 매개변수가 하나뿐이라면 '( )' 도 생략 가능
• 함수의 내용이 한 줄이라면 '{ }' 와 'return'도 생략 가능

- 화살표 함수는 항상 익명 함수 : == 함수 표현식에서만 사용 가능

const greeting1  = function (name='Anonymous') {
  return `Hi ${name}`
}

// 1. function 키워드 삭제
const greeting2 = (name) => { `Hi ${name}` }
// 2. 인자가 1개일 경우에는 소괄호 삭제
const greeting3 = name => { `Hi ${name}` }
// 3. 함수 바디가 한 줄일 경우에는 {}, return 삭제
const greeting4 = name => `Hi ${name}`

-> 명확성과 일관성을 위해 소괄호는 포함하는 것을 권장한다.

 

 

 

 

즉시 실행 함수

: 선언과 동시에 실행되는 함수

- 함수의 선언 끝에 '( )' 를 추가하여 선언되자 마자 실행하는 형태

- '( )' 에 값을 넣어 인자로 넘겨줄 수 있음

function (num) {return num ** 3}
  
(num) => { return num ** 3 }

// 즉시 실행 함수
((num) =>  num ** 3)(2)

 

 

 

 

오늘부터 자바스크립트! 

- 과제 먼저 끝내기!

- 복습하고 블로그 작성하기,,(밀리지않기)

- 테스트 대비 알고리즘 1문제씩 풀기

- 하루 중 한시간은 홈트 또는 빨리 걷기

- 조만간 꼭 붕어빵 사먹으러 가기