자바스크립트 기초개념 복습노트

변수 선언

자바스크립트는 2가지 방법으로 변수를 선언할 수 있다.

 

1. var

var는 선언한 변수를 또 선언할 수 있기 때문에 혼란을 야기한다.

그래서 잘 쓰지 않는다.

 

2. let

let은 한번 선언하면 더이상 선언할 수 없다.

let helloText = "안녕, 자바스크립트";

console.log(helloText);

 

 

자바스크립트에서 변수 선언할 때 자료형을 따로 써주지 않는다.

그래서 형 변환에 자유롭지만 그래서 조심해서 써야한다.

typeof로 타입을 체크하고 코드를 수행하는 것도 좋은 방법이다.

상수 선언

상수 선언은 const로 한다.

앱을 한번 실행하면 const는 바꿀 수 없다.

자료형

자바스크립트 자료형은 원시 자료형과 객체 자료형으로 나뉜다.

원시 자료형은 하나의 값만 가지는 타입을 말한다.

원시 자료형은 문자형, 숫자형, 불형, NULL, Undefiend 로 총 5개이다.

객체 자료형은 배열, 함수, 정규 표현식으로 총 3개이다.

 

다른 언어들은 숫자형이 int, double 등으로 세분화되지만, 자바스크립트는 숫자형 Number 하나만 있다.

형 변환

문자에서 숫자로 변환하는 것처럼 어떤 타입에서 다른 타입으로 바꾸는 걸 형 변환이라 한다.

 

문자 -> 숫자 :

Number("12") // 12로 변환
Number("12송이") // NaN 변환
// NaN : Not a Number

 

숫자 -> 문자 :

let var1 = 12;
let var2;
let var3 = null;

String(var1); // "12"로 변환
String(var2); // "undefined"로 변환
String(var3); // "null"로 변환

 

숫자 -> 불

Boolean("안녕") // true 반환
Boolean(0); // false 반환

 

자바스크립트는 Number만 있어서 그런지 정수로 변환할 때 Int()가 아니라 parseInt()로 변환할 수 있다.

parseInt("12") // 12로 변환
parseInt("12송이 5000원") // 12로 변환
parseInt("꽃 12송이") // NaN 변환
// NaN : Not a Number

등호 연산자

다른 언어에서 ==으로 쓰이는 게 자바스크립트에서는 ===으로 쓰인다.

자바스크립트에서 ==은 자료형에 상관없이 값이 같은지만 본다.

예를 들어, "12" == 12 이면 true가 반환된다.

break와 continue의 차이

break는 반복문을 끝내지만

continue는 현재 반복을 끝내고 다음 반복으로 넘어간다.

인수(argument)와 매개변수(parameter)의 차이

인수는 전달하는 값이고,

매개변수는 전달받은 인수를 저장하는 변수이다.

호이스팅

자바스크립트는 인터프리터 언어로서 코드가 순서대로 실행된다.

그런데 아래 줄에 있는 함수선언을 끌어다가 위에서 함수를 쓸 수 있다.

다시 말해 함수를 아래에서 선언해도 사용할 수 있다.

이 기능을 호이스팅이라고 한다.

이게 가능한 이유는 자바스크립트가 실행하기 전에 함수들을 미리 준비하는 과정이 있기 때문이다.

 

한 가지 주의할 점은 변수에 함수를 저장할 경우 (함수 표현식), 호이스팅이 안된다.

함수가 아니라 변수이기 때문이다.

sayHello(); // Hello 출력
sayHi(); // sayHi는 정의되지 않았으므로 에러

function sayHello() {
	console.log("Hello");
}

let sayHi = function() { // 변수만 이름이 있을 뿐 함수에는 이름이 없으니까 익명함수라고 한다.
	console.log("hi");
}

let greething = sayHello; // 이미 선언한 함수를 변수에 저장할 수도 있다. 주의할 점은 소괄호를 쓰지 않는다.

이처럼 함수는 값처럼 쓰일 수 있다.

그래서 인수로 전달도 된다.

함수가 인수로 전달되면 한 함수로 여러 동작을 할 수 있게 된다.

이렇게 전달되는 함수를 콜백함수라고 한다.

화살표 함수

let greeting = (name) => `hello, ${name}`;

익명함수를 간결하게 바꾼 함수를 화살표 함수라고 한다.

화살표 오른쪽에는 리턴값을 적어준다.

또는 중괄호를 써서 여러줄을 써주면 된다.

익명함수와 다른 점은 맨 앞에 function을 안 써줘도 된다는 점이다.

함수 정의 다시 정리

// 기본
function greeting() {
	console.log("안녕");
}

// 함수 표현식 : 익명함수를 생성하고 변수에 저장하는 방식
// 변수라서 호이스팅 안됨
let greeting = function () {
	console.log("안녕");
};

