[포스코x코딩온 웹 풀스택 10기] 2주차 회고_ js (기초, 변수)

onee·2023년 11월 2일

[포스코X코딩온]

포스코x코딩온 웹 풀스택

목록 보기

7/30

📖 수업내용

# JavaScript

웹페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어.

✔︎ 스크립팅 언어란?

응용 소프트 웨어를 제어하는 컴퓨터 프로그래밍 언어.

응용 프로그램과 독립하여 사용되고 일반적으로 응용 프로그램의 언어와 다른 언어로 사용되어 최종사용자가 응용 프로그램의 동작을 사용자의 요구에 맞게 수행할 수 있도록 해준다.

예: Javascript, JSP, PHP, Python, Ruby 등

위키백과

1) javascript 사용법

<script>
	// 자바스크립트 코드 작성
    
    // 브라우저의 개발자 도구 > 콘솔에서 확인 가능
    console.log("hello");
    
    // 브라우저가 열렸을 때, 그 내용을 알림창으로 보여줌
    alert("alert!");
</script>

① 내장 방식

<script>
	 // script 태그 안에 코드 작성
</script>

-> 위치는 어디서나 사용이 가능하다. (예: head 내부, body 내부, head와 body 사이, body 아래 등)

간단하게 만들 수 있고, 특정 페이지에서만 작동하는 기능일 경우 내장 방식으로만 따로 구현이 가능하다.

② 링크 방식

javascipt 파일을 따로 만들어서 링크하는 방식(CSS와 동일)

 <script src="./index.js"></script>

-> 위치는 내장 방식과 동일하게 어디서나 사용이 가능하다.

JS 코드의 양이 많아지면 파일로 관리하는 것이 유지보수하기 편리하다.
같은 기능을 다른 페이지에서도 사용하고 싶을 때 용이하다.

파일은 읽히는 순서에 따라서 작동한다!

2) 자바스크립트 표기법

thequickbrownfoxjumpsoverthelazydog

① dash-case(kebab-case) : the-quick-brown-fox-jumps-over-the-lazy-dog
② snake_case : the_quick_brown_fox_jumps_over_the_lazy_dog
③ camelCase : theQuickBrownFoxJumpsOverTheLazyDog
④ ParcelCase : TheQuickBrownFoxJumpsOverTheLazyDog

3) Zero-based Numbering

특수한 경우를 제외하고 0부터 숫자를 시작한다. (예: 0, 1, 2, 3, ...)

4) 주석

// 한 줄 메모
/* 한 줄 메모 */
/*
여러 줄
메모
*/

5) 변수

: 데이터를 저장하고 참조(사용)하는 데이터의 이름

// 변수 선언하기
let 변수;
var 변수;

// 변수 (선언과 동시에)할당하기
let 변수 = 값;
var 변수 = 값;
const 변수 = 값;

① var

선언 단계와 초기화가 동시에 이루어지며 아무것도 할당하지 않으면 자동으로 undefinde가 할당된다.
중복 선언 O / 재할당 O
문제점 :
- 중간에 같은 이름의 변수를 다시 선언해도 기존의 변수에 덮어 씌워줌.
- 변수가 {블록 단위}에서 끝나는 것이 아니라 자기 마음대로 전역으로 돌아다니고 영향력을 행사한다.
  -> var 대신 let 사용 권장!

② let

var와 동일하게 선언을 하지 않으면 자동으로 undefined가 할당된다.
중복 선언 X / 재할당 O

③ const

초반에 선언할 때 반드시 초기화를 동시에 진행해야 한다.
중복 선언 X / 재할당 X

※ 변수 기본 규칙

변수 이름으로는 문자 / 숫자 / $ / _ 만 사용 가능하다.
변수의 첫 글자로는 숫자를 사용할 수 없다.
예약어도 사용할 수 없다.

