[7주차] 3. Javascript의 자료형 & 조건문 & 반복문 & 함수

JavaScript

자료형(Data type)

• 동적 타이핑 Dynamic typing
  • 변수에 어떠한 데이터를 할당하느냐에 따라 그 변수의 type이 결정된다.
    • 값에 따라서 변수의 type이 달라지는 것이 동적 타이핑이라고 한다.
• 자바스크립트는 변수가 가지는 고정 타입이 없다. 하지만 타입 자체가 없는 것은 아니다
• console.log(변수, typeof 변수) : 변수에 할당된 값과 변수의 데이터 타입 확인

 

ES6 기준 제공하는 데이터 타입

기본 타입(Primitive values)

• 기본 자료형을 가지고 객체를 만들어 내는 것이 중요하다.

Boolean	- 표준 내장 객체로도 사용 가능 new Boolean(true 혹은 false); 생성자 함수를 통해 초기값으로 true 혹은 false를 지정한 객체(즉 type이 object)를 만들 수 있다. 하지만 주로 사용하진 않음 - 직관적으로 true와 false는 조건문안에 사용하게 되는데 객체일 경우 값을 false로 갖고 있어도 조건문 안에서 평가될 때 true로 평가 되기 때문에 조건문 안 내용이 실행된다. 그래서 헷갈릴 수 있기 때문에 사용하지 않는다 - Boolean(데이터 값) 일 경우에는 데이터 타입을 boolean으로 바꿔주는 개념으로 되어 조건문에서도 똑같이 평가되어 그값이 true이냐 false이냐에 따라 조건문 안 내용이 실행된다.
Null	- 값이 없다는 것을 의미하는 object  - 값을 가지고 있지만 비어있는 값을 가지고 있다는 뜻	Null과 Undefined는 == 연산자로 비교했을 때 같은 것이라고 판단된다. 그래서 정확하게 구분하기 위해서는 === 연산자로 비교해야 함(값 뿐만 아니라 타입까지 완벽하게 비교)
Undefined	아무것도 값을 할당되지 않았을 때 정의되지 않았다는 값을 가짐
Number	- 정수, 실수 등 - 숫자를 그대로 써서 변수에 할당할 시 그 변수는 number 라는 자료형 가짐 - NaN : 문자열을 Number 함수로 숫자형으로 바꿨을 때(형변환) 제대로 숫자로 변환이 되지 않았을 때 NaN은 number가 숫자가 아니라는 의미를 가지고 있는 숫자이다
String	- 문자열  - ‘ ’, “ “ 둘 다 가능  - +를 통해서 문자열 합치기 가능(다른 변수 이용해서도 가능)  - 여러가지 문자열을 포함시킬 경우가 빈번하기 때문에 ES6에서 이를 위해 templete string이라는 것이 있다. ` ` 로 문자열처럼 사용(자바스크립트 타입결과로는 string으로 나옴)  - ` ` 안에서 자바스크립트의 표현식을 사용해서 결과를 문자열로 바꿀 수 있다.  - 자주 사용하니 꼭 기억
Symbol	- ES6부터 나옴 - new Symbol로 사용 불가능(생성자 함수 사용 불가능) - Symbol( ); 함수를 호출하는 형태로만 사용 가능 - Symbol( ); 함수 인자로 각각 다른 변수에 같은 인수를 넣어 만들어도(보통은 같은 인수를 넣을 시 두변수는 같다고 뜰 수 있다) 그 각각의 변수는 고유한 다른 값Symbol이 되기 때문에 비교 연산자를 사용해서 비교했을 때 두변수는 같지 않다고 뜬다. - 고유한 값을 만들고 싶을 때 사용 - 만들어진 Symbol은 고유한 것을 의미 - 고유하게 이것을 가리켜서 처리할 것이 있을경우 symbol로 만들어서 처리하곤 한다.

객체 타입(Objects)

• 사용자 정의 타입도 만들 수 있고 node js 등의 표준 내장 객체 존재하는 데 이를 통해서 또다른 개체를 만들 수 있다.
• 나만의 객체를 만드는 것도 중요하고 이미 있는 표준 내장 객체를 활용하는 것도 중요하다.

---

조건문 Conditional Statements

