[Javascript 학습] 변수, 타입 그리고 함수의 기본개념

도시다람쥐·2021년 10월 6일
0

Javascript

목록 보기
1/3

 변수, 타입 그리고 함수, 이 세 가지 개념은 코드에 있어 가장 기본적이며 많이 사용되는 개념이다. 당연한 개념일지도 모르겠지만 코딩 초보들은 이것들의 역할이나 쓰임새를 까먹고 헷갈리는 경우가 많다. 기초부터 제대로 쌓아올려보자.

변수

  • 변수란? 상황에 따라 변할 수 있는, 이름(Label)이 붙은 값

  • 최신 자바에서의 기본적인 변수 사용법

  1. 선언(declaration)은 한 번만 한다.

    let age;
let age = 12; // 오류: 같은 변수는 두 번 선언되지 않음

    이것도 앞의 선언자(var, let)에 따라 달라질 수 있지만 기본적으로 코드를 짤 때 선언을 여러 번 하지 않는 것을 원칙으로 하는 것이 좋으며, let의 경우 여러 번 선언할 경우 오류가 나게 되어있다.

  2. 할당은 여러 번 가능하다.

    age = 12;
age = 13; // 같은 변수에 여러 번 할당 가능

    할당, 즉 변수의 값을 바꾸는 행위는 계속 반복할 수 있다.
    ※여기서 =은 '같다'의 의미가 아닌 '할당'의 기능을 가지는 할당연산자이다.

  3. 선언과 할당을 동시에 할 수 있다.

    let age = 12;

    이런 방식의 할당은 이후에 변수의 초기값을 설정하는 역할을 하기도 한다.

  4. 표현식(expression)에서 변수들을 사용할 수 있다.

    pi * 3 * 3 // 반지름이 3인 원의 넓이

let radius = 2.359813259347182; // 반지름을 변수로 사용
pi * radius * radius

let areaOfCircle = pi * radius * radius // 변수 안에 변수를 집어넣을 수도 있다

    변수안에 담긴 기다란 여러가지 값들을 변수명(label)로 줄여 간단히 사용할 수 있다.

  5. 변수명에는 공백을 사용할 수 없으며, 이에 따라 이어지는 단어들의 첫 글자를 대문자로 쓰는 것이 규칙이다(camelCase)
    Car battery (x) -> carBattery (o)
    시작하는 글자는 소문자로 써야함!

  1. 변수는 동일한 변수를 통해 대입할 수 있다.
    let sum = 1;
sum = sum + 2; // 변수 재사용 시 let을 붙이지 않는다: 선언은 한 번만
sum = sum + 3;
sum = sum + 4; // 결과: sum = 10
  2. 그렇다면 할당이 되지 않은 변수는 undefined라는 값을 가진다.
    let myname; // myname은 undefined라는 값을 가진다!

변수의 선언자

  • 변수 선언 방식의 종류에 대해 알아보자
    자바스크립트에는 var, let, const 세 가지의 변수 선언자가 존재한다.
  1. var는 여러 번 선언을 해도 오류가 발생하지 않는 선언자이다.
var num = 1;
var num = 2;
 // 이런식으로 여러 번 선언을 해도 되는 특징 때문에 간단한 테스트용 변수 선언에 사용하는 것이 좋다.
var로 변수 선언 시 코드가 길어질 경우 같은 변수의 반복된 선언 때문에 오류가 생기고 어디서 오류가 생겼는지 찾기 힘든 경우가 생긴다

  1. let과 const는 var의 단점을 보완하기 위해 추가 된 선언자이다. 그래서 let과 const는 재선언이 불가능하다.

    그래서 let이랑 const는 뭔차이임???
    let의 경우 배운 대로 변수에 여러 번 재할당이 가능하다. 하지만 const는 상수(constant)로써 한 번 할당하고 나면 재할당이 불가능한 선언자이다.

타입

  • 변수는 가질 수 있는 다양한 타입이 있다

타입의 종류(원시 자료형)

타입변수 예시변수값
number(숫자)pi3.141592
string(문자열)mynameSteve
boolean(불리언)isAdulttrue / false
undefined-(없음)
bigintnum더 큰 숫자
symbol-변경 불가능한 기본값
(null)-비어 있는 값

'없음'을 표현하는데 있어서 명확한 것은 undefined가 아닌 null이다. undefined는 아예 값이 부여되지 않은 상태이다.

  • 참조 자료형은 뭐야? -> 원시 자료형이 아닌 모든 것들
    • 배열(fruits)과 객체(person) 그리고 이후에 배울 함수도 참조 자료형이다.
