5주차 4/23 ~ 4/29

---

FOR

FOR OF

For of 반복문은 배열에서 사용할 수 있는 for 반복문이다.

const users = ['Heropy', 'Neo', 'Amy'];

for (const user of users) {
	console.log(user) // users
} 

FOR IN

For in 반복문은 객체에서 사용할 수 있는 for 반복문이다.

const heropy = {
	name: 'Heropy',
	age: 85,
	isValid: true
};

for (const key in heropy) {
	console.log(key, heropy[key]) // name Heropy, age 85, inValid true
}

while

조건문이 참일 때 실행되는 반복문이다. 조건은 문장안이 실행되기 전에 참, 거짓을 판단하여 거짓이면 반복하지 않는다.

do while

while과 달리 조건이 거짓이더라도 1번은 반복한다.

let i = 0 // 시작
while (i < 3) { // 종료
	console.log(i)
	i +=1 // 변화
}

let j = 0 // 시작
do {
	console.log(j)
	j += 1 // 변화
} while (j < 3) // 종료 

표준 내장 객체

String

str.length //	문자열의 길이

str.includes(‘word’) //	‘word’가 포함되어 있어 있는지 판별하고 Boolean 값으로 반환

str.indexOf(‘word) //	‘word’ 일치하는 첫번째 인덱스 번호를 반환 , 일치하지 않으면 -1

str.match(/regexp/) //	/ 안 정규식과 매치되는 부분을 검색

str.parseInt(a, n) //	a를 문자열로 변환하고 n진수로 변환

str.replace (‘해당 단어’, ‘대체할 단어’) //	해당 단어와 일치하는 부분을 대체할 단어로 교체

str.slice (시작 index 번호, 마지막 index번호 직전까지만 (-1은 제일 마지막 문자)) //	문자열 일부 단어를 추출

str.split (‘구분자’) //	구분자를 이용하여 여러 문자열로 나눔

str.toUpperCase() //	대문자로 변환

str.toLowerCase() //	소문자로 변환

str.trim() //	양 끝 공백을 제거

Number

Number.toFixed(크기)//  소숫점 자리를 자른다 ( !문자열로 잘린다! )
const num = 3.14239493293
console.log ( 
	parseFloat(num.toFixed(2)) // 3.14
)

Number.isNaN //	NaN인지 Boolean 값으로 판별

Number.parseInt // 문자열로 변환하고 n진수로 변환

Number.parseFloat 

Math

math.abs //	절대값을 반환

math.ceil // 소수점 이하를 올림

math.round // 소수점 이하를 반올림

math.floor // 소수점 이하를 내림

math.min // 가장 작은 수를 반환

math.max // 가장 큰 수를 반환

math.random // 0과 1 사이에 부동소숫점 의사 난수를 반환

Array

Array.length //	배열의 길이

Array.concat (+추가할 배열, 여러개 가능) //	기존 배열을 합쳐 새로운 배열을 반환

Array.every //	배열 안의 모든 요소가 every 라는 콜백 판별 함수를 통과하는지 확인하고 Boolean 값으로 반환

Array.filter //	콜백에 리턴 함수 테스트를 통과하는 요소들을 배열로 반환

Array.find // 주어진 판별 함수를 만족하는 첫번째 요소의 값을 반환

Array.findIndex //	판별 함수를 만족하는 첫번째 인덱스 번호를 반환

Array.splice //	배열의 기존 요소를 삭제 또는 교체 새 요소를 추가하여 배열의 내용을 변경

Array.forEach //	메소드에 주어진 함수를 배열 요소 각각에 실행

Array.includes //	특정 요소가 포함되어 있는지 Boolean 값을 반환

Array.join // 배열의 모든 요소들을 특정한 기호들을 기준으로 연결하여 문자열로 반환

Array.map // 모든 요소 각각에 대하여 콜백 함수를 실행하여 반환된 결과를 모아 배열로 반환
// 콜백 함수를 사용하는 모든 메소드는 두번째 인수로 index가 들어간다. item, index, array 를 매개변수로 사용된다.

const arr = ['AR', '패션', '스포츠', '인테리어']
console.log (
	arr.map(item => {
		return {
			name : item 
		}
	})
)

Array.pop // 배열에서 마지막 요소를 제거하고 제거한 마지막 요소만 반환

Array.shift // 배열에서 첫번째 요소를 제거하고 제거한 첫번째 요소만 반환

Array.push // 배열의 끝에 하나 이상 요소를 추가하고 배열의 새로운 길이를 반환

Array.unshift // 배열의 앞에 하나 이상 요소를 추가하고 배열의 새로운 길이를 반환

Array.reduce //	배열의 각 요소에 주어진 함수를 실행하고 하나의 결과값을 반환

arr.reverse // 배열의 순서를 반전함, 원본 배열이 변형된다