예약어란?
특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어이다.
예: continue, break, true, false, null 등
변수 이름은 이해해기 쉽도록 센스 있게 작명한다.
상수는 대문자로 선언해서 다른 개발자도 알 수 있게 한다.

6) 자료형

javascript는 약한 타입의 언어이기 때문에, 데이터 종류와 관계 없이 var, let, const 키워드로 변수를 선언하고 사용한다. (이에 반해, 강한 타입의 언어(예: java, C)는 변수를 선언할 때 명확하게 타입을 1종료로 지정해야 한다.)

<script>
	// 1. string(문자형)
	let myName = "gildong";

	// 2. number(숫자형)
	let num = 123;

	// string + number
	// 1) 메소드의 매개 변수로 넣어서 사용하기
	console.log("text", 변수,"text");
	// 2) + 연산자를 사용하기
    console.log("text" + 변수 + "text");
    // 3) 백틱 문자(``) 사용하기
    console.log(`text ${변수} text`);
    
    // 3. boolean(참, 거짓)
    let a = true;
    let b = false;
    console.log(a);      // true
    console.log(b);      // false
    
    // 4. undefined(값이 할당되지 않은 상태)
    let undef;
    console.log(undef);   // undefined
    
    // 5. null(의도적으로 비어 있음을 의미하는 상태)
    let empty = null;
    console.log(empty);   // null
    
    // 6. array(배열)
    let days = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
    console.log(days[0], days[1]);     // mon tue
    
    // 7. object(여러 데이터 꾸러미)
    let cat = {
    	name: "navi";
        age: 1;
        isCute: true;
        mew: function() {
        	return "mew";
        }
    }
</script>

typeof : 자료형을 알려주는 연산자이다.

 console.log(typeof "hi");   // string
 console.log(typeof 123);    // number
 console.log(typeof null);   // null

7) 형 변환

<script>
	let mathScore = prompt("수학 점수를 입력하세요.");
   	let engScore = prompt("영어 점수를 입력하세요.");
   
   	let avg = (mathScore + engScore) / 2;
   
   	console.log(avg); 
</script>

: 수학 점수(80), 영어 점수(50)을 입력받았을 때, 65가 출력되는 것이 아니라 4025라는 값이 출력된다.
"8050" / 2 = "4025" -> prompt로 입력 받은 것은 "문자"로 저장이 되기 때문이다. (자바스크립트 내에서 자동 형변환이 이루어진 것)

자동 형변환에만 의존할 경우, 개발자의 의도대로 값이 도출되지 않을 수 있기 때문에 개발자가 직접 형 변환을 시킬 수 있다!

① 문자형 변환 : 문자로 변환
: String(), toString()

<script>
	let a = null;
	let b = String(a);
	console.log(typeof b);   // string

	let c = a.toString();
	console.log(typeof c);  
	// Uncaught TypeError: Cannot read properties of null (reading 'toString')
</script>

String() : null, undefined -> 문제 X
toString() : null undefined -> 문제 O

② 숫자형 변환 : 숫자로 변환
: Number()

<script>
	console.log(Number("123"));    //123
</script>

8) 기본 연산자

① 대입 연산자 : =
② 비교 연산자 : ==, !=, ===, !==, >, >=, <, <=

<script>
	// == 동등 연산자 : 두 개의 피연산자가 동일한지 확인하며, 다른 타입의 피연산자들끼리도 비교를 시도한다.
	// === 일치 연산자 : 변수의 값 뿐만 아니라 자료형까지 비교한다.
    let a = 1;
    let b = "1";
    
    console.log(a == b);    // true
    console.log(a === b);   // false
</script>

③ 산술 연산자 : +, -. /, *, %, **

