[youtube] - Javascript 무료 풀강의 영상을 참고하여 자바스크립트 기본 문법을 공부하였다.
1. Loops - for ... in / for ... of
반복문에는 for, while문이 있는데 새로 확실하게 알게된 내용은
1. for ... in
: 딕셔너리 혹은 리스트 안에 담긴 index를 알고싶을 때 사용하는 반복문
딕셔너리 형태
const yujin = {
name: '안유진',
year:2003,
group:'아이브'
}
for(let key in yujin) {
console.log(key);
}
-----------------------------------------------------------------------
(출력)
name
year
group리스트 형태
const iveMemberArray = ['안유진', '가을', '레이', '장원영', '리즈', '아서'];
for(let key in iveMemberArray) {
console.log(key);
console.log(`${key}:${iveMemberArray[key]}`);
}
-----------------------------------------------------------------------
(출력)
0
0:안유진
1
1:가을
2
2:레이
3
3:장원영
4
4:리즈
5
5:아서이렇게 key 혹은 index의 값을 알 수 있다.
iveMemberArray[key] 를 통해 해당 리스트의 값을 불러올 수도 있다.
2. for ... of
: iterable이 가능한 자료형에서 사용할 수 있으며, value 값을 반환해준다. 반복이 가능한 데이터 타입이므로 element (또는 member) 하나하나를 개별로 리턴할 수 있어야 한다.
리스트 형태
for (let value of iveMemberArray) {
console.log(value);
}
-----------------------------------------------------------------------
(출력)
안유진
가을
레이
장원영
리즈
아서2. coercion(타입변환)
타입변환에는 명시적과 암묵적 변환이 있다.
명시적 변환은 코드내에서 타입 변환을 확실하게 주는 것이다.
예를 들어, toString(), parseInt(), parseFloat() 등이 있다.
스트링 변환
console.log(typeof(99).toString(), (99).toString());
console.log(typeof(true).toString(), (true).toString());
console.log(typeof(Infinity).toString(), (Infinity).toString());
숫자 변환
console.log(typeof parseInt('0'), parseInt('0'));
console.log(typeof parseFloat('0.99'), parseFloat('0.99'))
boolean 타입 변환
값이 있거나 글자가 있는 경우 true
값이 없거나 0이거나 글자가 없는 경우 false
console.log(!!'');
console.log(!!0);
console.log(!!{}); // 오브젝트는 불리안타입에서 무조건 True이다.
console.log(!!'asdasffa');
console.log(!!1);
-----------------------------------------------------------------------------
(출력)
string 99
string true
string Infinity
number 0
number 0.99
false
false
true
true
true암묵적은 타입 변환을 하지 않아도 자동으로 변환이 되어 연산되는 경우를 말한다.
let age = 32; / number 타입으로 선언
let test = age + ''; / number 타입에 '' string 타입을 + 연산
console.log(typeof test, test);
console.log('98' + 2);
console.log('98' * 2);
-----------------------------------------------------------------------------
(출력)
string 32 / string 타입으로 암묵적 변환
982 / string 타입으로 암묵적 변환
196 / number 타입으로 암묵적 변환3. Function - Arrow, arguments, 즉시 실행 함수(IIF), 타입
function 키워드를 사용하여 매개변수를 받고 return 하는 방식까지는 기본적으로 사용하기 때문에 스킵한다.
1. Arrow Function
이 외에 function 키워드를 사용하지 않고 함수명을 선언하여 실행하는 방식이 있다.
이 함수를 Arrow Function 이라고 한다. (일반 함수처럼 사용도 가능)
const multiply2 = (x, y) => { // 괄호안은 매개변수
return x * y; // 중괄호 안은 body (실행값)
}
console.log(multiply2(2,4));
const multiply3 = (x, y) => x * y; // 중괄호를 없애서 사용할 수도 있다.
console.log(multiply3(3,4));
const multyply4 = x => x*2; // 매개변수를 1개만 받을 경우도 이렇게 사용 가능하다.
console.log(multyply4(2));
// x를 받은 함수에서 y 함수를 실행하고 y를 받은 함수는 z를 실행하고 z를 받은 매개변수는 최종적인 `x: ${x} y: ${y} z: ${z}` 를 실행한다.
const multiply5 = x => y => z=> `x: ${x} y: ${y} z: ${z}`;
console.log(multiply5(2)(3)(4));
//위의 함수는 아래 함수와 기능이 동일하다.
function multiply6(x){
return function(y){
return function(z){
return `x: ${x} y: ${y} z: ${z}`;
}
}
}
console.log(multiply6(2)(3)(4));
-----------------------------------------------------------------------------
(출력)
8
12
4
x: 2 y: 3 z: 4
x: 2 y: 3 z: 4애로우 함수를 일반 함수처럼 사용하고 싶을 땐 아래 방식처럼 사용이 가능하다.
const multiplyTwo = function(x, y) {
return x * y;
}
console.log(multiplyTwo(4,5));
-----------------------------------------------------------------------------
(출력)
202. Arguments
다음은 arguments 이다.
즉, 함수 호출할 때 받은 매개변수 값들을 의미한다.
어떤 매개변수(파라미터)를 받았는지 확인할 때 유용하다.
// arguments 객체
const multiplyThree = function(x, y, z){
console.log(arguments); // 함수를 실행했을 때 매개변수에 들어간 값들을 확인할 수 있다.
return x * y * z;
}
console.log(multiplyThree(2,3,4));
// 무한하게 매개변수를 받는 방법
const multiplyAll = function(...arguments){ // ...arguments 를 사용한다
return Object.values(arguments).reduce((a,b) => a*b, 1); // Array 부분에서 자세하게 다룸.
}
console.log(multiplyAll(3,4,5,6,7));
-----------------------------------------------------------------------------
(출력)
[Arguments] { '0': 2, '1': 3, '2': 4 } // 이렇게 arguments 값들이 차례대로 출력
24
2520
203. 즉시 실행 함수 (Immediately Invoked Function)
함수명을 정의하지 않고 함수 자체를 괄호에 묶어주어 정의를 하자마자 실행된다.
즉, 호출이 필요없이 바로 실행이 되는 함수
(function(x, y) {
console.log(x*y);
})(4, 5)
-----------------------------------------------------------------------------
(출력)
204. 함수 타입 확인
typeof를 통해 확인해본 결과 function 이라는 타입이 나온다.
하지만 선언한 함수명을 Object와 instanceof 키워드로 타입을 비교해보았을 때 동일한 것을 확인할 수 있었다.
console.log(typeof(multiply));
// instanceof 는 비교하는 키워드, multiply와 Object가 같은 타입인가?
console.log(multiply instanceof Object);
-----------------------------------------------------------------------------
(출력)
function
true다음으로는 Array Function 에 대해 작성할 예정이다.
