[Java 풀스택 과정 강의] 1월 7일차

※ TIL와는 별개로 적는 개인 개발 일지라서 말은 좀 편하게하는 페이지입니다.
일지이기 때문에 일기의 성격이 더 강합니다.

 

 

오늘부터는 본격적인 JavaScript에 대한 공부가 있다. 이론적인 이야기는 TIL에서 다룰 예정이니, 실질적인 코드 위주로 내용을 다룰 예정이다. 어째 갈수록 일기 자체보다는 내용 복습의 성격이 강해지고 있다. 그러려고 쓰는 건 맞지만 어째 점점 내용이 늘어나고 있다…🤣 이 때문에 일지가 좀 밀렸다. 숙제 밀린 기분이 되었는데, 월요일 전까지는 전부 완료할 예정이다.

 

1월 7일자는 기초적인 JS에 대해서 배웠다. 연산이나 if문 같은 것들. 간단히 복습한다.

 

간단히 사용되는 함수들

/** 출력 **/
alert('내용'); //경고창 출력
console.log('내용'); //콘솔창에 출력
document.write('내용'); //문서에 내용 출력

/** 입력 **/
confirm('내용','기본값'); //true or false 값을 입력 받음
prompt('내용'); //문자열(string)을 입력 받음
getElementsByTagName() //해당 태그명에 접근
getElementsById() //해당 아이디명에 접근

 

 

변수 사용

변수는 var, const, let 세 가지가 있다. 각 변수는 메모리 내에 저장되어 불러와진다. 전역변수와 지역변수로 나눌 수 있다. 관련 정리가 많지만 한 차례 더 정리해본다.

선언 키워드	var	let	const
스코프	함수 스코프	블록 스코프	블록 스코프
재선언	가능	불가능	불가능
재할당	가능	가능	불가능
호이스팅	가능(undefined)	Temporal Dead Zone	Temporal Dead Zone
전역 객체 속성	가능	불가능	불가능
비고	최근엔 잘 쓰이지 않음	바뀌는 값에 할당	보안상 상수값에 할당

 

이론적인 정리를 추가한다.

 

스코프Scope

스코프란, 변수를 사용할 수 있는 범위를 의미한다. 전역(Global)과 함수(Function) 그리고 블록(Block) 스코프 정도로 표현할 수 있겠다.

 

· 전역 스코프

전역의 경우 선언 키워드를 붙이지 않는 경우, 혹은 함수 가장 바깥에 붙였을 경우(전역 변수 범위)에는 전역 변수가 된다.

 

· 함수 스코프

함수 내에서 작용되는 지역 변수를 의미한다. 함수 내에서 지정하며, function(){} 이내에서만 효과를 발휘한다.

 

· 블록 스코프

블록 내에서 작용되는 지역 변수를 의미한다. {} 이내에서만 효과를 발휘한다.

 

이들을 정리하면 다음과 같은 코드블록으로 나타낼 수 있다.

let x = 'hi'; // 전역변수

function test() {
   y = 10; // 전역변수
   if(y = 10) {
     var z = 20; //지역 변수, 함수 스코프
     let w = 30; //지역 변수, 블록 스코프
   }
     console.log(x); //전역 변수이기 때문에 값이 나타남   
     console.log(z); //함수 스코프이기 때문에 값이 나타남
     console.log(w); //블록 스코프이기 때문에 값이 나타나지 않음.    
}

console.log(y); //전역 변수이기 때문에 함수 안에 있어도 값이 나타남

 

 

재선언

재선언이란 같은 변수명으로 다시 선언하는 것을 의미한다. 즉, let a = 0; 아래에 let a = 2;를 다시 선언할 수는 없다는 것이다.

var a = 1;
var a = 'A'; // 재선언이 가능하다.

let b = 2;
let b = 'B'; // 재선언이 불가능하다.

const c = 3;
const c = 'C'; // 재선언이 불가능하다.

 

 

재할당

재할당이란 같은 변수의 값을 다시 할당하는 것을 의미한다. 즉, let a = 0, a = 2는 가능하나, const a = 0, a = 2는 불가능하다.

var a = 1;
a = 2; // 재할당이 가능하다.

let b = 2;
b = 3; // 재할당이 가능하다.

const c = 3;
c = 4; //재할당이 불가능하다.

 

 

호이스팅

호이스팅이란, 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것이다. 선언은 뒤에서 했으나 선언 전에 변수를 사용하는 것을 의미한다. var의 경우 사용이 가능하나, let과 const는 불가능하다.

 

전역 객체 속성

전역 변수가 전역 객체의 속성이 되는 걸 전역 객체 속성이라고 한다. 이것이 가능하면 window.변수명 이런 식으로 접근이 가능하다. 문제는 이것 때문에 라이브러리끼리 충돌할 가능성이 있다는 것. 이것은 var의 단점 중 하나로 지적된다.

 

 

번외: 왜 var는 사용되지 않게 되었나?

js에서 var값이 사용되지 않고, 요즘은 let과 const를 자주 사용한다. var는 일종의 올드문법이라는 건데, 이유가 무엇일까?

