이 노트는 몰랐던 부분 혹은 다시 보고 싶은 부분만 정리 하는 노트.
자바스크립트는 브라우저에서 동작하는 언어.
AJAX 덕분에 UX(User Experience) 의 폭발적 향상이 이루어짐.
구글 크롬의 V8 엔진 그리고 Node.JS 의 등장으로 인해 자바스크립트는 브라우저란 벽을 깨고 어디든 사용될 수 있게 되었다.
자바스크립트 특징
1.객체지향언어
자바스립트는 절차지향과는 다른 객체지향언어다.
객체지향언어란?
-> 어떠한 목적을 가지고 있는 "객체" 라는 단위로 그룹을 묶어 코드를 실행.
절차지향언어란?
-> 위에서 부터 아래로 순서대로 코드가 실행됨.
2.동적 타입 언어
컴파일 언어(정적 언어)와 다르게 변수 선언시 데이터 타입을 따로 지정하지 않음. 데이터 타입을 지정해야 하는 대표적인 언어는 JAVA.
let hello = "안녕하세요 --> (O)
string hello = "안녕하세요" --> (X)그럼 데이터 타입은 언제 결정되느냐? 바로 런타임 시점에 결정된다.
런타임이란?
-> 자바스크립트는 코드를 실행 단계가 2단계로 나뉜다.
1.선언 및 평가 단계
2.값 할당 단계
런타임 시점은 바로 2단계인 값이 할당되고 코드가 실행되는 시점을 말한다.
3.함수형 프로그래밍 지원
함수를 일급객체로 사용함.
값으로도 사용하고 함수가 함수를 반환하기도 하며 함수를 인자로 받기도 한다.
즉, 자바스크립트는 함수를 값으로 취급한다.
// 함수 선언
const sum = function (a, b) {
return a + b;
};
// 함수를 인자로 받음
function sum2(sum, a, b) {
return sum(a, b);
}
// 함수를 반환
function returnSumFunc() {
return sum;
}
4.비동기 처리
비동기 처리란 작업을 순서대로 처리하지않고 병렬적으로 처리한다. 다음 작업이 종료가 되지 않아도 다음 작업이 실행될 수 있으므로 효율적이다.
자바스크립트의 비동기 처리에 대해 깊게 설명하기 위해선 실행 컨텍스트, 이벤트 루프, 프로미스 등등을 이해해야 하므로 여기선 간단히 역할만 소개하고 넘어가겠다.
5.클라이언트 및 백엔드 모두 지원
Node.js 덕분에 웹 뿐만 아니라 IT 개발 전반에 걸쳐 자바스크립트가 사용됨.
1.변수와 상수
변수란?
-> 값을 저장하기 위해 저장된 메모리 주소를 식별하기 위해 붙인 이름(식별자)
10 + 20 + 30 을 연산하고 그 값을 구하는 코드를 작성했다고 치자.
답은? 60이다. 이제 이 60이란 값을 어딘가에 사용하고 싶다.
근데 여기서 문제가 있다. 이 값을 여러번 사용하고 싶다면 어떻게 해야할까?
매번 10 + 20 + 30 을 연산해야할까? 이건 너무 비효율적이다. 재사용을 하는게 어떨까? 또한 연산 결과는 메모리에 저장되는데 문제는 코드가 실행될 때마다 값이 저장된 메모리 주소가 바뀐다는 것. 이런 맥락에서 변수가 필요한 것이다. 값이 저장된 메모리 주소를 변수가 가리키면 변수를 호출함으로써 값을 재사용 할 수 있다.
변수 5가지 개념
1.변수 이름 : 변수의 고유 이름
2.변수 값 : 변수에 저장된 값.
3.변수 값 할당 : 생성한 변수에 값을 저장.
4.변수 선언 : 변수를 만든다고 컴퓨터에게 알림.
5.변수 참조 : 변수 값 읽기
var vs let vs const
//1.var // 식별자 중복 가능, 값 재할당 가능
var varhello = "안녕";
var varhello = "안녕1";
console.log(varhello);
//2.let // 식별자 중복 안됨. , 값 재할당 가능
let lethello = "안녕";
lethello = "안녕2";
console.log(lethello);
//3. const // 식별자 중복 안됨, 값 재할당 불가
const consthello = "안녕";
// consthello = "안녕2";
console.log(consthello);2.형변환
자바스크립트의 모든 값은 타입이 있다.
자바스크립트는 개발자가 의도하여 데이터 타입을 변환(명시적 타입 변환) 할수도 있고 개발자가 의도하지 않아도 엔진 마음대로 타입을 자동 변환하기도 한다.(암묵적 타입 변환)
명시적 타입 변환
- 문자 타입 변환
// 숫자 -> 문자
const num = 1;
console.log(String(num)); // "1"
console.log(typeof String(num)); // string
//.toString() 사용
console.log((1).toString()); // "1"
//문자열 연결 연산자 사용
console.log(1 + ""); // "1"
//불리언 -> 문자
console.log(String(true)); // "true"
console.log(typeof String(true)); string
- 숫자 타입 변환
//문자 -> 숫자
console.log(Number("0")); // 0
console.log(typeof Number("0")); // number
// parseInt 사용
console.log(parseInt("-1")); // -1
// 문자열 연결 연산자 사용
console.log(+'0') // 0
// 산술 연산자
console.log("1" * 1) // 1
// 불리언 타입 -> 숫자
console.log(Number(true)); // 1
console.log(Number(false)); // 0
암묵적 타입 변환
암묵적 타입 변환은 명시적 타입에서 문자열 연결 연산자로 타입을 변환한 방식과 동일하다. 어떤 값 + '' 형태를 띄고 있다.
// 숫자
0 + '' // "0"
NaN + '' // "NaN"
// 불리언
true + '' // "true"
false + '' // "false"
// null
null + '' // "null"
// 객체
Math + '' // "[object Math]"
[50,100] + '' // 50,100
3.연산자
서로 다른 데이터를 연산할 때 연산자를 통해 데이터를 쉽게 조작할 수 있다.
- (1) 더하기
// 우선순위는 문자
console.log(1 + "1"); // 11
- (2) 뺴기
// 우선순위는 숫자
console.log(1 - "1"); // 0
4.함수
자바스크립트 함수는 다음과 같은 특징이 있다.
// 함수 선언식
function hello() {
console.log("안녕~");
}
// 함수 표현식
const hello2 = function () {
console.log("안녕2~");
};
hello(); // 안녕~
hello2(); // 안녕2~
5.스코프 및 화살표 함수
스코프는 매개변수를 참조할 수 있는 유효범위를 말한다.
- (1) 전역 스코프
전역에 선언된 변수는 어디서든 참조 가능하다.
let x = 10;
function hello() {
console.log(x);
}
hello(); // 10
console.log(x); // 10
- (2) 지역 스코프
함수 내에 선언된 변수는 해당 함수 내에서만 참조할 수 있다.
그렇기에 외부에서 해당 변수를 참조하면 에러가 발생한다.
function hello() {
let x = 10;
console.log(x);
}
hello(); // 10
console.log(x); // ReferenceError: x is not defined
- (3) 블록 스코프
if (true) {
let x = 10;
console.log(x);
}
console.log(x); // ReferenceError: x is not defined6.조건부 실행
선언한 변수의 값이 10보다 크다면 "10 이상 입니다" 를 출력하는 일반적인 패턴은 다음과 같다.
let x = 10;
if (x >= 10) {
console.log("10 이상 입니다");
}
하지만 자바스크립트의 문법은 굉장히 유연해서 이보다 더 간략한 문법이 존재한다.
let x = 10;
x >= 10 && console.log("10 이상 입니다"); // "10 이상 입니다"
x > 10 && console.log("10 이상 입니다"); // << 조건 성립 안되므로 얘는 실행안됨.
7.객체
객체란 프로퍼티와 메서드로 이루어진 복합 자료구조. 객체 내부엔 여러 타입의 데이터값이 존재할 수 있다. 또한 원시값과 달리 변경 가능한 값이다.
- 객체 기본 형태
let person = {
name: "홍길동",
age: 30,
gender: "남자"
};- 생성자 함수의 객체 형태
function Ironman(age, gender) {
this.age = age;
this.gender = gender;
}
const tony = new Ironman(100, "Male");
console.log(tony.age);- 객체의 복사
let person = {
name: "홍길동",
age: 30,
gender: "남자",
};
let copyperson = Object.assign({}, person, { age: 100 });
console.log(copyperson); // { name: '홍길동', age: 100, gender: '남자' }
console.log(person); // { name: '홍길동', age: 30, gender: '남자' }
- 객체의 비교
객체를 비교할 땐 JSON.stringfy로 객체값을 문자열화 시켜서 비교해야한다.
만약 === 연산자로 비교를 할 경우 비록 같은 값이어도 false가 된다.
왜냐면 우리가 보고 있는 객체의 할당된 값은 그 객체를 담고있는 별도의 메모리 주소다.(힙heap)
그렇기 때문에 그 주소를 문자열화 해주어야 한다.
let hello1 = {
name: "man", // name: "man" 라고 생각하지말고 얘네를 저장하고 있는 메모리 주소라고 생각하자.
age: 20,
};
let hello2 = {
name: "man",
age: 20,
};
console.log(hello1 === hello2); // false
console.log(JSON.stringify(hello1) === JSON.stringify(hello2)); // true