<script>
	// % (나머지)
    // 사용 예 : 홀수, 짝수 판단
    num % 2 == 1   // 홀수
    num % 2 == 0   // 짝수
    
    // 연산자 줄여쓰기
    num = num + 1;
    num += 1;
    // +, -, *, /  모두 동일하게 사용 가능
    
    // 증가, 감소 연산자
    let result1, result2;
    let num = 10; num2 = 10;
    
    result = num++;         // 후위 연산자 : 변수를 먼저 대입한 뒤에 연산을 수행한다.
    console.log(result);    // 10 -> result라는 변수에 10을 먼저 대입한 뒤에 num 값 증가
    
    result2 = ++num;        // 전위 연산자
    console.log(result2);   // 11
</script>

④ 논리 연산자 : !, &&, ||

<script>
	let name = "ppororo";
    let age = 18;
    
	// ! : not
    let isAdult = age > 20;    // false
    
    if (!isAdult) console.log("돌아가");
    else console.log("통과");    // 돌아가
    
    // && : and
    if (name === "ppororo" && age > 20) console.log("통과");
    else console.log("돌아가");   // 돌아가
    
    // || : or
    if (name === "ppororo" || age > 20) console.log("통과");
    else console.log("돌아가");   // 통과
</script>

참고: 포스코x코딩온 강의 자료(10_03_js_01_variable.pdf)

👩🏻‍💻 학습

# `var`, `let`, `const`

① var: 중복 선언 가능

<script>
	var name = "gildong";
	 console.log(name);   // gildong

	var name = "nana";
	console.log(name);   // nana
	// 에러 없이 각각 다른 값이 출력됨
</script>

② let: 중복 선언 불가능, 재할당 가능

<script>
	let name = "gildong";
	console.log(name);    // gildong

	let name = "nana";
	console.log(name);
	// Uncaught SyntaxError: Identifier 'name' has already been declared

	name = "navi"
	console.log(name);   // navi
</script>

③ const: 중복 선언 불가능, 재할당 불가능

<script>
	const name = "gildong";
	console.log(name);    // gildong

	const name = "nana";
	console.log(name);
	// Uncaught SyntaxError: Identifier 'name' has already been declared

	name = "navi"
	console.log(name);
	// Uncaught TypeError: Assignment to constant variable

	function func() {
	const list = ["A", "B", "C"];
    
    list = "D";
    console.log(list);
    // TypeError: Assignment to constant variable
    
    list.push("D");
    console.log(list);   // ["A", "B", "C", "D"] 
}
</script>

const는 상수를 뜻하기 때문에 중복 선언과 재할당이 불가능 하지만, 위와 같이 배열과 오브젝트의 값을 변경하는 것은 가능하다.
-> 결과적으로 const는 값을 재할당하는 코드만 불가능하다고 볼 수 있다.

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

✔︎ 스코프란?(scope)

유효한 참조 범위를 뜻한다.
예: 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.
-> 함수 내부에서 선언한 변수는 지역 변수이고, 함수 외부에서 선언한 변수는 전역 변수로 취급된다.

참고

# 전역변수 & 지역변수

1) 전역변수(global variable)

함수의 외부에서 선언된 변수를 가리킨다.
전역변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라진다.

<script>
	var num = 10;    //  전역변수 num 선언함.
    function globalNum() {
    	console.log(num);     // 10
        num = 20;    // 전역변수 num의 값을 함수 내부에서 변경함.
    }
    globalNum();   // globalNum 함수 호출함.
    console.log(num);     // 20
</script>

위와 같이, 전역변수는 함수 외부 뿐만 아니라 내부에서도 접근이 가능하다.

2) 지역변수(local variable)

함수 내에서 선언된 변수를 가리킨다.
변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라진다.

<script>
	function localNum () {
    	var num = 10;
    }
    
    console.log(num);   // Uncaught ReferenceError: num is not defined
</script>

참고

onee

Hello World 💻

이전 포스트

[포스코x코딩온 웹 풀스택 10기] 2주차 회고_CSS (transform, transition, animation)

다음 포스트

[포스코x코딩온 웹 풀스택 10기] 2주차 회고_ js (기초, 변수)