(TIL) D+1 JS 기초 변수, 타입, 함수

JavaScript 기초

변수의 선언과 할당

• 변수의 선언과 할당 쉽게 이해
  - 변수는 컴퓨터의 메모리에 무언가를 저장하는 것을 이해하기 쉽도록 만든 개념
  - 변수의 선언은 메모리에 자리를 잡는 것이고, 값의 할당은 메모리에 값을 채우는 것이라고 볼 수 있음

  반복적으로 사용하는 데이터를 편리하게 사용할 수 있음, 코드가 간결해지고 가독성이 향상됨
  ex) 구구단을 반복해서 출력할 때

• 선언 : 보관함(메모리) 확보하고 이름표를 붙이는 것
  - 변수명 : 공백 no, CamelCase

let name;

• 할당 : 보관함에 데이터를 저장하는 것

name = 'Mike'

• 선언과 할당 동시에 가능 (보통 이렇게 많이 쓰는 듯)
  변수를 선언해야 할당을 할 수 있음 (저장소를 만들어야 데이터를 저장할 수 있겠지)

let name = 'Mike'

• 변수는 동일한 변수를 이용해 대입할 수 있음

let sum = 1;  // 한번 선언한 변수를 다시 사용할 때는 재선언하지 않음
sum = sum + 3; 
console.log(sum); // 4
sum = sum + 5;
console.log(sum); // 9

변수의 타입

• 변수 타입의 종류
  숫자(number), 문자열(string), 불리언(Boolean)
  타입이 섞인(compount) 경우도 있다 : 배열(자료형), 객체(자료형)
  undefined 도 타입이다(변수에 값이 할당되지 않은 것)
  함수도 타입이다 (변수에 함수가 할당되면)

• 타입 확인하기 (typeof)

typeof 값;

📌 typeof 연산자의 실무 사용

• 다른 개발자가 작성한 변수의 타입을 알아야할 때
• API 통신 등을 통해 받아온 데이터를 타입에 따라 다른 방식으로 처리해야 할 때 많이 사용

함수

작은 기능 단위
함수의 형식 : keword, name, parameter, body
선언(함수 자체)과 호출(실행)
매개변수(parameter)와 전달인자(argument) 구분 (인터넷상에서 많이 혼용되서 쓰임)
같은 함수를 선언식, 표현식, 화살표 함수로 표현 가능

• 함수는 작은 기능 단위
  어떤 목적을 가진 작업들을 수행하는 코드들의 묶음(필요할 때 호출해서 사용)
  구체적인 입력값을 설정할 수 있고 항상 출력값을 반환(return)
  반드시 return 되어야 함

• 함수의 사용과 동작
  함수 선언 : 특별한 공간에 보관됨 (like 실행 버튼을 만들어 놓는 것)
  함수 호출 : 함수를 실행하는 것 (like 버튼 사용)
  함수가 실행되다가 return 문을 만나면 return 문에 있는 값이 반환되고 함수는 종료됨
  함수 내부에 return 을 작성안해주면 undefined 반환됨

📌 화살표 함수 표현시

• 화살표함수는 익명함수로만 표현 가능
• 함수 본문(body)에 return문만 있는 경우
  return과 { } 중괄호 생략 가능(하나만 생략하면 에러남)
• 단, 함수내 표현식이 2줄 이상인 경우 return과 { } 중괄호를 쓰는 게 좋음

📌 매개변수(parameter)와 전달인자(argument)

• 인자가 매개변수보다 더 많이 전달되면?
  => 남은 인자는 어느 매개변수에도 할당되지 않음
• 반대로, 인자보다 매개변수가 더 많이 설정된 경우는?
  => undefined 또는 return 문 내용이 계산식이라면 NaN

function triangle(base, height){
		return (base * height)/2
}

triangle(3, 4); // 6


function triangle(base, height){
		return (base * height)/2
}

triangle(3);  // NaN


function triangle(base, height){
		return (base * height)/2
}

triangle(3, 4, 6);  // 6

참고 : https://hsj306.tistory.com/78

📌 '=' 할당연산자

• '==' 과 '===' 의 차이
  간단하게는 엄격한 비교 연산자로 타입까지 같은 걸로 보느냐의 차이
  코드의 실효성을 위해서 '==='만 사용한다고 보면됨

📌 변수의 선언과 할당 표기법 관련

쉼표를 활용해서 선언 키워드를 한번만 사용하여 변수 선언과 값 할당을 할 수 있음

let thing = '두루마리 휴지',
	num = 3;

// 같은 내용임

let thing = '두루마리 휴지';
let num = 3;

// 둘다 맞지만 하나의 방식으로 통일해서 사용해야 직관적이고 가독성있게 상호 이해가 쉬운 쾨드 작성 가능 

📝 더 찾아보고 생각할 것들

• null 과 undefined 의 구분과 차이
  null은 존재하지 않는 값을 의미하고, undefined는 값이 할당되지 않았다는 것을 의미
  값을 할당하지 않은 변수는 null 값이 아니고 JS가 임의로 undefined 라는 값을 할당하게 됨

예를 들어,

let user = null;  // user는 존재하지 않는다 라는 의미로 이해하면 됨

• String() 메서드, Number() 메서드

• 함수 작성 유의점
  매개변수에 임의로 값을 할당하는 방식은 위험, 안티 패턴으로 부작용을 일으킬 수 있음

• parseFloat(), parseInt() 의 기능 및 차이점 알아보기

• 변수 선언과 할당을 동시에 하느냐 따로 하느냐 차이

• 비전공자에게 바라는 것
  코드를 설명, 의사코드 작성 등에서 정확한 기술용어 사용이 부족하다..

• 원시자료형, 참조자료형

• 코드 작성이 안될때
  의사코드를 먼저 작성하고 풀어보기
  개발자도구를 많이 활용하면서 해보기