• 프로그래밍에서 매우 중요한 요소
• 조건에 따라 실행되기 때문에 조건을 잘 만들어서 프로그램을 실행시켜야 함
• 조건문을 만드는 기본 개념은 표현식이 참으로 평가될 때, 실행되는 블록을 설정해서 만드는 것이다
  • 여기서 블록이란 { }로 설정하여 한 개 이상의 statement를 작성해놓은 코드 덩어리 이다.
• if (표현식) {
  표현식이 참으로 평가될 때, 실행되는 문장들의 모음
  }
• 블록 코드가 한 줄이면 { } 생략 가능
• 표현식에선 어떤 자료형이던지 참 혹은 거짓으로 평가됨
• 보통은 좁은 영역의 조건을 앞에 써주는 경향이 있다(더 적은 부분을 가지고 있는 것을 먼저 체크)

표현식이 거짓으로 평가되는 경우

• 정확히 Boolean 형의 false는 아니지만 Boolean으로 평가될 때 false값으로 평가될 때 그 값들을 falsy한 값들이라고 한다.
• Falsy한 값: false, 0, 빈 문자열(“), null, undefined, NaN(숫자가 아닌 값들)

표현식이 참으로 평가되는 경우

• Truthy
• Falsy한 값들의 반대로 Falsy한 값들을 제외한 모든 것들은 참으로 평가됨
• Truthy 한 값: true, 0이 아닌 숫자(-값도 가능), 빈 문자열이 아닌 문자열, null과 undefined 그리고 NaN이 아닌 모든 객체들

else { }

• if () else {}
• if 조건 표현식이 참인 경우 말고 아닐 경우 그때의 블록을 설정 가능
• 블록이 한 줄일 경우 중괄호 생략 가능

else if { }

• if에 해당하지 않을 때
• 여러 조건에 해당하는 경우를 설정할 수 있다

중첩

• else 안에 if문을 넣어 중첩해서 사용할 수 인ㅆ다.
• if() {} else if() {} else if() {} else {} = if () {} else{ if() {} else if() {} else{} }
• 벤다이어그램 생각하면서 하면 쉬움

논리 연산자를 이용한 조건문 평가

• &&(AND 연산자)
  • true && true = 두개 모두 참이면 참
  • true && false = 한개만 참이면 거짓
  • false && true = 한개만 참이면 거짓
  • false && false = 두개 모두 거짓이면 거짓
• | |(OR 연산자)
• true || true = 두개 모두 참이면 참
  • true || false = 한개만 참이면 참
  • false || true = 한개만 참이면 참
  • false || false = 두개 모두 거짓이면 거짓
• !(NOT 연산자) : 표현식 앞에 !를 붙이면 그 표현식의 평가의 반대의 값을 나타냄
  • !true = 참이면 거짓
  • !false = 거짓이면 참

논리연산자를 이용한 조건부 실행

• 논리 연산자를 이용하면 조건부를 쉽게 실행 가능
• 논리연산자 특성을 이용해서 사용
• 표현식 && 표현식
• 둘다 참일 때만 참
• 표현식은 앞을 먼저 평가하고 그다음에 뒤를 평가한다.(평가순서는 앞에서 뒤)
• 앞 표현식을 평가 해서 참일 때만, 뒤 표현식을 평가할 필요가 생기기 때문에 뒤의 표현식이 실행된다
• 앞 표현식의 평가가 거짓일 경우에는 뒤 표현식을 평가할 필요가 없기 때문에 실행하지 않는다.
• 표현식 || 표현식
  • 둘 중 하나만 참이면 참이다.
  • 앞 표현식을 평가를 해서 참이면, 뒤 표현식을 평가할 필요가 없어서 실행하지 않는다.
  • 앞 표현식을 평가를 해서 거짓일 경우에만, 뒤 표현식을 평가할 필요가 생기기 때문에 뒤의 표현식이 실행된다.

삼항 연산자(조건 ? A : B)를 이용한 조건부 실행

• 실행한 결과를 바로 어딘가에 할당할 때 사용하면 좋음
• 조건 ? 조건이 참이면 실행되는 표현식 : 조건이 거짓이면 실행되는 표현식
• { }를 사용할 수 없는 문법이기 때문에 하나의 표현식만 가능
• 표현식의 결과를 변수에 할당할 수 있음

switch를 이용한 조건문

