Week3 - JavaScript

🧩 추상화

• 복잡한 것들을 목적에 맞게 단순화 하는 작업

  📌 목적을 명확히
  📌 불필요한 것들을 숨기기
  📌 핵심만 드러내기

🧩 변수

📌 꼭 지켜야할 규칙

• 식별자 문자 (a-z, A-Z), 밑줄(_), 달러 기호($)로 시작
• 두번째 글자부터 숫자(0-9) 가능
• 대소문자 구별
• 예약어 사용 금지

📌 지키면 좋은 규칙

• 의미없는 이름 X
• 너무 추상적인 이름 X (ex. name, age)
• 모든 변수 이름은 카멜 표기법

  카멜 표기법이란?
  첫 문자의 첫 글자는 소문자, 다음 글자 첫 문자부터 대문자

🧩 콘솔 출력

console.log(값);

🧩 함수

• 함수 작성시, return문을 선언하지 않는다면 undefined 값 출력

function 변수명 (파라미터) {
	함수 내용;
};

🧩 문자열 활용

console.log("'I'm Iron man");				# 따옴표가 하나만 있을때
console.log("He said \"I\'m Iron man");		# 역슬래쉬 (\) 사용
console.log(`He said "I'm Iron man`);		# 백틱 (``) 사용

🧩 boolean

• True / False
• AND &&
• OR ||
• NOT ! !! 두번 사용도 가능 (그럼 반대의 반대)
  
  

🧩 typeof

• 값앞에 typeof를 붙인다.

console.log(typeof 100);
console.log(typeof '100');
console.log(typeof true);

🧩 형 변환

• 처음 값에 정해진 자료형을 다른 자료형으로 바꾸는 것

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

• 산술 연산자는 연산 되어지는 값을 모두 숫자형으로 형변환
• 만약, 더하기에서는 문자열을 연결하는 기능이 더 강하다

console.log(4 + '2');	# 42
console.log(4 - '2');	# 2
console.log(4 - true);	# 3
console.log(4 % 'two');	# NaN

• 같음 비교 연산자

console.log(1 === '1');	# 일치, 불일치(!==)		# false
console.log(1 === true);					  # false
console.log(1 == '1');	# 동등, 부등(!=)		# true
console.log(1 == true);						  # true

🧩 null vs undefined

📌 null

• 의도적으로 표현할 때 사용하는 값
• null이라고 값을 임의로 정함

📌 undefined

• 값이 없다는 것을 확인하는 값
• 변수 선언 후, 값을 설정하지 않으면 나온다.

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

🧩 상수

• 변하지 않고 일정한 값을 유지
• const로 선언하고, 값을 변경할 수 없음.
• 초기값을 무조건 줘야함.
• 네이밍은 무조건 대문자 작성 ( 문자가 두개면 _ 구분 )

const round = 30;

🧩 객체

• Key-Value 한 쌍의 객체 속성
• 객체의 한쌍 = 속성 (Property)
• 중괄호 {} 사용

{
	brandName: 'oauch',
    bornYear: 2023,
    isVerNice: true,
    worstCourse: null,
    bestCommit: {
    	commit: 'bee',
        msg: 'yee'
    }
}				# 이걸 console.log를 찍으면 object(객체)로 출력된다.

📌 속성 (Property) 네이밍 주의사항

• 첫번째 글자 문자, 밑줄(_), 달러 기호($) 중 하나로 시작
• 띄어쓰기 ❌
• 하이픈(-) ❌
  
  

🧩 객체 데이터 접근하기

• 점 표기법 (objectName.propertyName)

console.log(yee.bornYear);

• 대괄호 표기법 (objectName['propertyName'])

console.log(yee['bornYear']);
console.log(yee.bestCommit['commit']);

🧩 객체 다루기

📌 객체 프로퍼티 값 변경하기

console.log(yee.brandName);		# oauch
yee.brandName = 'spiderman';
console.log(yee.brandName);		# spiderman

📌 객체 프로퍼티 값 추가하기

console.log(yee.yee);			# undefined
yee.yee = 'yeeeeee';
console.log(yee.yee);			# yeeeeee

📌 객체 프로퍼티 값 삭제하기

• delete objectName.propertyName

console.log(yee.worstCourse);	# null
delete yee.worstCourse
console.log(yee.worstCourse);	# undefined

📌 객체 프로퍼티 값 확인하기

• 'propertyName' in objectName

console.log('brandName' in yee);

🧩 객체와 메소드

let greetings = {
  sayHello: function () {
    console.log('Hello!');
  },
  sayHi: function () {
    console.log('Hi!');
  },
  sayBye: function () {
    console.log('Bye!');
  }
};

greetings.sayHello();
greetings.sayHi();
greetings.sayBye();

🧩 for...in 반복문

let yee = {
  brandName: 'oauch',
  bornYear: 2023,
  isVerNice: true,
  worstCourse: null,
  bestCommit: {
               commit: 'bee',
               msg: 'yee'
    }
}

for (let key in yee) {
  console.log(yee);			// 속성 이름 출력
}

for (let key in yee) {
  console.log(yee[key]);	// 속성 값 출력
}

🧩 배열

• 대괄호[] 사용

let members = ['yee', 'bee', 'hi'];	// 배열

console.log(members.length);		// 3
console.log(members['length']);		// 3

📌 배열의 요소 삭제 splice()

