[마스터 개념] 1 | 변수, 연산자, 함수

[마스터 개념] 1 | 변수, 연산자, 함수

1> variable 변수

2> operator 연산자

3> function 함수

4 object 객체

5 class 클래스

7 built-in 빌트인 객체

8 array 배열

9 iterator 이터러블

10 map

11 more-operators 유용한 연산자들

12 module 모듈

13 promise 프로미스

14 scope 스코프

15 prototype 프로토타입

16 closure 클로져

17 this 

1 variable 변수

변수 이름 규칙

 

1. 라틴문자 (0 ~ 9, a ~ z, A ~ Z), _, $

2. 대소문자 구분함

3. camelCase

4. 한국어, 예약어, 숫자로 시작, 특수문자( _, $ 제외) => 사용불가

변수 이름은 최대한 의미 있게, 구체적으로 작성하는 것이 좋다.

 

Template Literal 템플릿 리터럴

 

let name = '말랑';
let greetings = `안녕하세요, ${name}
행복하세요!`;

 

` `(backtick 벡틱) 을 사용하여 문자열로 표현하며, 줄 바꿈이 편하고, 표현식을 포함할 수 있다.

' \ ' 를 표현해야 할 때, ' \\ ' 이렇게 작성하면 \ 가 문자열로 출력된다.

' ` ' 를 표현해야 할 때, ' \` ' 이렇게 작성하면 ` 가 문자열로 출력된다.

 

Falshy 인 값

 

console.log(!!false);
console.log(!!0);
console.log(!!-0);
console.log(!!"");
console.log(!!null);
console.log(!!undefined);
console.log(!!NaN);

 

 Truthy 인 값은 Falshy 를 제외한 나머지이다.

 

Null vs Undefined

 

null : 비어있다는 걸 나타냄 (object 데이터 타입)

undefined : 정해지지 않은 상태 (undefined 데이터 타입)

 

let const

 

let : 재할당 가능

const : 재할당 불가능, 변경은 가능

2 operator 연산자

연산자 주의점

 

text = "1" + 1;
consloe.log(text);	// 11

 

 숫자 + 문자열 = 문자열로 반환된다.

 

Unary Operator 단항 연산자

 

console.log(+false);		// 0
console.log(+null);		// 0
console.log(+"");		// 0
console.log(+true);		// 1
console.log(+"text");		// NaN
console.log(+undefined);	// NaN

 

+ : 숫자가 아닌 타입을, 숫자로 변환

! : 부정 연산자

!! : 값을 boolean 타입으로 변환

 

Equality Operators 동등 비교 관계 연산자

 

console.log(2 == "2");		// true
console.log(2 === "2");		// true <- best
console.log(true == 1);		// true
console.log(true === 1);	// false

const obj1 = {
  name : "hi",
};
const obj2 = {
  name : "hi",
};

console.log(obj1 == obj2)		// false
console.log(obj1 === obj2)		// false
console.log(obj1.name == obj2.name)	// true
console.log(obj1.name === obj2.name)	// true

let obj3 = obj2;
console.log(obj3 == obj2)	// true
console.log(obj3 === obj2)	// true

 

== : 값이 같음

!= : 값이 다름

=== : 값과 타입이 둘 다 같음

!== : 값과 타입이 다름

 

또한 비교연산자를 2개를 한번에 쓸 수 없고, && 연산자를 이용해야 한다.

ex) 1 < a <= 3   ->   1 < a && a <= 3

3 function 함수

parameters 매개변수

 

function add(a = 1, b = 1) {
  console.log(a);		// 2
  console.log(b);		// 3
  console.log(arguments);	// [Arguments] { '0' : 2, '1' : 3 }
  console.log(arguments[1]);	// 3
  return a + b;
}
add(2, 3);

 

 매개변수의 기본값은 undefined 이며, 매개변수의 정보는 함수 내부의 arguments 객체에 저장된다.

그리고 Default Parameters (매개변수 기본값) 을 설정할 수 있다.

 

function sum(a, b, ...numbers) {
  console.log(a);		// 1
  console.log(b);		// 2
  console.log(numbers);		// [3, 4, 5, 6, 7, 8 ]
}
sum(1, 2, 3, 4, 5, 6, 7, 8);

 

 Rest 매개변수는 인자의 숫자가 정해지지 않았을 때 배열로 받아올 수 있다.

 

IIFE

 

(function run() {
  console.log("run");
})();

 

 IIFE (immedicately-Invoked Function Expressions) : 즉각적으로 호출되는 함수 표현식

함수에 괄호를 씌우면 함수가 값으로 변환되어, 함수의 주소 ( ); 를 호출하면 바로 실행된다.

 

immutability 불변성

 

// 안 좋은 코드
function changeName(obj) {
  obj.name = "몰랑";
  console.log(obj);
}
const mallang = { name: "말랑" };
changeName(mallang);	// { name: '몰랑' }
console.log(mallang);	// { name: '몰랑' }

 

 이처럼 외부로부터 주어진 인자 (특히 오브젝트) 를 함수 내부에서 변경할 수 있으면 안 된다.

 

function changeName(obj) {
  return { ...obj, name: "몰랑" };
}

 

 이렇게 새로운 오브젝트를 만들고, 기존의 오브젝트를 유지하며 이름만 바꿔주면 된다.