[Javascript 학습] 변수, 타입 그리고 함수의 기본개념
변수, 타입 그리고 함수, 이 세 가지 개념은 코드에 있어 가장 기본적이며 많이 사용되는 개념이다. 당연한 개념일지도 모르겠지만 코딩 초보들은 이것들의 역할이나 쓰임새를 까먹고 헷갈리는 경우가 많다. 기초부터 제대로 쌓아올려보자.
변수
- 변수란? 상황에 따라 변할 수 있는, 이름(Label)이 붙은 값
- 최신 자바에서의 기본적인 변수 사용법
-
선언(declaration)은 한 번만 한다.
let age; let age = 12; // 오류: 같은 변수는 두 번 선언되지 않음
이것도 앞의 선언자(var, let)에 따라 달라질 수 있지만 기본적으로 코드를 짤 때 선언을 여러 번 하지 않는 것을 원칙으로 하는 것이 좋으며, let의 경우 여러 번 선언할 경우 오류가 나게 되어있다.
-
할당은 여러 번 가능하다.
age = 12; age = 13; // 같은 변수에 여러 번 할당 가능
할당, 즉 변수의 값을 바꾸는 행위는 계속 반복할 수 있다.
※여기서 =은 '같다'의 의미가 아닌 '할당'의 기능을 가지는 할당연산자이다. -
선언과 할당을 동시에 할 수 있다.
let age = 12;
이런 방식의 할당은 이후에 변수의 초기값을 설정하는 역할을 하기도 한다.
-
표현식(expression)에서 변수들을 사용할 수 있다.
pi * 3 * 3 // 반지름이 3인 원의 넓이 let radius = 2.359813259347182; // 반지름을 변수로 사용 pi * radius * radius let areaOfCircle = pi * radius * radius // 변수 안에 변수를 집어넣을 수도 있다
변수안에 담긴 기다란 여러가지 값들을 변수명(label)로 줄여 간단히 사용할 수 있다.
-
변수명에는 공백을 사용할 수 없으며, 이에 따라 이어지는 단어들의 첫 글자를 대문자로 쓰는 것이 규칙이다(camelCase)
Car battery (x) -> carBattery (o)
시작하는 글자는 소문자로 써야함!
- 변수는 동일한 변수를 통해 대입할 수 있다.
let sum = 1; sum = sum + 2; // 변수 재사용 시 let을 붙이지 않는다: 선언은 한 번만 sum = sum + 3; sum = sum + 4; // 결과: sum = 10
- 그렇다면 할당이 되지 않은 변수는 undefined라는 값을 가진다.
let myname; // myname은 undefined라는 값을 가진다!
변수의 선언자
- 변수 선언 방식의 종류에 대해 알아보자
자바스크립트에는 var, let, const 세 가지의 변수 선언자가 존재한다.
- var는 여러 번 선언을 해도 오류가 발생하지 않는 선언자이다.
var num = 1;
var num = 2;
// 이런식으로 여러 번 선언을 해도 되는 특징 때문에 간단한 테스트용 변수 선언에 사용하는 것이 좋다.
var로 변수 선언 시 코드가 길어질 경우 같은 변수의 반복된 선언 때문에 오류가 생기고 어디서 오류가 생겼는지 찾기 힘든 경우가 생긴다
-
let과 const는 var의 단점을 보완하기 위해 추가 된 선언자이다. 그래서 let과 const는 재선언이 불가능하다.
그래서 let이랑 const는 뭔차이임???
let의 경우 배운 대로 변수에 여러 번 재할당이 가능하다. 하지만 const는 상수(constant)로써 한 번 할당하고 나면 재할당이 불가능한 선언자이다.
타입
- 변수는 가질 수 있는 다양한 타입이 있다
타입의 종류(원시 자료형)
타입 | 변수 예시 | 변수값 |
---|---|---|
number(숫자) | pi | 3.141592 |
string(문자열) | myname | Steve |
boolean(불리언) | isAdult | true / false |
undefined | - | (없음) |
bigint | num | 더 큰 숫자 |
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 뿐만 아니라 값들의 자료형까지도 비교를 한다. 특수한 상황이 아니고서는 비교연산자보다는 일치 연산자를 사용하는 것이 정확한 값 비교의 역할로 바람직하겠다.
함수
함수 기본 특징
- 코드의 묶음(즐겨찾기 버튼): 원하는 기능을 탑재해 사용가능하다.
- 기능(function)의 단위: 변수가 어떤 값을 가지고 있었다면 함수는 기능을 가지고 있다.
- 입력과 출력간의 매핑(mapping): 입력과 출력이 각각 일대일 대응이다.
- 반드시 돌아온다(return): 반환값을 가질 수 있다. 이는 함수를 호출(call)했을 때 출력되는 값이다.
함수의 사용법
- 선언(declaration)
function calculator(num1, num2){
console.log(num1 + num2);
return num1 * num2;
}
- 호출(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.
Author And Source
이 문제에 관하여([Javascript 학습] 변수, 타입 그리고 함수의 기본개념), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tok1324/자바-스크립트-학습-변수-타입-함수저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)