자바스크립트 기초

업데이트 히스토리

• yyyy.mm.dd - 업데이트 내용

변수

1/0 = infinity 무한대
1/string = nan (not a number)

메시지 입역창

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

prompt default값
const name = prompt("날짜를 입력하세요.", "2023-09-");

confirm 사용자에게 확인받기 위한 함수

• 확인 true
• 취소 false

단점
1. 스크립트 일시 정지
2. 스타일링 x

형변환

수학 prompt에는 90을, 영어 prompt에는 80을 입력. result의 예상 값은 85

const mathScore = prompt("수학 몇점?");
const engScore = prompt("영어 몇점?");
const result = (mathScore + engScore) / 2;

console.log(result)

4540

result의 결과는 4540이 나온다. 이렇게 나오는 이유는 무엇일까?
promt로 입력받은 값은 string으로 받는다.
"90" + "80" = "9080"

"9080" / 2 = 4540
나누기에서는 왜 2로 잘나누어졌을까? 이유는 자동형변환 때문에 그렇다. 자동형변환이 좋을 수 있을 것 처럼 보이지만 오히려 어디서 오류가 났는지 찾기 힘들어질 수가 있다.
그래서 개발자가 원하는 의도대로 값을 나오게 하기 위해서는 명시적 형변환을 해주는 것이 좋다.

String();
입력하면 입력하는 것들이 모두 문자형으로 변환

Number();
큰따옴표 안에 숫자가 아닌 문자가 입력되어 있으면 NaN

Boolean();
false인 경우 숫자 0, 빈 문자열'', null, undefined, NaN 이외에는 true