arr.some // 콜백 (판별) 함수가 통과하는지 boolean 값으로 확인 빈 배열은 false

arr.splice // 배열의 기존 요소 추가, 삭제, 교체하여 배열의 내용을 변경 
			//	.splice (인덱스, 삭제개수, 추가데이터)

Object

obj.entries //	객체가 가지고 있는 모든 프로퍼티를 키와 값 쌍으로 배열 형태로 반환
obj.keys //	객체가 가진 key 값을 모아 반환
object.values // 객체가 가진 value 값을 모아 반환
object.defineproperty //	객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후, 해당 객체를 반환
	// Object.defineProperty(정의할 객체, 새로 수정하거나 정의하려는 객체, 새로운 속성을 기술하는 객체)
object.assign //	 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣은 후 반환

Date

.getMonth //	객체의 월 값을 현지 시간에 맞춰 반환
.getyears // !! Deprecated
.getDays //	객체의 요일 값을 현지 시간에 맞춰 반환
.getHours //	객체의 현재 시 값을 현지 시간에 맞춰 반환
.getMinutes //	객체의 현재 분 값을 현지 시간에 맞춰 반환
.getSeconds //	객체의 현재 초 값을 현지 시간에 맞춰 반환
Date.now //	UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초를 반환

전개연산자

배열 또는 객체를 하나하나 넘기는 용도로 사용된다

//배열
const arr = [1,2,3];
let test_arr = [4,5,6];
let test_arr2 = [4,5,6];

test_arr.push(arr);
console.log(test_arr); //[4, 5, 6, [1, 2, 3]]

test_arr2.push(...arr);
console.log(test_arr2); //[4, 5, 6, 1, 2, 3]


//객체
const obj = {
    "Name":"AJu",
    "Git":"zoz0312"
}
const test_obj = {
    "test1":1,
    "test2":2
}

const a_merge = { obj, test_obj }
const b_merge = { ...obj, ...test_obj }

console.log(a_merge);
/*
{
    obj: {
        "Name":"AJu",
        "Git":"zoz0312"
    },
    test_obj: {
        "test1":1,
        "test2":2
    }
}
*/

console.log(b_merge);
/*
{
    "Name":"AJu",
    "Git":"zoz0312",
    "test1":1,
    "test2":2
}
*/

구조 분해 할당

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다

//객체
const user =  {
	name: ‘Heropy’,
	age: 85,
	isValid: true
}
const { isValid } = user
console.log(isValid) // true


// 배열
const arr = [ 1, 2, 3]
const [,, z] = arr 

console.log(z) // 3

const user = {
  name: 'Heropy',
  age: 85
}
for (const [k, v] of Object.entries(user)) {
  console.log(k, v) // name heropy 
  					   age 85
}

데이터 가변성 불가변성

데이터 타입의 종류

Primitive Type (기본형)

Reference Type (참조형)

코드 예시

!! 참조형은 같은 주소를 바라볼 때, 하나의 변수에서 값이 수정되도 다른 변수에서도 수정된 값이 나옴 !!

//Primitive Type (기본형)
let a = 1
let b = 4
console.log(a, b, a === b)//1 4 false
b = a
console.log(a, b, a === b)//1 1 true
a = 7
console.log(a, b, a === b)//7 1 false
let c = 1 // 기존의 1이 들어있는 메모리 주소를 바라보게 됨! 
console.log(b, c, b === c)//1 1 true

/* 새로운 원시 데이터를 사용했을 때, 그 데이터가 기존의 메모리 주소에 들어 있다면 
기존에 존재하던 메모리 주소를 바라보게 해준다. 
원시 데이터는 불변하며 간단하게 생긴 것이 같으면 같은 데이터라고 이해해도 무방하다! */

//Reference Type (참조형)

/* 참조형 데이터의 경우 원시형 데이터와 다르게 모양이 같아도 다른 메모리 주소를 사용하고 있을 수 있다. 참조형 데이터는 새로운 값을 만들때 마다 새로운 메모리 주소에 할당되며 참조형 데이터는 불변성이 없다. */

let a = { k: 1}
let b = { k: 1}
console.log(a, b, a === b)//{ k: 1} { k: 1} false
b = a
console.log(a, b, a === b)//{k: 1} {k: 1} true
a.k = 7
b = a
console.log(a, b, a === b)//{k: 7} {k: 7} true
a.k = 2
console.log(a, b, a === b)//{k: 2} {k: 2} true 


/* 같은 메모리 주소를 참조하는 변수들이 있을 때, 하나의 변수의 값을 수정하게 되면 다른변수에서 값을 확인할 때 의도치 않게 값이 변해져 있을 수 있다.
!! 주의해서 사용하기 */

