[CodeIt Study] 24년 05월 4주

숫자형

console.log(7%3); // 1

• modular 연산.
• 7을 3으로 나눈 나머지값

console.log(2**3) // 8

• 거듭제곱
• 즉 2 * 2 * 2 의 결과
• 사칙연산의 우선순위 규칙을 따라 연산한다 (ex. 덧셈보다 곱셈 먼저)

문자열 기본

console.log(코드잇); // 해당 결과는 에러
console.log('코드잇'); 
console.log("코드잇");

• 문자열을 작성할 때, 시작 따옴표와 끝 따옴표가 같아야 한다
• 만약 따옴표를 문자열로 사용하고 싶다면?

console.log("'I'm Iron Man");
console.log("He said \\"I'm Iron Man\\"");
console.log(`He said "I'm Iron Man"`);

문자열 연산

• 문자열에서의 덧셈은 문자열 연결을 의미한다

console.log("Hello" + "Codeit); //HelloCodeit
console.log("3" + "5"); // 35

Boolean

• 일상적 논리를 수학적으로 표현한 것
• 숫자가 아닌 진리값을 사용 (true , false)
• 명제가 필요하다 (참과 거짓이 명확한)
• AND → 두 명제 모두 참인지 확

x y x AND y

TRUE	TRUE	TRUE
TRUE	FALSE	FALSE
FALSE	TRUE	FALSE
FALSE	FALSE	FALSE

• OR → 두 명제중 하나라도 참이라면

x y x OR y

TRUE	TRUE	TRUE
TRUE	FALSE	TRUE
FALSE	TRUE	TRUE
FALSE	FALSE	FALSE

• NOT → 명제 결과의 반대

x NOT x

TRUE	FALSE
FALSE	TRUE

JS 에서 bool 연산

>=  왼쪽이 오른쪽보다 크거나 같다
<=  오른쪽이 왼쪽보다 크거나 같다
=== 서로 일치한다
!== 서로 불일치 한다 
== 동등하다
!= 동등하지 않
&&  AND 연산자
||  OR 연산자
!   NOT 연산자

typeof 연산자

• 현제 사용중인 값이 어떤 자료형인지 판별할 때 사용

function hello(){
}
console.log(typeof 101); //number
console.log(typeof 'Code'); // string
console.log(typeof 1.0); //number
console.log(typeof hello) // function

console.log(typeof 'hello' + 'codeit); //stringcodeit
console.log(typeof 8-3); //NaN

• NaN이 결과로 나오는 이유 → typeof 의 연산 우선순위는 사칙연산보다 높다
• 8의 자료형인 number - 3 의 결과를 출력하게 되어 NaN이 나온다

형변환

console.log('10' + '5'); //105

console.log(Number('10') + Number('5')); // 15
console.log(String(10) + String(5)); //105

• String() → 어떠한 자료형을 문자열의 형태로
• Number() → 숫자로 변환, 하지만 숫자형태가 아닌 자료형은 NaN
  • Boolean 의 경우 True = 1, False = 0이다
• Boolean() → Boolean 형태로의 변형, 빈문자, 0 , Nan의 값은 false

console.log('4' - true);

• 위 코드는 오류가 나올 것 같지만 실제 값은 3이 나온다
• 특정 규칙에 따라 자동형변환이 일어나는데, 유용하지만 때때로 예상치 못한 결과를 가져오기도 한다
• 산술연산자의 경우 기본적으로 두 자료형을 숫자형으로 바꾸어 연산한다
• • 연산자의 경우 숫자형으로 바꾸어 연산하는것 보다, 숫자를 문자열로 바꾸어 연산하는것의 우선순위가 더욱 높다

console.log(2 < '3');//true
console.log(2 > true);//true
console.log('2' <= false);//false
console.log('two' >= 1);//false

• 비교가 불가능한 경우에도 false 결과를 준다

템플릿 문자열

let year = 2018;
let month = 3;
let day = 11;

console.log(`생년월일은 ${year}년 ${month}월 ${day}일 입니다.`)

• 가독성을 높이고, 코드 생산성을 높인다
• 템플릿을 사용하면 ${} 내부에 함수또한 사용 가능
• 예를 들어 숫자의 두배를 반환하는 function getTwice(x) 가 있다면
• ${getTwice(3)}

null & undefined

• null : 값이 없다 (의도적으로 표현할 때 사용하는 값
• undefined : 값이 없다 (값이 없다는 것을 확인하는 값)

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

codeit = null;
console.log(codeit); // null

• 둘 모두 값이 없다 를 표현하지만 의도적인지 아닌지를 구분할 수 있다.

console.log(null === undefined); // false
console.log(null == undefined); // true

할당연산자

let x = 5;
let name = '코드잇'
x = x - 2;

• = 연산자는 오른쪽에 있는 피연산자를 왼쪽에 할당한다 라는 의미
• 수학적 의미와는 다르다
• 다음은 복합 할당 연산자이다.

// 다음 두 줄은 같습니다
x = x + 1;
x += 1;

// 다음 두 줄은 같습니다
x = x + 2;
x += 2;

// 다음 두 줄은 같습니다
x = x * 2;
x *= 2;

// 다음 두 줄은 같습니다
x = x - 3;
x -= 3;

// 다음 두 줄은 같습니다
x = x / 2;
x /= 2;

// 다음 두 줄은 같습니다
x = x % 7;
x %= 7;

함수의 실행순서

• 코드는 기본적으로 위에서부터 아래 방향으로 한줄씩 실행된다
• 함수 호출의 경우 → 함수명과 같은 함수를 찾고, 해당 함수의 코드를 실행한 뒤 → 함수를 호출했던 줄로 이동한다

Return 문 제대로 이해하기

• 어떤 값을 돌려주는 output
• 돌려준다 외에, 함수의 실행을 중단한다는 의미 또한 있다.

function square(a){
	console.log("전");
	return 0;
	console.log("후");
	}

• 위 예시에서 “후” 라는 문자열은 출력되지 않는

Optional 파라미터

• 함수는 파라미터를 사용해 다른 값들을 출력할 수 있다.
• 파라미터가 있는 함수에 파라미터를 전달하지 않는다면 undefined 로 표기된다
• 미리 함수의 파라미터에 값을 할당해 둘 수 있는데, 이것을 optional parameter 라 한다.
  • 이때 전달받은 파라미터 값이 없다면, 해당 값을 사용한다

변수의 scope

• 변수는 유효한 범위가 있다.
• 이 범위를 넘어가게 되면 오류가 발생한다

function myFunction(){
	let x= 3;
	console.log(x);
}

myFunction();
console.log(x);

• 마지막 console 문은 에러가 발생하게 되는데, 이유는 변수 x 에 대한 범위를 넘어갔기 때문
• 변수 x 는 myFunction() 함수 내에서만 존재하는 local 변수
• 함수 밖에서도 사용하고 싶다면 global 선언이 필요

상수

• 절대 변하지 않는 일정한 값

const pi = 3.14

• 위와 같이 let 이 아닌 const 를 사용한다.
• const 로 선언된 변수의 값을 변경하려 하면 에러가 난다

if 문

• 두가지 부분으로 나뉜다
• 조건부분, 동작부분

if(조건부분){
	동작부분
}

let temp = 0;
if(temp <= 0){
	console.log('물이 업니다.');
}else{
	console.log('물이 얼지 않습니다.');
}

• 위의 예제는 temp 라는 변수가 0보다 작거나 같으면 동작부분인 ‘물이 업니다’ 를 출력하도록, 0보다 클경우 else 문을 실행하도록 만들어 두었다.
• else if(조건)
  • if 문 외에 추가 조건을 더하는 경우

Switch 문

• default 는 필요에 따라 포함하지 않을 수도 있다.

switch(비교값){
	case(조건값1):
		동작;
		break;
	case(조건값2):
		동작;
		break;
	default:
		동작;
}

For 문

for (let i = 1; i <= 10; i++) {
  console.log(`${i} 코드잇 최고!`);
}

• 위 for 문은 10번 반복한다. 위 조건문을 뜯어보면 다음과 같은 뜻이다
• i 라는 변수를 1로 선언하고, i 가 10과 같거나 작을동안, 동작을 한번 실행할때 마다 i의 값을 1씩 늘린다

객체

• Object
• 여러가지 값을 한번에 저장하고 싶을 경우
• JS 의 거의 모든 부분이 객체이다

{
	brand: '코드잇',
	year : 2017,
	nice : true,
	worst : null
}

• 앞부분을 property name, 뒷부분을 property value라 부른다
• 객체 내의 객체 또한 가능하다
• typeof 연산자를 사용하여 객체의 data type 을 조회시 → object 출력
• 객체의 프로퍼티에 접근하는법은 다음과 같다

let codeit = {
	brand: '코드잇',
	'year' : 2017,
	nice : true,
	worst : null
}

console.log(codeit.brand); // 코드잇
console.log(codeit['year']);

• 객체의 프로퍼티 value 를 조절하기 위해서는 단순히 프로퍼티 value 에 접근하면 된다. 다음과 같다

codeit.brand = 'codeit';

• 만약 존재하지 않는 프로퍼티 name 에 값을 할당하게 되면 해당 name 이 객체에 추가된다.
• 삭제를 하기 위해서는 delete 연산자 사용

delete codeit.brand;

• 객체 내부에 없는 property name에 대한 값은 undefined 이다
• 객체 내부에 값이 있는지 확인하기 위해 in 연산자 사용

console.log('brand' in codeit);

객체와 메소드

• 연관성이 있는 여러 함수를 하나로 묶을때
• JS 의 변수는 함수도 저장 가능 하다

let greetings = {
	sayHello: function() {
		console.log("HELLO!");
	}
};

greetings.sayHello();

• 왜 굳이 메서드를 사용할까?
  • 어떤 객체의 고유 동작으로, 함수에 의미를 부여할 수 있기 때문
• 다른 객체 내의 각각의 함수는 이름이 중복되어도 상관없다

for..in 반복문

• 객체 내의 프로퍼티를 가지고 반복 동작할 때 사용

for(변수 in 객체){
	동작
}

let codeit = {
	brand: '코드잇',
	'year' : 2017,
	nice : true,
	worst : null
}

for(let key in codeit){
	console.log(key);
}
	

내장 객체

• JS 가 미리 가지고 있는 객체들

let myDate = new Date();

배열

let courseRank= [
	'자바스크립트 기초',
	'컴퓨터개론',
	'파이썬'
	];
	
console.log(courseRank[2]);

• 객체로 비유했을때, property name 에 해당하는 것은 index → 배열의 몇번째 요소에
• index 는 0번부터 시작한다.
• typeof 로 확인시 js 의 배열은 object 형이다
• 배열에서 사용할 수 있는 다양한 메서드 들이 있다
• 동적 배열이다 → 길이가 가변적이다
• 길이가 4 인 배열에 다음과 같이 추가할 수있다
  • member[5] = “a”;
  • 만약 이 상황에서 member[7] 에 값을 할당하게 된다면 → member[6] 는 empty 가 된다
• 배열 매소드

let members = ['a', 'b', 'c', 'd', 'e']

//삭제 메서드
delete members[4]; //4번째 요소만 삭제

members.splice(1); // 1번 인덱스 이후 모든 요소 삭
members.splice(1,2); //1번 인덱스 부터 2개 요소 삭
members.splice(1,1,'f','g'); // 1번 인덱스 부터 추

members.shift(); // 첫 요소 삭제
members.pop(); // 마지막 요소 삭제
members.unshift('h') // 첫요소로 값 추가
members.push('i'); // 마지막 요소로 값 추

members.indexOf('h') // h의 index 반환
members.lastIndexOf('h') // h 가 여러개 있을때 마지막 h 의 index 

members.includes('f'); // f 가 배열 내에 있는지 boolean 반환

members.reverse(); // 배열 뒤집

for..of

• 배열의 index 가 아닌 각 요소별로 접근할 수 있

for(변수 of 배열){
동작;
}

다차원 배열

• 배열 내의 배열

let twoD = [[1,2],[3,4]];
twoD[0][1]; // 2에 접

숫자형 메소드

let num = 0.3591;

num.toFixed(3); // 소수점 아래 네번째 자리값을 반올림
//0.359 출력

num.toString(2); // 2진수 
.toString(8); // 8진수

Math.abs() // 절댓값 반환
Math.max(2,1,4,7,9); // 가장 큰 값 반환
Math.min() // 최솟값 반환
Math.pow(2,3)  //거듭 제곱 2^3 
Math.sqrt(25); // root
Math.round(); // 반올림
Math.floor(); // 버림
Math.ceil(); // 올

문자열 심화

let myString = "Hi Codeit";;
myString[3]; // 3번 인덱스의 문자
myString.charAt(3); // 3번 인덱스의 문자
myString.length // 문자열 길이
myString.indexOf('i'); // i 의 index (lastIndexOf 또한 가능)

myString.toUpperCase(); // 대문자로
myString.toLowerCase(); // 소문자

myString.trim(); //앞 뒤 공백 제거

myString.slice(0,2); // 0 idx 부터 2 idx까지
myString.slice(3)); // 3번 idx 부터 끝까지

기본형과 참조형

• 변수에 객체값을 할당한 경우, 객체값이 어딘가에서 만들어지고 변수에는 해당 객체값으로의 주소가 저장된다
• 이런식으로 참조되는 형식의 자료형을 reference type 이라 한다
• 객체와 배열은 변수에 값이 할당될 때, 직접 저장이 아닌 주소값이 저장되는 참조형이다.
• 그렇기 때문에, 배열이나 객체가 할당된 변수 하나를 변경하면 다른 한쪽도 수정되는 일이 발생한다.

const, 변수, 상수 차이

• const : 재할당이 불가능한 값
• 상수 : 변경될 수 있는 값
• 주의 : 객체와 같은 참조형의 경우, 그 값이 저장되는 것이 아닌 주소가 저장되는 것이기에 변경될 수 있다