[포스코x코딩온] 웹개발자 풀스택 과정 2주차 | Javascript 기초

JavaScript

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

내장방식 & 링크방식

1. 내장방식

• 위치는 어디서나 사용 가능
  • Head 태그 내부
  • Body 태그 내부
  • Head와 body 사이
  • Body 아래 등

2. 링크 방식 : Java Script 파일을 따로 만들어서 링크하는 방식(CSS처럼)

• 위치는 어디서나 사용 가능
  • Head 태그 내부
  • Body 태그 내부
  • Head와 body사이
  • Body 아래 등

3. 장단점

• 내장방식
  • 간단하게 만들 수 이씀
  • 특정 페이지에서만 작동하는 기능일 경우 내장 방식으로만 따로 구현 가능
• 링크 방식
  • JS 코드의 양이 많아지면 파일로 관리하는 편이 편함
  • 같은 기능을 다른 페이지에서 사용하고 싶을 때 JS 파일 링크만 걸어서 사용 가능
  • 유지 보수 용이성이 편리

JavaScript 기초

표기법

1. 스네이크 케이스(snake_case)
   : 단어와 단어 사이에 _(언더바)를 추가하여 구분하는 방법
   
2. 카멜 케이스(camelCase)
   : 첫번째 단어 이후 이어지는 각단어의 첫 글자를 대문자로 쓰는 방법
   

변수

1. var
   

• 선언 단계와 초기화가 동시에 이루어지며 아무것도 할당하지 않으면 자동으로 undefined가 할당
• 중복 선언 가능, 재선언 가능

var 문제점

• 중간에 같은 이름 변수를 다시 선언해도 기존 변수에 덮어 씌움
• 변수가 블록단위에서 끝나는 것이 아니라, 자기 맘대로 전역으로 돌아다니면서 영향력 행사
• ES6에서는 var 대신 let 사용 권장

2. let

• 변수 중복 선언 불가능, 재할당 가능
• var과 마찬가지로 선언을 하지 않으면 자동으로 undefined가 들어감

<script>
let name = "홍길동";
let name = "나비";

console.log(name);
</script>

3. const

• 초반에 선언할 때 반드시 초기화를 동시에 진행해야 된다.

  	`const` 변수이름 = 값;

• 재선언 불가능, 재할당 불가능

변수 기본 규칙

1. 변수 이름으로는 문자 / 숫자/ $ / _ 만 사용가능

<script>
let myName = "홍길동";		// O
let my$ = "null";			// O
let my_dream = "rich";		// O
ley my-house = undefined;	// X
ley my* = "KTH"				// X
</script>

2. 첫 글자는 숫자가 될 수 없다.

<script>
let 1stName = "길동" 	// X
let firstName = "길동" 	// O
</script>

3. 변수에 예약어 사용은 불가능하다.

<script>
let let = "let me use this!";	// X
let if = "if i can use this!";	// X
</script>

4. 변수 이름은 읽기 쉽게한다.

<script>
let a = 1;				// X
let b = "allie";		// X

let userNumber = 1;		// O
let userName = "allie";	// O
</script>

5. 상수는 대문자로 선언해서 다른 개발자도 알 수 있게 한다.

<script>
const WIDTH = 1100;
const LOL_TIER = "silver";
</script>

데이터의 종류

1. String : 문자형 데이터

<script>
let myName = '길 동';
var email = 'gildong@naver.com';
let city = '서 울';
console.log(myName);	// 길 동
console.log(email);		// gildong@naver.com
console.log(city);		// 서 울
</script>

• 문자와 변수를 동시에 쓰고 싶을 때

  • 메소드의 매개 변수로 넣어서 사용

    console.log("문자", 변수, "문자");

  • +연산자를 사용해서 변수를 문자로 변환 후 더하여 사용

    	console.log("문자" + 변수, "문자");

  • 백틱 문자 사용

2. Number : 숫자형 데이터

