[Javascript] 기초

변수 선언

var (ES5 이전)

함수 스코프: 함수 안에서 지역변수로 취급되고, 블록을 기준으로 구분되지 않음
중복 선언 가능하고 선언이 맨 위로 끌어올려짐 (값은 X)

if (true) {
  var x = 10;
}
console.log(x); // 10 (if 블록 밖에서도 접근 가능)

중복 선언 가능 (버그의 원인)
선언이 코드의 맨 위로 끌어올려짐

console.log(a); // undefined
var a = 5;

// 내부 해석
var a;
console.log(a);
a = 5;

예측이 어렵고 버그 발생이 쉬워 현대에서 거의 사용하지 않음(레거시 코드 유지보수 제외)

let (ES6 이후)

현대적인 방식
블록 스코프: 변수의 유효 범위가 정해짐
재할당, 재선언 불가능
선언 전에는 변수를 사용할 수 없음(TDZ 발생)

let age = 20;
age = 21;         // 재할당 가능
// let age = 22;  // ❌ 재선언 불가 (같은 스코프에서)

값이 변할 수 있는 변수를 선언할 때 사용
카운트 변수, 입력값, true or false 등

const (ES6 이후)

블록 스코프, 재할당과 재선언 불가능
선언 전에는 변수를 사용할 수 없음(TDZ 발생)

const PI = 3.14;
// PI = 3.1415;   // ❌ 재할당 불가

const는 객체 내부의 값 변경 가능

const person = { name: "Alice" };
person.name = "Bob"; // ✅ 가능
console.log(person.name); // "Bob"

// 하지만 person 자체를 다시 대입은 ❌
person = { name: "Charlie" }; // ❌ TypeError

한 번 할당 후 변하지 않을 값을 선언할 때 사용(설정값, 함수 참조, 객체 참조 등)
함수나 클래스 이름, 환경값, 객체, 배열 등

대화 상자 함수

대화 상자 함수들은 스크립트를 일시 정지 함

alert() - 경고창/알림창

사용자가 메시지를 확인만 할 수 있는 창을 띄움
반환값은 undefined
alert("로그인 해주세요")

confirm() - 확인/취소 선택창

사용자에게 어떤 동작은 진행할지 물어봄
반환값은 true or false

const isSex = confirm("남자입니까?")
console.log(isSex)

prompt() - 사용자 입력창

사용자에게 텍스트를 입력받음
텍스트를 문자열로 반환
취소를 누르면 null반환

const name = prompt("이름이 뭡니까? ")
alert(name)

기본 값 설정 가능

const name = prompt("이름이 뭡니까? ", "예: 홍길동")
alert(name)

명시적 형변환

자동 변환 때문에 헷갈릴 수 있으므로 연산자같은 암시적 변환보다 명시적 변환을 사용하는게 안전함

String() - 문자열로 변환

값을 문자열로 바꿔줌

String(123);       // "123"
String(true);      // "true"
String(null);      // "null"
String(undefined); // "undefined"
String([1, 2, 3]); // "1,2,3"

Number() - 숫자로 변환

값을 숫자로 바꿔줌
변환이 실패하면 NaN
공백은 0으로 변환

Number("123");      // 123
Number("3.14");     // 3.14
Number(true);       // 1
Number(false);      // 0
Number(null);       // 0
Number("");         // 0
Number("   ");      // 0  (공백만 있어도 0)
Number("abc");      // NaN (Not a Number)
Number(undefined);  // NaN

Boolean() - 논리값으로 변환

값을 true or false로 바꿔줌

템플릿 리터럴

문자열을 백틱${...}을 사용해서 변수나 표현식을 직접 삽입

const name = "Yoo";
const msg = `Hello ${name}`;
console.log(msg); // Hello Yoo

${...}

변수, 수식, 함수 호출 결과 등 아무 JS 표현식 삽입

const a = 10;
const b = 20;
console.log(`합은 ${a + b} 입니다.`); 
// 👉 "합은 30 입니다."

함수

funtion 이름(매개변수)
함수의 return문이 없으면 자동으로 undefined를 반환

function showError(){
    alert("에러가 발생했습니다.")
}

showError();

매개변수 default 값 입력 가능

function sayHello(name = "friend") {
  let msg = `Hello, ${name}`;
  alert(msg);
}
<sayHello();
sayHello("yoo");

화살표 함수

기존의 함수보다 짧고 간결하게 함수를 작성할 수 있음
자신만의 this를 가지지 않음
this를 사용 시 전역 객체를 가리킴

// 일반 함수
function add(a, b){
	return a + b; 
}

// 화살표 함수
const add = (a, b) => {
	return a + b;
}

// 화살표 함수 한 줄로 (자동으로 return 처리)
const add = (a, b) => a + b;

// 매개변수 1개일 때 괄호 생략
const sayHello = name => `Hello, ${name}`;

// 반환값이 객체일 때
const makeUser = (name) => ({name: name});

간단한 계산함수, 콜백함수, 이벤트 처리 등에 사용
this를 명확히 써야 하는 객체 메서드나 생성자 함수에는 지양

객체

중괄호 안에 key와 value로 작성
존재하지 않는 프로퍼티에 접근하면 undefined 발생

const superman = {
    name : 'super',
    age : '24',
  	showName : function(){ console.log(superman.name)}
}

// 접근
superman.name // super
superman['age'] // 24

//추가
superman.gender = 'male'
superman['hairColor'] = 'yellow'

//삭제
delete superman.hairColor

//존재
'name' in superman // true
'height' in superman // false

단축 프로퍼티

const name = "ss"
const age = 24

const superman = {
    name,
    age,
    gender : 'man'
}

객체 메소드

let boy = {
    name : 'Mike',
    showName : function(){
        console.log(this.name)
    }
}

boy.showName();

배열

배열에 문자, 숫자, 객체, 함수 등도 포함할 수 있음
push() : 배열 끝에 추가
pop() : 배열 끝 요소 제거
shift() : 배열 앞 제거
unshift() : 배열 앞에 추가

let days = ['mon', 'tue', 'wed'];

days.push('thu') 
days.pop()
days.shift('hi')
days.unshift('sun') // 제일 앞에 인덱스 추가