JavaScript 기초 문법 : 간단요약 한번에 정리하기

※ 공부한 내용을 복습 및 정리한 내용입니다. 잘못된 내용이 있다면 꼭 알려주세요!

---

[ 데이터 타입 확인하기 ]

console.log(typeof 'Hello')  //string
console.log(typeof 123)  //number
console.log(typeof true)  //boolean
console.log(typeof undefined)  //undefined
console.log(typeof null)  //object
console.log(typeof {} )  //object
console.log(typeof [] )  //object

→ typeof를 통해 해당 데이터의 종류를 알 수 있다.

 

[ 삼항 연산자 (ternary operator) ]

 const a = 1 < 2
 
 if (a) {
 	console.log('참')
 } else {
 	console.log('거짓')
 }
 
 // ? 앞의 항이 참이면 : 앞의 항이 출력 → 즉,  a가 참이면 '참'이 출력된다
 // ? 앞의 항이 거짓이면 : 뒤의 항이 출력 → 즉, a가 거짓이면 '거짓'이 출력된다
 console.log (a ? '참' : '거짓')

 

[ 조건문 (If statement) ]

// random함수 : 0~9까지의 정수가 나옴
function random() {
  return Math.floor(Math.random() * 10)
}

const a = random()

// if (조건문) { 조건문에 해당하면 안의 코드 실행 }
// else { 위의 조건문에 모두 적합하지 않다면 else 실행 }

if (a === 0) { 
  console.log('a is 0')
} else if (a === 2) {
  console.log('a is 2')
} else {
  console.log('rest...')
}

 

 

[ 스위치문 (switch) ]

// random함수 : 0~9까지의 정수가 나옴
function random() {
  return Math.floor(Math.random() * 10)
}

const a = random()

switch (a) {
  case 0:
    console.log('a is 0')
    break //하나의 케이스가 끝나면 아래의 케이스들이 실행되지 않도록 반드시 break를 작성해야함
  case 2:
    console.log('a is 2')
    break
  case 4: 
    console.log('a is 4')
    break
  // if문의 else와 같은 개념으로 결국에는 마지막에 실행되는 개념이기 때문에 break가 필요없음
  default:
    console.log('rest...')
 }

=> if문의 어떠한 변수가 특정한 값으로 딱 떨어지는 조건으로 분기처리를 하고 있다면 그땐 switch문이 더 적합함

 

[ 반복문 (For statement) ]

// for ( 시작조건 ; 종료조건 ; 변화조건 ) { }
// 종료조건에 false가 나오는 순간 반복문이 종료됨

const ulEl = document.querySelector('ul')

// [ 아래의 예제 설명 ]
// i=0으로 시작해서 종료조건에 맞으면 {}안의 코드를 실행한 후 변화조건을 통해 i=1이 된다.
// 변화조건을 거친 i가 종료조건에 맞으면 다시 {}안의 코드를 실행한다.
// 이 과정을 반복하다가 종료조건과 맞지 않는 순간 반복문은 종료된다.
// 종료조건에 부합하면 true, 부합하지 않으면 false가 반환된다.
for ( let i = 0 ; i < 3 ; i += 1 ) {
  const list = document.createElement('li') //li태그를 생성
  list.textContent = `list-${i + 1}` //생성한 li태그의 내용으로 들어갈 내용
  ulEl.appendChild(list) //ul태그의 자식태그로 생성된 li태그를 형성
}

 

☆ var,let,const의 차이점

// var는 유연한 변수선언으로 변수를 한번 더 선언했음에도 콘솔에는 각자 다른 값이 나옴
var name = 'abc'
console.log(name)  //abc

var name = 'lisa'
console.log(name)  //lisa

 

// 아래와 같은 상황에서 기존에 있던 변수를 재선언했기 때문에 
// name이라는 변수가 이미 선언되었다는 에러메세지가 뜨게 된다.
// 즉, let은 변수 재선언이 불가능하다.
let name = 'abc'
console.log(name)  //abc

let name = 'lisa'
console.log(name)  //Uncaught SyntaxError: Identifier 'name' has already been declared
--------------------------------------------
// 하지만 기존에 있던 변수의 값을 재할당하는 것은 가능하다.
let name = 'abc'
console.log(name)  //abc

name = 'lisa'
console.log(name)  //lisa

// 아래와 같은 상황에서도 기존에 있던 변수를 재선언했기 때문에 에러메세지가 뜨게 된다.
// 즉, cosnt도 변수 재선언이 불가능하다.
const name = 'abc';
console.log(name);  //abc

const name = 'lisa'
console.log(name)  //Uncaught SyntaxError: Identifier 'name' has already been declared
--------------------------------------------
// const는 하나의 변수에 하나의 값만 지정할 수 있다. 
// 즉, const는 변수 재할당이 불가능하다.
const name = 'abc'
console.log(name)  //abc

name = 'lisa'
console.log(name)  //Uncaught TypeError: Assignment to constant variable.

[ 변수 유효범위 (Variable Scope) ]

// 아래의 예제를 통해 var로 변수 선언을 했을 경우 각각의 콘솔출력 위치에 따라 나타나는 결과를 알아보자
function scope() {
	// console.log(a) = undefined
	if(true) {
	  // console.log(a) = undefined
	  var a = 123
	  // console.log(a) = 123
	}
	// console.log(a) = 123
}

scope()

// 이렇게 var는 함수 범위의 유효범위를 가진다. 
// 그만큼 메모리를 차지하고 의도하지 않은 범위에서 이 변수가 사용될 수 있다.

// 아래의 예제를 통해 const로 변수 선언을 했을 경우 각각의 콘솔출력 위치에 따라 나타나는 결과를 알아보자
function scope() {
	// console.log(a) = Uncaught ReferenceError: a is not defined at scope
	if(true) {
	  // console.log(a) = Uncaught ReferenceError: Cannot access 'a' before initialization
	  const a = 123
	  // console.log(a) = 123
	}
	// console.log(a) = Uncaught ReferenceError: a is not defined at scope
    
scope()

// 이렇게 let과 const는 그 변수가 선언되어져 있는 특정한 블록내부가 하나의 유효범위가 된다.

 

[ 형 변환 (Type conversion) ]

const a = 1
const b = '1'

// ===는 일치 연산자로 모든 것이 일치해야 하는 정확한 비교 연산자이다.
console.log(a === b)  //false
// ==는 비교 연산자로 형 변환이 일어나고 내용이 같기 때문에 true가 나온다.
console.log(a == b)   //true

---

[공부에 사용한 자료]

패스트캠퍼스 자바스크립트 강의

블로그

https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90