<script>
// Number  숫자형 데이터
// 정수 및 소수점 숫자를 나타냄
let number = 123;
let opacity = 0.7;

console.log(number);		// 123
console.log(opacity);		// 0.7
</script>

3. boolean : 참, 거짓 데이터

<script>
// Boolean 참, 거짓 데이터
// true, false 두 가지 값만 가지는 데이터
let checked = true;
let isShow = false;

console.log(checked);		// true
console.log(isShow);		// false
</script>

4. Undefined : 미할당 데이터

<script>
// Undefined
// 값이 할당되지 않은 상태를 표기
let undef;
let obj ={
	abc: 123,
};
console.log(undef);			// undefined
console.log(obj.abc);		// 123
console.log(obj.efg);		//	undefined
</script>

5. Null : 의도된 빈 데이터

<script>
// Null
// 어떤 값이 "의도적"으로 비어있음을 의미할 때 사용
let empty = null;

console.log(empty);		//null
</script>

6. Array : 배열데이터

<script>
// 여러 데이터를 순차적으로 저장
let fruits = ["Orange", "Pineapple", "Apple", "Banana"];

console.log(fruits[0], fruits[1], fruits[2], fruits[3]);
// -> Range, Pineapple, Apple, Banana
</script>

• 배열에서 사용 가능한 속성, 함수
  • .length
  • .push()
  • .pop()
  • .unshift()
  • .indexof()
  • .includes()

7. typeof : 해당 자료형이 어떤 것인지 알려줌

<script>
console.log(typeof "안녕");		// string
console.log(typeof 3);			// number
console.log(typeof null);		// object
</script>

형변환

1. 문자 형변환

• 자동 형변환에 의존하지 않고 개발자가 직접 형 변환을 시키는 것
• 문자로 변환 -> String(), toString();

<script>
// 문자 데이터로 변환
let num = 123;

let a = String(num);
console.log(typeof a);		//string

let b = num.toString();
console.log(typeof b);		//string
</script>

• String()과 toString()차이
  String : null과 undefined 에도 문제 X
  toString : null과 undefined에서 문제 발생

2. 숫자형변환 : Number()

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

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

연산자

1. 연산자

• 대입 연산자 : =
• 비교 연산자 :==, !=, ===, >, >=, <, <=
• 산술 연산자 : +, -, *, /
• 논리 연산자 : !, &&, ||
• 나머지 연산자 : %
  • 홀수 판단 = num %2 == 1 이면 홀수
  • 짝수 판단 = num %2 == 0 이면 짝수
• ** 거듭제곱
  • **를 사용
  • 2 ** 3 = 8

2. 증가, 감소 연산자

• Num++
• Num--

<script>
let result1, result2;
let num = 10, num2 = 10;

result = num++;
console.log(result);		// 10

result2 = ++num2;
console.log(result2);		// 11

</script>

3. 비교 연산자

• 일치 연산자(===) : 변수의 값 뿐만 아니라 자료형까지도 비교

<script>
let a = 1;
let b = "1";
// 비교 연산자
console.log(a == b);		// true

//일치 연산자
console.log( a===b);		// false
</script>

4. 논리 연산자

• OR 연산자 : ||

<script>
//이름이 뽀로로 이거나, 성인이면 통과

let name = "뽀로로";
let age = 18;

if(name === "뽀로로" || age > 19){
	console.log("통과");
} else {
	console.log("돌아가");
</script>

결과 : 통과

• AND 연산자 : &&

<script>
//이름이 뽀로로 이고, 성인이면 통과

let name = "뽀로로";
let age = 18;

if(name === "뽀로로" && age > 19){
	console.log("통과");
} else {
	console.log("돌아가");
</script>

결과 : 돌아가

• NOT 연산자 :!

<script>
let age = 16;
let isAdult = age > 19;

if(!isAdult){
	console.log("돌아가");
} else{
	console.log("통과");
}
</script>