Number(null) - 0 (prompt에서 취소버튼 누르면 null값이 반환되고 그러면 0으로 변환된다
Number(undefined) - NaN

주의사항
Boolean(0) false
Boolean('0') true

Boolean('') false
Boolean(' ') true

연산자

let num = 10;
let result = num++;

console.log(result);

10

위 코드에서 증감된 값을 보고 싶다면 ++num;을 해줘서 증감된 값을 result에 넣어줘야된다. 적재적소에 맞춰서 뒤에 붙이냐 앞에 붙이냐를 결정하면 된다.

논리연산자

실제코드에서도 어떤 순서로 평가하는지 위치하는게 중요하다
예시 운전면하가 있고 시력이 좋은 여군
운전면허 전체군인의 80%, 시력 전체 전체군인의 86%, 여군 전체군인의 7%

-> 여군인데 시력이 좋고 운전면허가 있는 사람
이렇게 되면 93%가 먼저 제외가 되기 때문에 성능적 최적화에 도움이 된다.

함수

function sayHello(name) {
  const msg = `Hello, ${name}`;
  
  console.log(msg);
};

sayHello('mike');
sayHello('key');

함수를 사용하는 이유는 코드의 중복제거, 유지보수를 원활히 할 수 있기 때문이다.
자바에서 메소드와 같은 역할

전역변수와 지역변수는 서로 간섭을 하지 않는다.

let msg = 'welcome';
console.log(msg);

function sayHello(name){
	let msg = 'hello';
	console.log(msg);
}

sayHello('mike');
console.log(msg)

"welcome"
"hello mike"
"welcome"

전역변수가 많아지면 관리하기 힘들어지기 때문에 함수에 특화된 지역변수를 사용하는 것이 좋다

한번에 한작업에 집중
읽기 쉽고 어떤 동작인지 알 수 있게 네이밍

함수 선언문, 표현식

차이점
호출할 수 있는 타이밍

함수 선언문

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

어디서든 호출이 가능

위에서 아래로 순차적으로 코드를 읽는다. 즉시 결과를 반환하는 언어를 인터프리터 언어라고 한다

자바스크립트 내부 알고리즘 때문, 실행 전 초기화 단계에서 코드에서 모든 함수 선언문을 찾아서 생성 해놓은다. 눈으로 봤을 떄는 저 모습이지만 저 함수를 사용하는 위치는 올라가거나 내려갈 수 있는데 이것이 호이스팅(실제로 코드 위치가 올라가거나 내려가는게 아니다)

함수 표현식

let sayHello(){
	console.log('hello');
}

자바스크립트가 한 줄씩 읽으면서 실행하고 해당 코드의 도달해야 사용할 수 있다.

둘 중 뭐가 더 좋을까?
크게 상관은 없다. 에러가 발생하면 코드 위치를 바꾸기 때문이다. 그런데 이런 작업들이 귀찮으면 함수선언문을 사용하면 된다.

화살표 함수

일반 함수 선언문
let add = function(num1, num2){
	return num1 + num2;
}

화살표 함수로 변경
let add = (num1, num2) => {
	return num1 + num2;
}

코드 본문이 한줄이고 리턴문이 있으면 일반 괄호로 변경 가능
let add = (num1, num2) => (
	num1 + num2;
)

리턴문이 한줄이라면 괄호도 생략 가능
let add = (num1, num2) => num1 + num2;

인수가 하나라면 괄호를 생략 가능
let sayHello = name => `Hello, ${name}`;

인수가 없는 함수는 괄호 생략 불가
let showError = () => {
	alert('error!');
}

리턴문이 있다고 해도 리턴전에 여러줄의 코드가 있다면 일반 괄호 사용 불가
사용 불가
let add = function(num1, num2) {
	const result = num1 + num2;
    return result;
}

사용 가능
let add = (num1, num2) => {
	const result = num1 + num2;
    return result;
}

간결하게 함수를 바꿀 수 있다.

객체(Object)

superman

name: clark
age: 33

객체 형태

const superman = {
	name: 'clark',
    age: 33,
}

객체 접근
superman.name
superman['age']

객체 추가
superman.gender = 'male';
superman.['hairColor'] = 'black';

객체 삭제
delete superman.hairColor;

Object - 단축 프로퍼티

const name = 'clark';
const age = 33;

변경 전
const superman = {
	name: name,
    age: age,
    gender: 'male',
}

변경 후
const superman = {
	name,
    age,
    gender: 'male',
}

Object - 프로퍼티 존재 여부 확인

const superman = {
	name: 'clark',
    age: 33,

in 연산자를 사용하면 프로퍼티 확인 가능
어떤 값이 넘어오는지 확신할 수 없을 때 사용
함수의 인자를 받거나 api통신을 할 때 사용
superman.birthDay;
undefined

`birthDay` in superman;
//false

`age` in superman;
//true

for ... in 반복문 사용법

for(let key in superman) {
	console.log(key)
    console.log(superman[key])
}

in 연산자 예제
function isAdult(user){
  if(!('age' in user) || // user에 age가 없거나
     user.age < 20){     // 20살 미만이거나
    return false;
  }
  
  return true;
}

const Mike = {
  name: 'mike',
  age: 30
}

const Jane = {
  name: 'jane'
}

console.log(isAdult(Jane));

for ... in 예제
const Mike = {
  name: 'mike',
  age: 30
}

for(x in Mike){
  console.log(Mike[x]);
}

객체 method/this

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

const superman = {
  name: 'clark',
  age: 33,
  fly: function() {
    console.log('날아갑니다');
  }
};

superman.fly();

줄여서 가능
const superman = {
  name: 'clark',
  age: 33,
  fly() {
    console.log('날아갑니다');
  }
};

superman.fly();

화살표 함수는 일반 함수와 달리 자신만의 this를 가지지 않음
화살표 함수 내부에서 this를 사용하면 그 this는 외부에서 값을 가져온다(전역객체를 가져온다)

전역객체
브라우저 환경 : windown
node.js : global

this 예제
let boy = {
  name: 'mike',
  showname: function() {
    console.log(boy.name);
  }
};

let man = boy;
boy = null;

man.showname();

TypeError: null is not an object (evaluating 'boy.name')

boy 객체는 현재 null 상태이기 때문에 name을 찾을 수가 없다.

let boy = {
  name: 'mike',
  showname: function() {
    console.log(this.name);
  }
};

let man = boy;
boy = null;

man.showname(); 

this로 바꾸면 name을 찾을 수 있다

객체의 메소드를 작성할 때 화살표 함수로 작성하지 않는게 좋다
this를 이용하게 될꺼면 화살표 함수는 작성하지 않는 것이 좋다.

배열(array)

특징
배열은 문자 뿐만 아니라 숫자, 객체, 함수 등도 포함

let arr= [
	'민수',
    3,
    false,
    {
    	name: 'mike',
        age: 30,
    },
    function(){
    	console.log('test');
    }
];

push()

//배열에 데이터를 추가할 떄
let days = ['월', '화', '수'];
days.push('목');
console.log(days); // ['월', '화', '수', '목'];

//여러 개를 추가할 때
days.push('금', '토', '일'); // ['월', '화', '수', '목', '금', '토', '일'];
console.log(days);

pop()

//배열 끝 요소 제거
let day = ['월', '화', '수'];
days.pop();
console.log(days) // ['월', '화']

shift, unshift 배열 앞에 제거/추가

// 추가
let day = ['월', '화', '수'];
days.unshift('일');
console.log(days) // ['일', '월', '화', '수'];

// 여러 개 추가 가능
days.unshift('일', '목', '금');

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

반복 위해서 사용
일반적으로 for문

for ... of
객체를 순회하는 for ... in과 헷갈리지 않도록 주의, 배열도 객체형이기 떄문에 사용할 수 있지만 장점보다 단점이 더 많기 때문에 권장하지 않고 for ... of로 기억하고 사용

for문보다는 간단하지만 인덱스를 못얻는 단점이 있다