let c = b
console.log(a, b, c, a === c)//{k: 2} {k: 2} {k: 2} true
a.k = 9
console.log(a, b, c, a === c)//{k: 9} {k: 9} {k: 9} true

/* 같은 메모리 주소를 참조하는 변수들이 있을 때, 하나의 변수의 값을 수정하게 되면 다른변수에서 값을 확인할 때 의도치 않게 값이 변해져 있을 수 있다. 주의해서 사용해야 한다. 그래서 참조형 데이터를 관리할 때, 할당연산자(=)를 사용하는 것이 의도치 않은 문제를 발생시킬 수 있기 때문에 복사를 사용해야 한다. 복사를 해야 변수 별로 따로 데이터를 관리 할 수 있으며 복사에는 얕은 복사와 깊은 복사가 있다. */

얕은 복사, 깊은 복사

얕은 복사

object.assign

const user1 = {
  name: 'Flyda',
  age: 85,
  emails: ['dskjskjdad@gmail.com']
}
const copyUser1 = Object.assign({},user1)
console.log(copyUser1 === user1)//false

user1.age = 22
console.log('user', user1)//user {name: 'Flyda', age: 22, emails:  ['dskjskjdad@gmail.com']}
console.log('copyUser', copyUser1) //copyUser {name: 'Flyda', age: 85, emails:  ['dskjskjdad@gmail.com']}

전개연산자

const user = {
  name: 'Flyda',
  age: 85,
  emails: ['dskjskjdad@gmail.com']
}

const copyUser = {...user}
console.log(copyUser === user)//false

user.age = 22
console.log('user', user)//user {name: 'Flyda', age: 22, emails:  ['dskjskjdad@gmail.com']}
console.log('copyUser', copyUser) //copyUser {name: 'Flyda', age: 85, emails:  ['dskjskjdad@gmail.com']}

얕은 복사의 문제점

const user = {
  name: 'Flyda',
  age: 85,
  emails: ['dskjskjdad@gmail.com']
}

const copyUser = {...user}
console.log(copyUser === user)//false

user.age = 22
console.log('user', user)//user {name: 'Flyda', age: 22, emails:  ['dskjskjdad@gmail.com']}
console.log('copyUser', copyUser) //copyUser {name: 'Flyda', age: 85, emails:  ['dskjskjdad@gmail.com']}

console.log('-----')
console.log('-----')

//객체 데이터인 user는 복사했지만 user 안에 배열데이터인 emails는 같은 메모리주소를 여전히 공유하고 있음. 
user.emails.push('neo@naver.com')
console.log(user.emails === copyUser.emails) //true

console.log('user', user)//user {name: 'Flyda', age: 22, emails:  ['dskjskjdad@gmail.com', 'neo@naver.com']}
console.log('copyUser', copyUser) //copyUser {name: 'Flyda', age: 85, emails:  ['dskjskjdad@gmail.com', 'neo@naver.com']}

객체 데이터인 user는 복사했지만 user 안에 배열데이터인 emails는 같은 메모리주소를 여전히 공유하고 있어 emails가 user와 copyUser에서 모두 변하는 것을 볼 수 있다.

깊은 복사

lodash 라이브러리 사용

const user = {
  name: 'Flyda',
  age: 85,
  emails: ['dskjskjdad@gmail.com']
}

const copyUser = _.cloneDeep(user)
console.log(copyUser === user)//false

user.age = 22
console.log('user', user)//user {name: 'Flyda', age: 22, emails:  ['dskjskjdad@gmail.com']}
console.log('copyUser', copyUser) //copyUser {name: 'Flyda', age: 85, emails:  ['dskjskjdad@gmail.com']}

console.log('-----')
console.log('-----')


user.emails.push('neo@naver.com')
console.log(user.emails === copyUser.emails) //false

console.log('user', user)//user {name: 'Flyda', age: 22, emails:  ['dskjskjdad@gmail.com', 'neo@naver.com']}
console.log('copyUser', copyUser) //copyUser {name: 'Flyda', age: 85, emails:  ['dskjskjdad@gmail.com']}

참조형 데이터를 복사할 때, 그냥 단순한 객체 구조라면 얕은 복사를 활용하면 된다. 하지만 복사하려는 객체 데이터 안에 또다른 참조형 데이터가 있는 경우 lodash의 도움을 받아서 cloneDeep을 통해서 깊은 복사를 할 수 있다.

재귀(recursive) 함수

함수가 자신을 다시 호출하는 구조로 만들어진 함수이다.

재귀함수는 종료조건이 있어야 하며, 종료조건을 설정해주지 않으면 무한 반복을 하게된다.

재귀함수로 작성이 되는 코드는 반복문으로도 작성할 수 있다.

---

Reference

• [JavaScript] 전개 연산자 ( Spread Operator ) | 작성자 AJu