[Day-34] JavaScript②

2. 자료형

 

1) 문자열

 

● 템플릿 문자열

ES6에서 추가된 템플릿 문자열은 백틱(`)으로 문자열을 정의하는 방법

 템플릿 문자열은 기존 문자열 정의 방식처럼 큰따옴표나 작은따옴표로 문자열을 정의하지 않기 때문에 문자열에 큰따옴표나 작은따옴표가 있어도 영향을 받지 않습니다.

 

- Enter를 눌렀을 때 줄 바꿈이 적용됩니다. 그래서 이스케이프 문자를 사용하지 않아도 됩니다.

- ${} 문법을 이용해 문자열에 변수 또는 식을 넣을 수 있습니다. 다음 코드를 보면 템플릿 문자열의 ${} 안에 외부에 미리 정의한 변수 또는 표현식을 넣어 연산한 값을 변수에 할당합니다.

let string =`문자열은 큰따옴표(")나
 작은따옴표(')로 감싸면 됩니다.`;
console.log(string);

>>> 문자열은 큰따옴표(")나
 작은따옴표(')로 감싸면 됩니다.

let dan =3;
let gugu = 8;
let string =`${dan} 곱하기 ${gugu}은 ${dan*gugu}입니다.`;
console.log(string);

>>> 3 곱하기 8은 24입니다.

 

2) 숫자형

* , 부동 소수점 방식으로 실수를 표현하는 프로그래밍 언어는 항상 실수 계산이 정확하지 않다

 

let sum = 0.1 + 0.2;
console.log(sum);
>>> 0.30000000000000004

컴퓨터는 모든 데이터를 0과 1의 이진수로 표현하기 때문에 프로그래밍 언어에서 실수를 표현하는 방법은 항상 골칫거리입니다. 소수점이 있는 실수도 정수처럼 이진수로 표현해야 하기 때문이죠. 

 

3) 논리형

 

 

4) undefined

변수에 아무런 값도 할당되지 않는 상태를 나타내는 값 임시공간

변수나 상수를 컴퓨터 메모리 공간에 선언하면 반드시 생성한 공간에 저장할 데이터를 할당해야 합니다. 할당하지 않을 경우 자바스크립트 내부적으로 변수와 상수 공간에 임시로 데이터를 할당하는데, 이때 할당되는 값이 undefined

사용자가 임의로 정의하고 할당하는 자료형이 아닙니다.

let empty; 
console.log(empty); // undefined

5) null

변수를 의도적으로 비워 두기 위해 사용하는 값

변수나 상수를 선언하고 의도적으로 선언한 공간을 비워 둘 때 할당합니다.

 

6) 객체

● 배열 [ ]

배열(array)은 복수의 데이터를 정의할 수 있는 자료형

배열은 모든 자료형을 저장할 수 있습니다.

 

● 객체 리터럴 { }

객체 리터럴은 객체를 정의하는 가장 간단한 방법입니다. 객체 리터럴은 객체를 정의할 때 중괄호({})를 사용하며, 중괄호 안에는 키(key)와 값(value)의 한쌍으로 이루어진 속성(property)이 들어갑니다.

let studentScore = {
    koreanScore: 80,
    englishScore: 70,
    mathScore: 90,
    scienceScore: 60
};
console.log(studentScore.koreanScore); //80
console.log(studentScore['englishScore']); //70

 

3. 연산자

 

1) 산술 연산자

2) 대입 연산자와 복합 대입 연산자

3) 비교 연산자

==	x == y	x와 y의 값이 같으면 true를 반환합니다. (자료형이 달라도 됨)
===	x === y	x와 y의 값과 자료형이 같으면 true를 반환합니다.

4) 논리연산자

연산자	예	설명
&&	x && y	x가 참이면 y를 반환하고, 거짓이면 x를 반환합니다.
||	x || y	x가 참이면 x를 반환하고, 거짓이면 y를 반환합니다.
!	!x	x가 참이면 false를 반환하고, 거짓이면 true를 반환합니다.

●  AND 연산자(&&)는 피연산자를 왼쪽부터 평가해 평가 결과가 거짓이면 거짓이 나온 피연산자를 즉시 반환하고,