let animal = [	// 배열
	'chipmunk',
	'squirrel',
	'meerkat'
];
let citysquirrel = {	// 객체
	name: '다람쥐',
	age: 29,
	isStudent: false
};
  • 특정 값의 타입을 알아내는 방법이 있다: typeof 함수
typeof 42 === "number" // typeof는 피연산자 앞에 위치한다.
typeof(42) === "number" // type 값은 큰따옴표(")로 감싸 표시된다.
  • ===와 !==의 필요성
    비교연산자로 ==(같음), !=(같지않음)을 사용할 때가 있다.
    그런데 대체 ===는 뭐지?
    보통 값을 비교할 때에 그 값들의 value를 비교한다. 그것이 동등연산자(==)와 부등 연산자(!=)이다.
    자료형(타입)이 달라도 일치시켜서 그 값들의 value만을 비교하는 역할을 한다.
    일치 연산자(===)와 불일치 연산자(!==)는 value 뿐만 아니라 값들의 자료형까지도 비교를 한다. 특수한 상황이 아니고서는 비교연산자보다는 일치 연산자를 사용하는 것이 정확한 값 비교의 역할로 바람직하겠다.

함수

함수 기본 특징

  1. 코드의 묶음(즐겨찾기 버튼): 원하는 기능을 탑재해 사용가능하다.
  2. 기능(function)의 단위: 변수가 어떤 값을 가지고 있었다면 함수는 기능을 가지고 있다.
  3. 입력과 출력간의 매핑(mapping): 입력과 출력이 각각 일대일 대응이다.
  4. 반드시 돌아온다(return): 반환값을 가질 수 있다. 이는 함수를 호출(call)했을 때 출력되는 값이다.

함수의 사용법

  1. 선언(declaration)
function calculator(num1, num2){
  console.log(num1 + num2);
  return num1 * num2;
}
  1. 호출(call, invocation)
calculator(10, 20); // 콘솔창에 30을 출력, 200을 반환.

let result = cal(10, 20); // result 변수에 반환값인 200이 할당된다.

함수 선언을 위한 요소들

Keyword, name, parameter, body: 기본적으로 함수를 구성하는 요소들로 반드시 있어야 한다

//keyword >> function
//name >> helloWorld
//parameter >> ()
//body >> {}

function helloWorld() {
}

함수 기초

삼각형의 넓이를 구해야 하는 경우: 밑변 base, 높이 height

const base = 3;
const height = 4;
const triangleArea = (base * height) / 2;
console.log(triangleArea); // Output: 6

//하지만 이것으로는 밑변이 3이고 높이가 4인 삼각형만 구할 수 있다.
//이를 함수로 짜 만들어 다른 밑변과 높이를 가진 삼각형의 넓이를 구해본다.

함수란?

 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록으로, 항상 출력값(return)을 반환한다.
삼각형의 넓이를 구하는 함수를 만들어보자:

function getTriangleArea(base, height) { // 입력값
  let triangleArea = (base * height) / 2;
  return triangleArea; // 출력값, return을 해주지 않은 경우 함수를 호출했을 때 undefined를 반환함
}

console.log(getTriangleArea(2,4)) // Prints 4

함수 선언 방법

  • 함수 선언식
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; // 정상작동
cosnt getTriangleArea2 = (base, height) => { (base * height) / 2; } // 작동하지 않음

return 을 생략하면, 동시에 중괄호{}도 생략을 해주어야 정상적으로 작동을 한다
소괄호는 사용 가능하다.

  • 만약에 함수 내의 표현식이 2줄 이상인 경우에는 return과 중괄호를 포함하여 명시해주는 것이 가독성에 좋다!
// bad
const getStudentAvg = arr => arr.filter(person => person.job === 'student').reduce((sum, person) => (sum + person.grade), 0)

// good 가독성 좋음!
const getStudentAvg = arr => {
	return arr
	.filter(person => person.job === 'student')
	.reduce((sum, person) => (sum + person.grade), 0)
}

함수 호출

  • 선언
function getTriangleArea(base, height) { // 매개 변수(parameter)
  let triangleArea = (base * height) / 2;
}
  • 호출
getTriangleArea(3, 4); // 전달 인자(argument)

fine.

profile
도시다람쥐
람쥐

0개의 댓글

관련 채용 정보