• if 와 달리 어떤 표현식이 참인지 거짓인지 보다는 어떤 값인지 체크해서 맞으면 실행할 블록 나열
• switch 안에 default: 있을 시 조건이 맞든 틀리든(즉 항상 맞는 조건) default : 뒤의 구문 실행
• switch 안에 case 있는 경우 switch 조건의 결과가 case값인 경우를 뜻한다. (맞을 경우 case : 값 뒤 {} 안에 있는 구문 실행)
• case 맞을 경우 밑의 구문(ex) default) 실행하고 싶지 않을 때는 case 안에 break; 생성(case문 안에서 switch문 끝내기)
• break와 case 문의 순서를 잘 조정하여 원하는 코드를 만들어 낼 수 있도록 제대로 이해해야 함

---

반복문 Iteration Statements

• 어떤 특정 블록을 반복으로 실행하기 위한 문법
• 반복문이 없다면 직접 입력해서 몇번씩 써야 함
• 불필요한 반복을 하지 않는 능력이 중요

for 문

• 보통 유한한 횟수 만큼 반복될 때 사용
• for (반복의 조건) {실제로 반복될 내용}
• for(초기화; 반복조건(true 혹은 false로 판단); 반복이 된 후 실행되는 코드 { 반복이 되는 코드 블록}
  • 초기화 > 반복이 되는 코드 블록 > 반복이 된 후 실행되는 코드 > 반복조건(다시 반복할 건지 평가) > (반복조건 평가시 true일시) 반복이 된 후 실행되는 코드 > 반복조건 > for문 밖 구문
  • 반복 조건 true일 시 위 과정 계속 반복
  • 초기화 하면서 선언된 변수를 for {} 안 반복 블록에서 사용 가능(변수값이 계속 변화할 경우에는 const가 아닌 let으로 변수를 선언해줘야 한다)
  • 초기화 부분에는 변수 여러 개 선언 가능
• 어떠한 조건에 의해서 반복문을 즉시 종료하고 싶을 경우에는 {}안에서 break를 실행하면 됨
• 반복되는 블록안에서 continue;를 사용하면 거기서 해당 블록만 종료되고 다음 반복문으로 넘어가게 됨

 

• for(;;) { 반복될 내용 }
  • 조건 아무것도 없을 때
  • 반복될 내용이 계속 반복
  • 무한 루프
  • 그래서 { } 안에서 어떤 경우에 break가 걸릴 수 있도록 해서 무한 루프를 종료 할 수 있다.

 

while문

• while(조건) {조건이 거짓이 될 때 까지 반복 실행}
• 조건은 true 혹은 false로 평가
• 조건 자체를 true를 설정시 무한루프

do-while 문

• 처음에 조건을 먼저 판단하지 않고 먼저 실행한 다음에 그다음에 조건을 실행하고 반복
• while 문의 경우 조건을 판단해서 반복이 실행이 안되는 데 do-while의 경우 무조건 한번은 실행하게 됨
• do{조건이 거짓이 될 때까지 반복 실행} while(조건);

for of 문

• iterable 객체에 모두 사용할 수 있음
• iterable 객체
• iterable한 프로토콜을 자체적으로 내장되어 있는 객체 ex) 배열(for of문 사용시 그 요소가 하나하나 나오게 됨)
• custom하게 우리가 만든 객체에다가도 custom iterable 프로토콜을 설정하여 for of를 사용해서 쓸 수 있다.
• 배열에 속한 요소 하나하나가 어떤 변수로 쓸건지 앞에 정의하고 of 뒤에 배열 작성

for in 문

• 모든 프로퍼티 : 객체에서도 사용 가능, 객체 안에 있는 프로퍼티 하나하나를 for in을 돌릴 수 있다.
• 프로토 타입에 어떤 프로퍼티를 설정해놓으면 객체만 나올 수 있는 것처럼 보이지만 Object.prototype. 이후 작성된 것도 나오게 된다. 이처럼 개발자가 의도한대로 결과가 나오지 않을 수도 있어서 주의해서 사용해야 함
• 런타임 환경에 따라서 다르게 동작할 수 있기 때문에 조심해서 사용해야 함

---

함수 function

• 객체의 한 종류(그래서 new 생성자 함수로 만들기 가능)
• 표준 내장 객체
• js에서 중요한 부분
• 함수를 직접 만들고 활용할 줄 알아야 한다.
• 자바스크립트에서 굉장히 여러 군데에서 사용하고 자유롭게 사용하기 때문에 중요함수 만들기
• 함수가 실행하면 얻어지는 값을 return으로 지정해줄 수 있다.
  • 리턴 값에서 매개 변수 사용시 ` `안에 실행 값과 같이 ${}로 매개변수 작성

