[Javascript] 01)Basics

<script type="text/javascript" src="name.js"></script>

• 들여쓰기와 코드 불럭
  • JS는 2칸 들여쓰기 사용
  • 블럭은 if, for 함수에서 중괄호 내부를 말함
• 세미콜론
  • 세미콜론을 선택적으로 사용 가능
  • 없으면 ASI(Automatic Semicolon Insertion)에 의해 자동으로 삽입됨
• 주석

// comment
/*
multiple lines of comment
like this
*/

---

변수와 식별자

식별자 정의와 특징

• Identifier는 변수를 구분할 수 있는 변수명을 말함
• 식별자는 반드시 문자, $ 또는 밑줄로 시작
• 대소문자를 구분하며, 클래스명 외에는 모두 소문자로 시작
• 예약어 사용 불가능(for, if, function 등)

---

• camelCase: 변수, 객체, 함수에 사용
• PascalCase: 클래스, 생성자에 사용
• SNAKE_CASE: 상수(constants)에 사용

---

변수 키워드

1. let: 블록 스코프 지역 변수를 선언(추가로 동시에 값을 초기화)
2. const: 블록 스코프 읽기 전용 상수를 선언(추가로 동시에 값을 초기화)
3. var: 변수를 선언(추가로 동시에 값을 초기화)

• 선언(declaration): 변수를 생성하는 행위 또는 시점
• 할당(assignment): 선언된 변수에 값을 저장하는 행위 또는 시점
• 초기화(initialization): 선언된 변수에 처음으로 값을 저장하는 행위 또는 시점

let

• 재할당 가능 & 재선언 불가능
• 블록 스코프를 가짐

let number = 10
number = 20

const

• 재할당과 재선언이 불가능
• 블록 스코프를 가짐

const number = 10

---

데이터 타입

Primitive Type

1. Number
2. String
3. null
4. undefined
5. Boolean
6. Symbol

Reference Type

1. Object - 이름과 값을 가진 속성(property)들의 집합으로 이루어진 자료구조
2. Array - 여러 개의 값을 순서대로 저장하는 자료구조
3. function - 함수

객체(object)

• 객체는 속성의 집합이며, 중괄호 내부에 key와 value의 쌍으로 표현
• key
  • 문자열 타입만 가능
  • key 이름에 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 표현
• value
  • 모든 타입(함수 포함) 가능
• 객체 요소 접근
  • 점(.) 또는 대괄호([])로 가능
  • key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가능

// 객체 예시

const me = {
	name: 'An',
	contact: '01033333333',
	'apple products':{
		mobile: 'iphone SE',
		laptop: 'macbook Air',
	},
}

console.log(me.name)
console.log(me['name'])
console.log(me['apple products'])
console.log(me['apple products'].laptop)

배열(Array)

• 키와 속성들을 담고 있는 참조 타입의 객체
• 순서를 보장하는 특징이 있음
• 주로 대괄호를 이용하여 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능
• 배열의 길이는 array.length 형태로 접근 가능

함수(function)

• 참조 타입 중 하나로써 function 타입
• JS에서 함수를 정의 하는 방법은 주로 2가지로 구분
  • 함수 선언식(function declaration)
  • 함수 표현식(function expression)

함수 선언식

• 일반적인 프로그래밍 언어의 함수 정의 방식

function name(param){
// do something
}

함수 표현식

• 표현식 내에서 함수를 정의
• 함수의 이름을 생략한 익명 함수로 정의 가능

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

sub(7, 2) // 5

---

연산자

할당 연산자

• 오른쪽에 있는 피연산자의 평가 결과를 왼쪽 피연산자에 할당하는 연산자
• 다양한 연산에 대한 단축 연산자 지원
• Increment 및 Decrement 연산자
  • ++, —

비교 연산자

• 피연산자들을 비교하고 결과값을 boolean으로 반환하는 연산자
• 문자열은 유니코드 값을 사용하여 표준 사전 순서를 기반으로 비교
  • 소문자가 대문자보다 크고, 알파벳 순서상 후순위가 더 큼

동등 연산자(==)

• 두 연산자가 같은 값으로 평가되는지 비교 후 boolean 값을 반환
• 비교할 때 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교
• 두 피연산자가 모두 객체일 경우 메모리의 같은 객체를 바라보는지 판별
• 특별한 경우를 제외하고는 사용하지 않음

일치 연산자(===)

• 두 피연산자의 값과 타입이 모두 같은 경우 true를 반환
• 암묵적 타입 변환이 발생하지 않음 - 엄격한 비교가 이루어짐

논리 연산자

• &&, ||, !
• 단축 평가 지원
  • false && true ⇒ false
  • true || false ⇒ true

1 && 0 // 0
0 && 1 // 0
4 && 7 // 7
1 || 0 // 1
0 || 1 // 1
4 || 7 // 4

삼항 연산자(Ternary Operator)

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

true? 1:2
false? 1:2

const result = Maht.PI > 4? 'yep':'nope'
console.log(result) // nope

스프레드 연산자(Spread Operator)

• 배열이나 객체를 전개하여 각 요소를 개별적인 값으로 분리하는 연산자
• 주로 함수 호출 시 매개변수로 배열이나 객체를 전달할 때 사용
• 얕은 복사를 위해서도 사용

const numbers = [1,2,3]
const otherNumbers = [...numbers, 4, 5]
const copyNumbers = [...numbers] 

조건문

if statement

• if, else if, else
  • 조건은 소괄호(condition)안에 작성
  • 실행할 코드는 중괄호{}안에 작성
  • 블록 스코프 생성

const name = 'manager'

if(name ==='admin'){
	console.log('welcome, admin')
}else if(name==='manager'){
	console.log('welcome, manager')
}else{
	console.log('welcome!')
}

반복문

• while, for, for…in, for…of, Array.forEach

for

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

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

for … in

• 객체의 속성을 순회할 때 사용
• 배열도 순회가 가능하지만 인덱스 순으로 순회한다는 보장이 없으므로 권장하지 않음

const fruits = {a: 'apple', b:'banana'}
for(const key in fruits){
	console.log(key)
	console.log(fruits[key])
}

for … of

• 반복 가능한 객체를 순회할 때 사용
• 반복 가능한 객체의 종류: Array, Set, String 등

---

for…in은 속성 이름을 통해 반복(객체 순회 적합)

for…of는 속상 값을 통해 반복(Iterable 순회 적합)

• for … in 의 예시

// Array
const numbers = [10, 20, 30]
for(const number in numbers){
	console.log(number) // 0 1 2
}

// Object
const capitals = {
	korea: 'seoul',
	france: 'paris',
	japan: 'tokyo'
}
for(const capital in capitals){
	console.log(capital) // korea france japan
}

• for … of 의 예시

// Array
const numbers = [10, 20, 30]
for(const number of numbers){
	console.log(number) // 10 20 30
}

// Object
const capitals = {
	korea:'seoul',
	france:'paris',
	japan:'tokyo'
}
for(const capital of capitals){
	console.log(capital)
	// TypeError: capitals is not iterable
}

---

• Array.forEach()

Array.forEach(function(params){
	// 배열이 가진 각 요소를 순회하면서 함수를 실행
	// 아래에 실행할 코드 작성
})

// 예시

const numbers = [1,2,3]
numbers.forEach(function(element){
	console.log(element)
})
// 1
// 2
// 3