거짓이 아니면 마지막에 평가되는 피연산자를 반환합니다.

 

자바스크립트의 자료형 중 ""(빈 문자열), undefined, 0, null만 거짓으로 평가되고 나머지는 참으로 평가됩니다.

AND 연산자는 연산 결과가 거짓으로 평가되면 거짓으로 평가된 피연산자를 반환하므로 다음과 같은 결과가 나옵니다.

"" && "cat"; // ""
undefined && "cat"; // undefined
0 && "cat"; // 0
null && "cat"; // null

"cat" && "dog"; // "dog"
"cat" && "dog" && "bird"; // "bird"

 

●  OR 연산자(||)는 피연산자를 왼쪽부터 평가해 참으로 평가된 피연산자를 즉시 반환합니다. 만약 모든 피연산자가 참으로 평가되지 않으면 마지막에 평가된 피연산자를 반환합니다.

false || true || false; // true 
false || false; // false
false || "cat"; // "cat"
"" || "cat";    // "cat"
"dog" || "cat"; // "dog"

 

●  NOT 연산자(!)는 피연산자나 식을 평가한 논리 값의 반대 값(true → false, false → true)을 반환합니다.

!false; // true 
!(10 < 20); // false 
!(10 < 20 && 20 < 10); // true

 

5) 삼항연산자

x ? y : z

x가 참이면 y를 반환하고, x가 거짓이면 z를 반환합니다.

let score = 90;
let grade = score >= 90 ? 'A+' : 'B';
console.log(grade); //A+

 

6) 연산자 우선순위

 

7) 형변환

 

● 암시적 형 변환

let result =10 +"10";
console.log(result); // 1010

let num =10;
let strNum = "10";
if(num == strNum){ //문자열을 숫자형으로 형 변환
    console.log('equals');
}

● 명시적 형 변환

let num =10;
let strNum = "10";
if(String(num) == strNum){
    console.log('equals');
}

 

4. 조건문

1) if  / else / else if 문

 

2) switch문

 

3) if문과 조건식

 

5. 반복문

●  for...in

객체 리터럴을 반복할 경우 for...in 문으로 객체 리터럴을 반복 탐색하면 탐색 결과로 가변수에 객체 리터럴의 키가 할당되어 객체 리터럴의 키와 값을 출력할 수 있습니다.

for(가변수 in 배열/객체 리터럴){
  // 블록문
}

let obj = {name:"철수", age:"20"};
for(let key in obj){
  console.log(key + ": " + obj[key]);
}

//name: 철수
//age: 20

 

---

chap10.

함수

 

2.  함수 정의

1) 함수 선언문으로 함수 정의하기

함수 선언문은 function 키워드로 함수를 정의하는 방법

function 키워드 다음에 함수를 식별할 수 있도록 식별자를 붙임

function 식별자(){}

function gugudan(){ 
  for(let i = 1; i <= 9; i++){
    console.log(`3 * ${i} = ${3 * i}`);
  }  
}

 

2) 함수 표현식으로 함수 정의하기

함수도 변수에 할당할 수 있는데, 이를 이용한 함수 정의 방법을 함수 표현식

const 변수명 = function(){}; // 익명 함수
const 변수명 = function 식별자(){}; // 네이밍 함수

const gugudan = function gugudan(){ 
  for(let i = 1; i <= 9; i++){
    console.log(`3 * ${i} = ${3 * i}`);
  }  
};
gugudan(); // 함수 호출

함수 표현식으로 함수를 정의할 때는 function 키워드 다음에 오는 식별자가 아니라

변수명으로 호출해야 한다는 점을 유의해야 합니다.

const 키워드를 주로 사용합니다. var, let 키워드를 사용해도 문제없지만, const 키워드로 정의하는 것이 좋습니다. 보통 함수는 일관된 목적을 가진 코드 집합이라서 재정의해서도, 재할당해서도 안 되는 경우가 많기 때문

 

3) 화살표 함수로 함수 정의하기

화살표 함수는 익명 함수로만 정의할 수 있음

() => {};

const gugudan = () => { 
  for(let i = 1; i <= 9; i++){
    console.log(`3 * ${i} = ${3 * i}`);
  }  
};
gugudan();

 