이유는 여러가지 있지만, 스코프의 문제가 가장 크게 지적된다. 즉, 블록 스코프인 둘과 달리 var는 함수 스코프이기 때문에 문제가 되는 것. 이유는 간단하다. 함수 내에서 한번 사용되면 내내 그 영향을 끼치기 때문. 특히 반복문 등에서의 사용에 문제가 생긴다.

뭐가 중요하냐면, 반복문은 한 과정을 하나의 블록으로 취급한다. 즉, const도 let도 반복문 내에서는 재선언과 재할당을 하여도 문제가 생기지 않는다는 것. i가 0일 때도, 1일 때도, 각각 다른 블록이 된다. 그러나 var는 그렇지 않다. 함수 내에서라면 계속 반복문의 결과가 누적이 된다.

var count = [];
for (var i = 0; i < 3; i++) {
  count.push(function() {
    console.log(i);  // 모두 3이 출력된다.
  });
}

let count = [];
for (let i = 0; i < 3; i++) {
  count.push(function() {
    console.log(i);  // 0, 1, 2가 차례로 출력된다.
  });
}

 

이러한 번거로움, 변수의 오염 등 때문에 var는 사장되어 현재는 그다지 쓰이지 않는다.

 

연산자

연산자에 대해서 간단히 표로 정리해본다.

연산자		우선순위
괄호	( )	가장 높음
항연산자	. [ ] + + -- !	위로 갈수록 높음 ↕ 아래로 갈수록 낮음
산술연산자	* / % + -
관계연산자	< > <= >= == !=
논리연산자	&& ||
조건연산자	?:
대입연산자	= *= /= %/ += -=	가장 낮음

 

괄호: 식 내의 괄호다. 흔히 수학 연산에서 사용하는 것과 비슷한 사용법이다.

항연산자: 항끼리를 연산하기 위해서 있다. 예를 들어 a + b라면 a와 b를 결합하는 용도로 사용된다.

산술연산자: Math를 위해서다. 즉 산수 연산에 사용되며, 일반적으로는 숫자에 사용한다.

관계연산자: 비교를 위해 사용된다. 예를 들어 a == b라면 a와 b는 동일한지 보는 것이다.

논리연산자: if문 등에 사용되는 논리형 연산으로, &&는 조건을 AND로 붙이고, ||는 조건을 OR로 붙인다.

조건연산자: ?:는 조건이 맞는지 확인하는 연산이다.

대입연산자: 변수에 값을 할당하기 위한 연산자다. x = 10; 같은 형태로 사용된다.

 

데이터 타입

• 숫자: 정수 혹은 실수, 따옴표를 사용하지 않는다.
• 문자(단일 문자): 단일 문자를 작은 따옴표와 같이 사용한다.
• 문자열: 큰 따옴표 및 작은 따옴표를 사용한다. string이라고 한다.
• 논리값: true, false
• undefined, null, NaN
  • undefined: 값이 없을 때 나타난다.
  • null: 값이 비워져 있을 때 나타난다.
  • NaN: 숫자가 아닐 때 나타난다.

문자열에서 숫자로 변하거나, 숫자에서 문자열로 변하는 등 데이터 형변환을 하기도 한다.

 

/** 문자열(string) → 숫자 **/
parseInt('1234'); //정수값으로 형변환
parseFloat('1234'); //실수값으로 형변환
Number('1234'); //전체를 숫자로 형변환

/** 숫자 → 문자열로 변환 **/
String(1234); //숫자를 문자열로 변환, null or undefined 출력
const num = 1234;
num.toString(); //숫자를 문자열로 변환, null or undefined 출력이 안 되고 에러가 남. 직호출 불가.

 

 

제어문

구분		제어명령
제어문	조건 선택	if문
		if ~ else ~ 문
		다중 if ~ else if ~ 문
		switch 문
	반복문	for 문
		while 문
		do ~ while 문
기타 제어문	continue 문
	break 문

 

 

if ~ else문

if문이란 조건식의 결과가 참(true)일 때 수행되는 조건문이다. 기본적으로는 if(식) { 내용 } 형태로 전개된다. 내용이 간단할 경우, 블록을 생략하여도 된다.

그리고 이 if문의 결과가 거짓(false)일 때 수행되는 것은 else라고 한다. if(식) { 내용 } 다음에 else {  }를 붙여서 전개한다. 여기엔 조건식을 붙이지 않는다.

만약 if문의 결과가 거짓이되 새로운 조건식을 붙이고 싶으면 if(식) { 내용 }과 else {  } 사이에 else if를 넣을 수 있다.

 

if(조건식1) {
  //조건식1의 결과가 참일 때만 실행된다.
} else if(조건식2) {
  //조건식 1의 결과는 거짓이되, 조건식2의 결과가 참일 때만 실행된다.
} else {
  //조건식 1과 조건식 2의 결과 모두가 거짓일 때 실행된다.
}

 

이런 if문들은 중첩으로 사용할 수 있어, if문 안에 if문을 전개하는 것도 가능하다.

switch 이후로는 1월 8일 쯤에 공부한 것으로 기억하여 1월 8일의 일지가 된다.