[javascript]

1.변수

변수의 선언과 할당

메모리에 저장된 데이터가 있을 때, 그 저장된 데이터를 편리하게 사용하고자, 데이터에 이름을 붙이게 된다. 그 이름을 우리는 변수라고 한다.
변수에 값을 담는 과정을 할당이라고 한다.

변수 선언 및 할당 방법

변수는 let을 사용하여 다음과 같이 선언한다. let을 이용한 선언은 1번만 가능하다.

let 변수의 이름

이제 이 변수에 값을 할당하려면 = 기호를 사용한다. 이 기호는 같음을 의미하는 것이 아닌, 변수라는 이름이 붙은 박스에 값을 넣는다는 의미로 이해해야 한다

변수 이름=할당하려는 값

변수의 선언과 할당은 동시에 가능하다.

let 변수이름=할당하려는 값

변수로 나타낸 표현식은 다시 다른 변수에 담을 수도 있다.

let pi=3.14;
let radius=4;
let getCircleArea=pi*radius*radius;

2.타입

Primitive type, Objective type(원시 자료형과 참조(객체)자료형)

타입들에는 number, string, boolean, undefined, null, array, function, object 등이 있다.
JS에서 데이터타입은 크게 두 가지, 원시 자료형(primitive datatypes)과 참조 자료형(Objective type)으로 나눈다.

Primitive type: 더 이상 작은 단위로 나누지 못하는 single item이다. 이러한 자료형에는 number, boolean, string, symbol, undefined, null이 있다. 보통은 변수에 할당되는 값이라 생각하면 된다.

Objective type: Primitive type이 한 개 이상 모여 있는 형태이다. 예를 들어 배열이나, 객체가 있다. 이 유형은 데이터 자체가 크기 때문에 직접 데이터를 담지 못하고, 레퍼런스를 통하여 데이터를 참조하게 된다. 즉, 메모리에는 데이터가 담기는 게 아니고 주소만 담는다.

위 둘을 비교한다면 다음 그림과 같이 설명할 수 있을 것이다.

원시 자료형 string, number, boolean, undefined의 의미를 이해할 수 있다.

string: 문자열
number: 숫자

boolean: true, false 2가지 유형만 가짐
true false같은 boolean 값 다룰 때, 이해해야 할 것은 어떤 datatype도 boolean 중 하나가 될 수 있다는 것이다.

false가 되는 값: 0, -0, ' ' , null , undefined, NaN, 값이 미지정된 변수
true가 되는 값: 그외 숫자나 문자열, 텅 빈 배열이나 오브젝트

undefined: 값이 정의되지 않았다는 뜻으로, 보통 변수를 선언하고 값을 할당하지 않았을 때, 함수를 선언하고 바디부분에 리턴값을 적지 않았을 때 우리가 볼 수 있는 결과이며, null과는 다르다. null은 "나는 값이 없어요" 라는 값을 가지기 때문에 undefined와는 다르다.

타입마다 가지는 속성, 메서드

메서드의 경우 참조 자료형에 존재함. 메서드는 함수와 같은 것이라고 생각할 수 있음.

typeof로 값의 type 확인하기

특정 값의 타입은 다음과 같은 코드로 확인이 가능하다.

console.log(typeof 42);
// expected output: "number"

console.log(typeof 'blubber');
// expected output: "string"

console.log(typeof true);
// expected output: "boolean"

console.log(typeof undeclaredVariable);
// expected output: "undefined"

엄밀한 비교( === 과 !== )의 필요성

==값이 같은지 확인하는 연산자
!= 값이 다름을 확인하는 연산자

실제 코드를 작성할 경우, 위 기호는 사용하지 않도록 한다. undefined==null이라는 등의 오류가 발생하기 때문이다.

===값과 타입 모두 같은지 확인하는 연산자
!==값과 타입 둘 중 하나라도 같지 않음을 나타내는 연산자

위 연산자들은 true, false 중 하나를 반환한다.

'123'.length와 123.length중 정확한 표현

.length는 문자열의 길이를 구하는 API(함수)이다. 문자열은 ''기호를 이용하여 나타내므로, '123'.length가 맞는 표현이다. 숫자의 길이는 Math라는 Object 내의 함수들로 따로 계산이 필요함.

3.함수

정의

함수는 반복되는 작업을 자동화하기 위한 도구이다. 일종의 코드 블럭이다.

함수의 선언 방법