3. 함수 기능 확장하기

1) 매개변수와 인수

ㆍ 매개변수:

함수를 정의할 때 외부에서 전달하는 데이터를 함수에서 받을 수 있도록 정의하는 변수

ㆍ 인수:

정의한 함수를 호출할 때 소괄호 안에 적는 전달하고 싶은 데이터

 

2) 매개변수의 특징

● 데이터 전달

함수의 매개변수는 함수 호출 시 전달되는 데이터가 기본으로 할당되지만, 함수를 호출할 때 데이터를 전달하지 않는다고 해서 오류가 발생하지는 않습니다

데이터를 전달하지만 매개변수가 없는 경우 또한 오류가 발생하진 않지만, 전달한 데이터를 받을 변수가 없어서 값을 전달해도 사용할 수 없습니다

- 화살표함수에서 매개변수가 1개일 경우 ()를 생략할 수 있습니다(있어도 상관없습니다)

 

● 기본값 할당

앞에서 매개변수를 정의하고 데이터를 전달하지 않으면 매개변수에는 undefined 값이 자동으로 할당된다고 했습니다. 그런데 ES6에서 기본값을 지정하는 방식이 추가됐습니다. 그래서 이제는 매개변수에 직접 데이터를 할당하는 방식으로 단순하게 기본값을 지정할 수 있습니다.

 

4. 함수의 특징 이해하기

1) 스코프

● 함수 스코프

함수 스코프는 함수에서 정의한 블록문만 스코프의 유효 범위로 인정하는 방식

함수 내부는 지역 스코프, 함수 외부는 전역 스코프 영역

let a = 10; //전역 스코프
function sum(){
    // let a = 10; //지역 스코프
    console.log(`함수 내부: ${a}`);
}
sum();
console.log(`함수 외부 : ${a}`);

//함수 내부: 10
//함수 외부: 10

function sum(){
    let a = 10; //지역 스코프
    console.log(`함수 내부: ${a}`);
}
sum();
console.log(`함수 외부 : ${a}`);

//함수 내부: 10
//ReferenceError: a is not defined

 

● 블록 스코프

블록 스코프는 {}로 구성된 블록문 기준으로 스코프의 유효 범위를 나누는 방식

 let과 const 키워드로 선언한 변수에 한해서만 적용됩니다.

 var 키워드는 함수 스코프 방식으로만 스코프를 나누기 때문에 다음 코드에서는 변수 a, b 모두 전역 스코프에서 선언한 것과 마찬가지

let a = 10;
{
    let b = 20;
    console.log(`코드 블록 내부 a: ${a}`);
    console.log(`코드 블록 내부 b: ${b}`);
}
console.log(`코드 블록 외부 a: ${a}`);
console.log(`코드 블록 외부 b: ${b}`);

//코드 블록 내부 a: 10
//코드 블록 내부 b: 20
//코드 블록 외부 a: 10
//ReferenceError: b is not defined

 

● 참조 우선순위

let, const 키워드는 같은 식별자의 중복 선언이 불가능합니다. 하지만 정확하게는 같은 스코프 영역에서 중복 선언이 불가능

let a = 10;
const b = 20;
function sum() {
    let a = 50;
    const b = 70;
    console.log(`함수 내부 a: ${a}`); //스코프가 다르면 가능
    console.log(`함수 내부 b: ${b}`);
}
sum();

 

2) 함수 호이스팅

호이스팅은 코드를 선언과 할당으로 나누었을 때, 선언부를 스코프 최상위로 끌어올리는 것을 말합니다

함수 선언문이나 var 키워드를 사용한 함수 표현식, 화살표 함수 방식은 전부 호이스팅의 대상

호이스팅은 var 키워드로 선언한 변수에만 적용되고 let과 const 키워드로 선언한 변수에는 적용되지 않습니다.

 

5. 즉시 실행 함수 사용하기

 즉시 실행 함수는 함수를 정의하면서 동시에 실행까지 하는 함수입니다.

즉시 실행 함수로 함수를 정의하면 전역 스코프가 오염되는 것을 방지할 수 있습

 한 번 실행되고 나면 메모리에 데이터가 남아 있지 않습니다. 

(function(){})();