• 전달된 인덱스부터 그 뒤의 모든 요소를 삭제
• splice(startIndex, deleteCount, item1, item2...)
• startIndex : 시작 인덱스
• deleteCount : 삭제할 갯수
• item : 삭제한 자리에 값 추가 (여러개 추가 가능)

let mem = ['1', '2', '3'];

mem.splice(1);
console.log(mem);	// 결과값 : ['1']

let mem = ['1', '2', '3'];

mem.splice(1, 1);
console.log(mem);	// 결과값 : ['1', '3']

• 다음과 같이 사용하면 값만 추가 할 수 있음

let mem = ['1', '2', '3'];

mem.splice(1, 0, 'ss', 'dd');
console.log(mem);	// 결과값 : [ '1', 'ss', 'dd', '2', '3' ]

• 다음과 같이 사용하면 값을 변경할 수 있음

let mem = ['1', '2', '3'];

mem.splice(1, 1, 'ss');
console.log(mem);	// 결과값 : ['1', 'ss', '3']

📌 배열의 첫 요소 삭제

• shift()

let mem = ['1', '2', '3'];

mem.shift();
console.log(mem);	// 결과값 : ['2', '3']

📌 배열의 마지막 요소를 삭제

• pop()

let mem = ['1', '2', '3'];

mem.pop();
console.log(mem);	// 결과값 : ['1', '2']

📌 배열의 첫 요소 값 추가

• unshift(value)

let mem = ['1', '2', '3'];

mem.unshift('0');
console.log(mem);	// 결과값 : ['0', '1', '2', '3']

📌 배열의 마지막 요소 값 추가

• push(value)

let mem = ['1', '2', '3'];

mem.push('0');
console.log(mem);	// 결과값 : ['1', '2', '3', '0']

📌 for...of 반복문

let mem = ['1', '2', '3'];

for (let i of mem) {
  console.log(i);
}

📌 다차원 배열

let two = [[1, 2], [3, 4]]

console.log(two[0][1])	// 결과값 : 2

🧩 숫자형 메소드

📌 toFixed

• 소수를 다룰 때 사용

let num = 0.4592;

console.log(num.toFixed(3));	// 0.459

📌 toString

• 파라미터로 전달하는 숫자의 진법을 변환

let num = 255;

console.log(num.toString(2));	// 11111111
console.log(num.toString(8));	// 377
console.log(num.toString(16));	// ff

🧩 Math 객체

📌 절댓값

• Math.abs()

console.log(Math.abs(-10));		// 10

📌 최댓값

• Math.max()

console.log(Math.max(2, -1, 4, 5, 0));	// 5

📌 최솟값

• Math.min()

console.log(Math.min(2, -1, 4, 5, 0));	// -1

📌 거듭제곱

• Math.pow()

console.log(Math.pow(2, 3));	// 8

📌 제곱근

• 제곱의 반대
• Math.sqrt()

console.log(Math.sqrt(25));		// 5

📌 반올림

• Math.round()

console.log(Math.round(2.3));	// 2
console.log(Math.round(2.5));	// 3

📌 버림과 올림 (Floor and Ceil)

• 버림 : Math.floor()
• 올림 : Math.ceil()

console.log(Math.floor(2.3));	// 2
console.log(Math.floor(2.5));	// 2
...
console.log(Math.ceil(2.3));	// 3
console.log(Math.ceil(2.5));	// 3

📌 난수 (Random)

• 0이상 1미만의 값 랜덤으로 나옴
• Math.random()

console.log(Math.random());

📌 문자열

let myString = "Hi My";

// 부분 문자열 접근 slice(start, end)
console.log(myString.slice(0, 2));	// 0번 인덱스부터 1번까지
console.log(myString.slice(3));		// 시작지점부터 끝까지
console.log(myString.slice());		// 문자열 전체

// 양 끝 공백 제거
console.log(myString.trim());

// 대소문자 변환
console.log(myString.toUpperCase());
console.log(myString.toLowerCase());

// 요소 탐색
console.log(myString.indexOf('a'));			// 맨앞 인덱스부터
console.log(myString.lastIndexOf('i'));		// 맨뒤 인덱스부터

// 요소 접근
console.log(myString[3]);
console.log(myString.charAt(3));

// 문자열 길이
console.log(myString.length);

🧩 기본형 vs 참조형

• 기본형 : Number, String, Boolean, Null, Undefined
• 참조형 : Object

기본형은 변수 = 값
참조형은 변수 = 주소값

기본형은 값이 복사되서 값 자체가 바뀌지만
참조형은 주소를 참조하고 있기 때문에 값이 바뀌면 원래 값도 같이 바뀐다.

🧩 참조형 복사하기

• slice를 활용한 복사 (이거는 배열에서 가능하다)

let numbers1 = [1, 2, 3];
let numbers2 = numbers1.slice();

numbers2.push(4);

console.log(numbers1);
console.log(numbers2);

• 객체 복사하기

function cloneObject(object) {		// 함수를 만들어서 사용하는게 가장 좋은거 같다.
  let temp = {};
  
  for (let key in object) {
    temp[key] = object[key];
  }
  
  return temp;
}

let course1 = {
  title: '파이썬 프로그래밍 기초',
  lang: 'Python',
  pre: []
};

let course2 = cloneObject(course1);

course2.title = '리즘의 정석';
course2.pre.push('잉..');

console.log(course1);
console.log(course2);