JS 변수와 타입 6/24

waymo·2022년 6월 24일

JavaScript 코드스테이츠

코드스테이츠 FE 부트캠프

목록 보기

2/28

💻 Unit2

1.변수

변수(variable)
변수는 상황에 따라 변할 수 있는 값

변수란, 숫자(합계나 계산에 사용되는) 또는 문자열(문장의 일부로 사용되는)과 같은 값의 컨테이너
-mdn

쉽게 말하면 어떤 값을 저장할 수 있는 저장소라고 생각하면 된다.
어떤 값을 저장하여 재사용할때 사용된다.

let const var

// 값(데이터)의 재할당 가능
let a = 7;
console.log(a); // 7

a = 777;
console.log(a); // 777

// 값(데이터)의 재할당 불가
const a = 7;
console.log(a); // 7

a = 777;
console.log(a); // TypeError: Assignment to constant variable

let과 const의 차이는 재할당이 가능 불가능의 차이가 있다
고정되어 있어야하는 데이터를 저장할때는 const이용한다.

let 으로 선언
let myname;

= 으로 할당
myname = 'Taewook';
myname에 'taewook'라는 값을 대입(assign)

한번에 선언과 할당을 할때
let myname = 'Taewook';

⭐변수작성방식

lower camel case

첫글자는 소문자로 시작하고, 그다음 단어의 첫글자를 대문자로 적는 방식
let isGameOver
let speedOfLight

변수 이름의 시작부분에 숫자 사용 X (허용되지 않으며 , 오류발생)

2. 타입

변수의 종류

number 숫자
24같은 숫자나 3.141592 같은 숫자를 변수에 저장
string 문자열
문자열은 텍스트의 조각 , 작은따옴표(')나 큰따옴표(")로 묶어서 저장
boolean
true, false 라는 값을 가지는 참/거짓을 표현하는 타입
undefined
값이 할당되지 않은 상태
null
값이 의도적으로 비어있음

자료형

배열 Array

let fruits = ['banana', 'apple', 'pineapple']

대괄호로 묶이고 쉼표로 구분 된 여러 값을 포함하는 단일 객체
여러 데이터를 순차적으로 저장한다
숫자 0 부터 위치를 지정하는 index값이 들어있음

객체 Object

let person = {name: 'Steve', age: 20, isStudent: true};

실제 사물을 모델링 하는 코드 구조, 정보를 가지고 표현 할 수 있음
여러 데이터를 Key:Value 형태로 저장한다

함수

💡typeof

typeof

typeof 는 연산자로서 특정 값의 타입을 확인할 수 있다

console.log(typeof 1)   // number
console.log(typeof '1') // string
console.log(typeof (1 < 2)) // boolean

let number = 3;
let string = 'taewook';
let fruits = ['banana', 'apple', 'pineapple'];
let person = {name: 'Steve', age: 20, isStudent: true};

console.log(typeof number);  // number
console.log(typeof string);  // string
console.log(typeof fruits);  // object
console.log(typeof person);  // object

console.log(typeof NaN); // number

크롬 개발자도구를 이용해서 typeof 연산자를 실습해보았다
숫자타입은 number
문자타입은 string이 출력되었고
자료형의 경우는 object가 출력되었다.

재밌는 점은 Not a Number라는 뜻이 NaN의 타입이 number이라는 점

어떠한 변수나 값의 타입이 궁금할 경우에
typeof연산자를 이용해 변수나 값의 타입을 출력하여 확인할 수 있음!

3. 함수 Function

🛠함수

어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록
특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

📌 함수는 항상 출력값을 반환한다!

함수 내부에서 return을 하지 않은 경우에는 출력값이 undefined가 출력되어
꼭 return을 적어줘야한다.

// 함수 선언 (declaration)
function getTriangleArea(base, height) { 
  // 실행 코드
  let triangleArea = (base * height) / 2;
  return triangleArea
}

// 함수 호출 (call, invocation)
getTriangleArea(4,3)  // 6


function sum(a, b) { // a와 b는 매개변수(parameter)
  return a + b
}

sum(2, 3) // 2와 3은 전달인자,인수(argument)

함수 선언 방법


// 함수 선언식
function getTriangleArea(base, height) {
  let triangleArea = (base * height) / 2;
  return triangleArea
}


// 함수 표현식
const getTriangleArea = function(base, height) {  // 변수 선언
  let triangleArea = (base * height) / 2;
  return triangleArea
}

// 화살표 함수
const getTriangleArea = (base, height) => {
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

// 화살표 함수 중괄호{} 생략
const getTriangleArea = (base, height) => base * height / 2;
// 함수의 본문에 return 문만 있는 경우 중괄호 생략 가능
// 2줄 이상인 경우, return과 중괄호를 쓰는것이 좋음