함수는 다음과 같은 부분으로 구성된다.
keyword: 함수 선언 시 function이라고 적은 부분
name: 함수의 이름. function 옆에 적음.

parameter: 함수 선언 시 같이 정의하는 인자이다. let, const 없이 쓴다.
*argument와 다른 점은, argument는 실제 함수를 호출할 때, 실제로 사용자가 넣는 값들을 말한다.

body: { }안에 적는 코드로서, 함수의 기능을 보여준다.

함수 선언, 호출의 기본 원칙

함수 선언: 함수에 대해 정의한다. 정의를 할 때는 반드시 입력값과 입력값에 대한 처리, 출력값(return)이 있어야 한다. 출력값이 없다면 함수는 undefined 를 내놓는다.
return을 쓰면 편리하다. 함수의 결과값을 이용하여 다양한 연산을 하고 싶을 경우, 함수 전체의 정의를 쓰지 않고 함수 호출만 함으로써 코드를 더 간단히 작성할 수 있게 된다.

함수 호출: 정의한 함수를 사용하는 과정이다. 아래와 같이 쓸 수 있겠다.

//함수 선언
function getStudentNumber(name,address){
	*code...*
    return studentNumber;
    }

//함수 호출
getStudentNumber("Minsu","Busan")

함수 선언식, 표현식, 화살표 함수

사각형의 넓이를 구하는 함수를 선언식, 표현식, 화살표 함수로 각각 나타내보자.

일반적인 함수의 선언식을 따른다면 다음과 같겠다.
선언식에서 } 에는 ;를 붙이지 않고, 호이스팅이 일어난다.

//선언
function getRectangleArea(width,height){
	return width*height;
}

//호출
getRectangleArea(4,7);

함수 표현식(function expression)은 익명함수를 어떤 변수 안에 담아 나타낸 식을 말하며 위 코드에 적용한다면 다음과 같이 쓸 수 있을 것이다.

//선언
let getRectangleArea=function(width,height){
	return width*height;
    }

//호출
getRectangleArea(4,7);

함수 표현식은 선언식과 달리, 호이스팅이 일어나지 않음.(이게 함수 선언문보다 장점이 될 수 있다고 하는데 아직 잘 이해를 못했다. 일단, 이와 관련된 링크 붙여놓겠음.
https://gmlwjd9405.github.io/2019/04/20/function-declaration-vs-function-expression.html
함수 표현식을 써야 하는 이유-호이스팅 때문!!(아래 링크 보니 이해가 됨)
https://deftkang.tistory.com/17
또한 클로져, 콜백으로 사용할 수 있다고 한다. 클로져는 찾아봐야 할 것 같다)

또한, 함수에 이름을 지정한다고 하더라도, 변수 이름으로 함수를 호출하여야 한다.

화살표 함수는 함수를 좀 더 간결히 쓰기 위한 최신문법이다. 다음과 같이 코드를 간결히 쓸 수 있는데, 기존 함수 선언식의 {}안에 리턴문만 있을 경우에는 {}를 쓰지 않는다.
만일, 쓰게 되면 undefined를 리턴할 것이다.
대신 ()로 리턴 부분을 감싸는 것은 가능하다.

let getRectangleArea=(width,height) => width*height

만일, 원래 함수 선언식이 2줄 이상인 경우, 한 줄에 쓰는 것은 가독성을 해칠 수 있으므로 여러 줄로 쓰는 것이 좋음.

4.코드학습법

에러 메세지를 통한 디버깅을 잘 해야만 한다!!

5.조건문

정의

입력받은 요소를 조건문에 따라 참, 거짓인지 판단 후, 각각의 boolean값에 따른 결과를 리턴하는 구문이다.
조건식에는 falsy한 값인 NaN, 0, ' ', null. undefined, false를 넣을 수 없다.(꼭 기억할 것)

기본 형태

if(판단에 사용할 조건식; 반드시 비교연산자 들어가야 한다){
	조건식에 따른 결과가 참일 경우 실행할 로직
    }else{
    결과가 참이 아닐 경우 실행할 로직
    }

논리연산자

&& 모든 조건이 참이어야 true를 반환. 여러 조건 검사 시 false가 되는 식을 제일 앞에 두도록.
|| 하나라도 참이면 true반환. 여러 조건 검사 시 true가 되는 식을 제일 앞에 두도록.
! 불린 값을 반전시킨다.

에러메세지 해석하기

디버깅의 기초가 되는 곳이다. 이를 구글에 검색하는 것이 좋음.