1. 선언적 함수

• function 함수이름(매개변수) {함수를 호출 시 실행하는 영역}
• 선언된 함수 사용시 어느 위치에서나 사용 가능
• 자바스크립트 특성 상 어디에 있던 간에 함수를 먼저 메모리에 올림

2. 익명 함수

• 익명함수를 만들어 특정 이름을 붙여주는 변수에 할당
• const,var등 변수선언 변수이름 =function (){} 이처럼 함수 이름없이 만들어진 것을 특정 변수에 담아 만들 수도 있음
• 변수가 끌어올림되는 현상인 호이스팅 때문에 함수가 변수에 할당되기 전에 그 함수가 할당된 변수를 작성시 변수만 끌어올림되고 그 안에 들어있는 함수는 인식하지 못한다.

3. new Function

• 변수선언 변수이름 = new Function(‘매개변수’, ‘함수의 바디’);
• 익명 함수와 유사하게 특정 변수에 할당해서 만듦
• 매개변수는 ‘ ‘으로 감싸 문자열로 들어감, 함수의 바디 또한 매개변수 선언이 다 끝나면 ‘’로 감싸 문자열로 맨마지막에 들어감
• 매개변수 없이 함수 바디만 작성 가능
• 선언적 함수 방식이 아니기 때문에 생성자 함수를 만드는 코드 전에 함수 호출식을 쓰게 되면 함수가 defined 되지 않았다는 에러가 뜨면서 호출이 안된다.

4. function 과 new Function();의 차이점

• new Function(); 안에서 사용하는 매개 변수는 new Function(); 선언된 줄보다 앞에서 선언되면 안된다. 단, global.매개변수 = 값;으로 전역속성으로 앞에서 선언해줄 수는 있다.
• function의 매개 변수는 바로 상위에 있는 선언된 변수를 받아들임, 보통의 경우는 이경우를 많이 씀

5. arrow function(ES6)

• ( ) => { 함수 바디 }
• 익명함수
• 익명 함수 처럼 변수에 ( ) => { 함수 바디 }를 할당해 사용하고 선언적 함수 방식으로는 쓸 수 없음
• 매개 변수 하나일 때 괄호 생략 가능
• 함수 바디 블록 한 줄 일 때 중괄호 생략 가능
• return 키워드 생략 가능
• 함수 자체가 간략하게 사용할 수 있음

6. new 함수( );

• 생성자 함수
• 어떤 객체를 생성하는 데 사용
• 새로운 객체를 만들어 낼 때 function로 틀을 만들고 new 함수를 통해 하나의 객체들로 사용할 수 있게 만들어줌
• fuction이라는 틀을 이용해서 여러 객체 생성 가능
• 객체를 만드는 하나의 방법
• function 안에서 this를 선언해주면 this를 사용할 수 있기 때문에 생성자 함수 사용 가능( this의 역할 : 객체로 만들어졌을 때 그 객체를 가리키는 용도)
• arrow function 안에는 this를 선언해줘도 this가 생기지 않기 때문에 생성자 함수를 만들어낼 수 없음.(객체를 만들려면 this가 있어서 그 this가 값이나 함수를 property를 넣어줄 수 있는데 this를 생성할 수 없어 그 역할을 수행 불가능해 생성자 함수 못만듦)
• 모든 생성자 함수로 사용되는 함수는 function 키워드를 이용한 함수이다.

7. 함수 안에서 함수를 만들어 리턴

• 함수는 객체의 한 종류이기 때문에 객체는 변수에 할당할 수 있다. 그래서 함수 안에서 마치 변수를 만들어서 밖으로 리턴하는 것처럼 함수를 만들어서 리턴할 수 있다,
• 첫번째 함수 사용시 받은 인자와 그 함수를 실행해서 만들어진 두번째 함수(첫번째 함수 안 함수)에 들어가는 인자는 시간 상 다르다.
• 함수를 만들어 낼 때 사용

8. 함수를 호출할 때 인자로 함수를 사용

• 함수는 객체기 때문에 함수를 호출할 때 인자로 함수를 넣어서 그 안에서 사용하게 할 수 있다.
• 익명함수, arrow 함수 등을 넣을 수도 있음