변수

상황에 따라 변할 수 있는 값, 명사를 정하는 것?

• 변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것임을 이해
• 자바스크립트에서 변수의 선언과 값의 할당에 대해서 설명 가능
• =가 "같다"라는 의미가 아니라 할당 연산자임을 이해
• 크롬 개발자 도구의 console 탭을 이용하여 원하는 값을 출력 가능
• 변수를 사용하여 보다 효과적으로 구구단을 출력 가능

JS 변수 특징

1. 데이터 보관함
2. 보관함의 크기는 동일★
3. 각 보관함의 이름 = 변수
4. 이름(Lavel)을 통해 보관함 재사용 가능

이런식으로 선언, 할당을 함 이때 등호는 같다는 의미가 아니라 '데이터를 할당했다' 라는 의미의 할당 연산자임!
변수/값의 역할이 각각 다르므로 같다는 표현은 맞지 않음.

변수를 선언(Declare)한다는 것은 데이터 보관함(메모리)에 데이터를 넣을 공간을 확보하는 것을 의미 - 보관함 이름 짓기
변수를 할당(Assign)한다는 것은 값을 정해놓고 그 값을 데이터 보관함에 넣어 의미를 정함 - 보관함 내용물

작성법

• 표현식 : 연산자를 통해 변수와 조합하여 계산식 가능

let pi = 3.14;
pi * 5 * 5;
let radius = 5;
radius = 7; // 재할당시 let 안써줌, 재할당하는데 또 let을 써주면 안됨! 메모리를 또 차지하나?
let areaOfCircle = pi * radius * radius; // 변수 선언 및 할당

• camelCase : 낙타 작성법, 2번째 띄어쓰기부터 대문자로 써야함, 사람이 알아보기 쉽게

데이터 타입

• 타입 : 숫자나 문자와 같이 변수에 할당할 수 있는 형태, 한글의 조사처럼 명사의 종류와 각 명사의 종류에 따라 다른 조사가 필요
• 원시 자료형 string, number, boolean, undefined의 의미를 이해
• 타입마다 다른 속성과 메서드가 있다는 것을 이해
• typeof 연산자를 활용하여 특정 값의 타입을 확인
• 비교 시 엄밀한 비교( === 과 !== )의 필요성을 이해

종류

숫자 데이터, 문자열 데이터(따옴표 필수), 불린 데이터(true, false), 객체 데이터({~}), 배열 데이터([~]), 비정의(undefined), 함수

typeof 연산자를 사용하여 값의 타입을 확인하는 방법

작성법: typeof 값;

let string = '1';
console.log(typeof string) // string
let number = 1;
console.log(typeof number) // number
let boolean = true;
console.log(typeof boolean) // boolean
let undefined = undefined;
console.log(typeof undefined) // undefined
let null = null;
console.log(typeof null) // null

+ null, undefined 차이? 의도된과 의도되지 않은!

함수

입력에 따라 그에 걸맞은 작업을 하는, 논리적인 일련의 작업을 하는 하나의 단위, 지시사항의 묶음, 동사를 만드는 것?

• 함수가 "작은 기능의 단위"라는 것을 이해
• 함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해
• 함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용
• 함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용
• 매개변수(parameter)와 전달인자(argument)를 구분하여 사용★
• 같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현

함수 특징

1. 코드의 묶음, 즐겨찾기 버튼처럼 누르면 결과가 나옴
2. 기능의 단위, 하나의 버튼에 기능
3. 입력과 출력간 매핑(mapping), 매개변수(선언)와 인수(호출)
4. 반드시 돌아옴(return), undefined이든 number이든 어떤 데이터든 반환

예시: 구구단

function mulTablePrinter(num) { // 버튼 제작
	console.log(num * 1);
	console.log(num * 2);
	console.log(num * 3);
	console.log(num * 4);
	console.log(num * 5);
	console.log(num * 6);
	console.log(num * 7);
	console.log(num * 8);
	console.log(num * 9); // 결과값들
}
mulTablePrinter(9) // 버튼 누름

함수 선언 방법

삼각형의 넓이를 구하는 식을 함수로 만들었다.
1. 함수 선언식

function getTriangleArea (base, height) {
  let triangleArea = (base * height) / 2;
  return triangleArea
}

2. 함수 표현식

const getTriangleArea = function (base, height) { // 선언된 변수에 익명 함수 할당
  return (base * height) / 2; // let 빼고 콤팩트하게
}

3. 화살표 함수(function, return{} 생략)

const getTriangleArea = (base, height) => { // =>로 표현
  let triangleArea = (base * height) / 2;
  return triangleArea
}
const getTriangleArea = (base, height) => (base * height) / 2; // return{} 생략
const getTriangleArea = (base, height) => (base * height / 2); // 소괄호로 명시

• 함수의 객체 데이터 값이 2줄 이상이라면 return{}을 명시적으로 써주기!

예제: 사각형 함수

/** 함수 선언식 */
function getRectangleArea (base, height) {
  let rectangleArea = base * height;
  return rectangleArea
}
/** 함수 표현식 */
const getRectangleArea = function (base, height) {
  let rectangleArea = base * height;
  return rectangleArea
}
/** 화살표 함수: => 사용, retrun 생략 */
const getRectangleArea = (base, height) => base * height;
// 함수 호출
getRectangleArea(5, 5)

+ 이렇게 용어 사용하는 데에 있어 정확한 용어를 구사해야함, 할당, 선언, 반환 등등 그래야 기술면접에서 안막히고 제대로 말함! 배울 때부터 잘하기

코플릿

• 변수 선언할 때 이렇게도 가능! But 같이 코딩할 땐 하나의 방식으로 통일하여 사용해 코딩 컨벤션 지키기

let variable = Value, 
variable2 = Value