JS 기초

---

내가 새로 배웠다고 생각이 드는것만 적겠음.

---

변수

var

var : 중복선언 가능, 재할당 가능

var name = '김병찬'; 
var name = '홍길동';

console.log(name);

// ---------- 실행결과

'홍길동'

그냥 가장 기본적이고 C에서 char과 같은 기능? 이라고 생각한다.

---

let

let : 중복선언 불가 → 하지만 재할당은 가능함

let name = '김병찬'; 
let name = '홍길동';

console.log(name);

// ---------- 실행결과

Uncaught SyntaxError: Identifier 'name' has already been declared ( 에러가 남 )
**하지만 아래와 같은 방법으로 하면 코드 실행이 가능함**

let name = '김병찬';
name = '홍길동';

console.log(name);

// ---------- 실행결과 

'홍길동' 

앞에 let을 적어주지 않으면 name이 바뀌면서 실행이 잘 된다.

---

const

const : 중복 선언 불가 ( 이 부분은 let과 같음 ) 하지만 재할당 불가

const name = '김병찬'; 
name = '홍길동';

console.log(name);

// ---------- 실행결과

Uncaught TypeError: Assignment to constant variable. ( 에러가 남 )

const는 값 재할당이 불가능하여서 위 같은 에러를 보고 싶지 않다면 const가 아닌 let으로 바꿔야함

---

연산자

typeof 연산자

console.log(typeof 3);
console.log(typeof true);
console.log(typeof "xx");
console.log(typeof null);
console.log(typeof undefined);

// ---------- 실행결과 

"number"
"boolean"
"string"
"object"
"undefined"

---

alert, prompt, confirm

간단히 정리를 해보자면

alert 알려줌
prompt 입력 받음
confirm 확인 받음

alert

const name = '김병찬';

alert(name);

// ------ 실행결과 

맨 위에서 김병찬 이라는 이름이 뜬다. 

prompt

const name = prompt('이름을 입력하세요');
console.log(name);

// ----- 실행결과 

처음 맨 위에서 값을 입력받는 창이 뜨고 '김병찬' 이라고 입력을 하면 김병찬이라고 출력이 된다.

confirm

const isAdult = confirm('당신은 어른입니까?');
console.log(isAdult);

// ----- 실행결과

맨 위에서 처음과는 prompt, alert와는 다르게 확인, 최소만 입력을 받는다.
만약 확인을 누르면 출력값은 true
반대로 취소를 누르면 출력값은 false 이다.

---

형변환

// 다른 언어들을 하다가 js를 보면 참 신기한 언어이다.

const result = "90" / 2;
console.log(result); 

// ----- 실행 결과 
45 

?? 이게 뭐지 싶지만 JS는 가능하다고 한다...;;
편하긴 한데 적응은 되지 않고 거부감이 든다. 엄청

---

함수

함수는 2가지로 나뉜다.

함수 표현식, 화살표 함수

함수 표현식

// 일단 기본적인 함수 코드를 적어보겠다.
// 기본적인 함수 선언 방식을 **함수 선언문** 이라고 함

sayhello();

function sayhello(){
	console.log('hello');
}

sayhello();

// 함수 표현식 코드 
let hello = function(){
	console.log('hello');
}

hello();

둘의 차이점은 무엇일까?

호출 방식임

첫 번째 방식은 함수가 어디에 있든지 간에 바로 실행이 된다. → js의 알고리즘 때문

두 번째 방식은 함수가 호출되는 코드가 함수보다 위에 있으면 에러가 난다.

이정도 차이일 것 같다.

---

객체 Object

객체는 키와 값으로 작성된다. → 파이썬의 딕셔너리와 같은 느낌?

const human = {
	weight : 50, // <- 꼭 쉼표 해주어야함 
	age : 20, // 아래쪽에는 해줄 필요는 없지만 해주는게 좋다고 한다.
}

위 객체에 접근하는 방법

console.log(human.weight); // 50
console.log(human['age']); // 20

위처럼 key 값으로도 접근이 가능하다.

추가하는 방법

human.height = 173; // <- 그냥 객체.추가하고_싶은_키_이름 = 값 해주면 된다.
console.log(human.height); // 173 

삭제하는 방법

delete human.height;
console.log(human.height); // undefined

단축 프로퍼티

const human = {
	weight, // weight : weight
	age, // age : age
}

프로퍼티 존재 여부 확인

console.log(human.height); // undefined

'height' in human; // false
'age' in human; // ture

객체 만드는 법

function MakeObject(name, age) {
	return {
		name,
		age,	
	{
}

const chan = MakeObject("chan", 18);
console.log(chan);

// ----- 실행겱

// [object Object]
{
	"name" : "chan",
	"age" : 18
}

---

객체 method, this

method : 객체 프로퍼티로 할당 된 함수

const human = {
	hello : function(){ // <- 함수 ( 메소드 )
		console.log('안녕하세요');  
	}
}

const human = {
	hello(){ // 위와 같은 코드
		console.log('안녕하세요');  
	}
}

this : 조금 복잡하다고 함 ..? → 따로 공부 해야할듯

const user = {
  name : 'chan',
  hello(){
    console.log(`hello ${this.name}`);
  }
}

let human = user; // <- 변수에 user을 넣어서 
 
human.hello(); // <- 메소드 형태로 호출

---

배열

push

let days = ['월', '화'];

days.push('수'); // 파이썬의 append()와 비슷한 느낌이다.

console.log(days); // ["월","화","수"]

pop

let days = ['월', '화'];

days.pop(); 

console.log(days); // ['월']

unshift, shift

// 추가 
days.unshift('금');
console.log(days) // ['금', '월', '화']

days.shift();
console.log(days) // ['월', '화']

length

let days = ['월', '화'];

console.log(days.length); // 2

for

let days = ['월', '화'];

for(day of days){
	console.log(day);
}

// ---- 실행결과

"월"
"화"