// 화살표 함수 : 함수 표현식의 단축 문법
let greeting = () => console.log("안녕");

// 화살표 함수가 두 줄 이상일 때
let greeting = () => {
	console.log("안녕");
    return true;
};

콜백함수, 화살표 함수 응용

let isConfirm = true;

function confirm(onYes, onNo) {
	if(isConfirm) onYes();
	else onNo();
}
 
confirm(
 	() => console.log("승인"),
  	() => console.log("거절")
);

스코프

변수나 함수를 접근할 수 있는 범위를 스코프라고 한다.

조건문, 반복문, 함수 내에 선언이 된 변수나 함수는 바깥에서 접근이 불가하다.

이를 지역 스코프라고 한다.

엄밀히 말하면 지역 스코프 중에 블록 스코프에 해당한다.

지역 스코프에는 블록 스코프와 함수 스코프가 있다.

 

함수 스코프는 조건문, 반복문에서 선언해도 접근이 가능한데 함수에서 선언했으면 그 밖에서 접근을 못한다.

이런 함수 스코프는 다른 언어에서도 보기어려운 개념이다.

자바스크립트의 경우 함수 스코프인 애가 var 하나이다.

var는 조건문 안에 선언되어도 바깥에서 접근이 가능한 혼란을 야기하기 때문에 거의 사용하지 않는다.

Falsy 7가지

Falsy는 False가 아니지만 False 취급하는 걸 말한다.

undefined, null, -0, 0n, 0, "", NaN

단락 평가

OR : 왼쪽이 true면 오른쪽은 보지도 않고 왼쪽 반환

AND : 왼쪽이 false면 오른쪽은 보지도 않고 왼쪽 반환

배열과 함수는 객체다

원시 데이터 5개를 제외한 모든 건 객체이다.

객체의 특징은 그 값 자체가 아닌 참좃값을 쓴다는 점이다.

===을 하면 같은 값을 가지더라도 참좃값이 다르므로 서로 다르다.

배열과 객체의 순환

for let elem of 배열

for let key in 객체 

구조 분해 할당 (Destructuring Assignment)

let [one, two] = arr; // 순서대로 넣어짐
let {name, age, location} = person; // 이름대로 넣어짐
let {name: n, age: a, location: l} = person: // 이름 변경해서 넣음

스프레드 연산자

전달할 때, 구조 분해 할당은 한 값만 보내서 나중에 분리해 저장하지만

스프레드 연산자는 미리 분리하기 때문에 여러 값을 보낸다.

스프레드연산자와 상대되는 개념은 rest 매개변수가 있다. ...rest를 쓰면 뭉쳐준다. (주의. 마지막에 넣어야한다.)

배열 메서드

1. 추가 및 삭제 메서드 : push, pop, unshift (push보다 느림), shift (pop보다 느림), slice (기존 배열 수정 X), concat (이어붙이기)

2. 순회 메서드 : forEach

3. 탐색 메서드 : indexOf (===이고, 인덱스 반환), includes (불리언 반환), findIndex (콜백함수, 인덱스 반환), find (콜백함수, 요소 반환), filter (조건에 맞는 요소 리스트 반환)

4. 변형 메서드 : map (변형한 리스트 반환, 이름만 가져오는 경우 등에 쓰임), sort (콜백함수, 기존 배열 수정 O), join (문자열 반환), reduce (하나의 값 반환)

객체 생성

객체 생성에는 2가지 방식이 있다.

1. 생성자 이용

2. 리터럴 방식

Date 객체

생성자 이용으로만 생성할 수 있다.

월을 특히 주의해야한다.

입력이나 출력은 1~12로 하는데, 문자열이 아닐 때는 0~11로 생각해야 한다.

const now = new Date(); // 인수로 타임스탬프나 날짜문자열 넣기.
now.getTime(); // 타임스탬프 반환
now.toLocaleString(); // 현지화 출력

비동기

음료를 주문하면 앱으로 호출해서 음료를 준다.

마찬가지로, 함수를 실행하면 콜백함수로 호출해서 결과를 준다.

위와 같은 방법은 비동기를 콜백함수로 처리하는 방법이다.

이것보다 간단한 방법이 있다.

프로미스 객체를 이용하는 것이다.

프로미스 객체도 생성자로 만든다.

프로미스의 상태에는 pending (기다림), fulfilled, rejected가 있다.

실행함수의 결과에는 resolve (성공), reject (실패)가 있다.

resolve하면 fulfilled로 바뀌고, reject하면 rejected로 바뀐다.

const promise = new Promise(실행 함수);

// 성공 시 then 실행
promise.then((value)=>{
	console.log(`성공! ${value}`);
});

// 실패 시 catch 실행
promise.catch((value)=>{
	console.log(`실패! ${value}`);
});