const users = ['Heropy', 'Neo', 'Amy'];
for (const user of users) {
console.log(user) // users
}
const heropy = {
name: 'Heropy',
age: 85,
isValid: true
};
for (const key in heropy) {
console.log(key, heropy[key]) // name Heropy, age 85, inValid true
}
let i = 0 // 시작
while (i < 3) { // 종료
console.log(i)
i +=1 // 변화
}
let j = 0 // 시작
do {
console.log(j)
j += 1 // 변화
} while (j < 3) // 종료
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.toFixed(크기)// 소숫점 자리를 자른다 ( !문자열로 잘린다! )
const num = 3.14239493293
console.log (
parseFloat(num.toFixed(2)) // 3.14
)
Number.isNaN // NaN인지 Boolean 값으로 판별
Number.parseInt // 문자열로 변환하고 n진수로 변환
Number.parseFloat
math.abs // 절대값을 반환
math.ceil // 소수점 이하를 올림
math.round // 소수점 이하를 반올림
math.floor // 소수점 이하를 내림
math.min // 가장 작은 수를 반환
math.max // 가장 큰 수를 반환
math.random // 0과 1 사이에 부동소숫점 의사 난수를 반환
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 (인덱스, 삭제개수, 추가데이터)
obj.entries // 객체가 가지고 있는 모든 프로퍼티를 키와 값 쌍으로 배열 형태로 반환
obj.keys // 객체가 가진 key 값을 모아 반환
object.values // 객체가 가진 value 값을 모아 반환
object.defineproperty // 객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후, 해당 객체를 반환
// Object.defineProperty(정의할 객체, 새로 수정하거나 정의하려는 객체, 새로운 속성을 기술하는 객체)
object.assign // 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣은 후 반환
.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 (기본형)
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
/* 같은 메모리 주소를 참조하는 변수들이 있을 때, 하나의 변수의 값을 수정하게 되면 다른변수에서 값을 확인할 때 의도치 않게 값이 변해져 있을 수 있다. 주의해서 사용해야 한다. 그래서 참조형 데이터를 관리할 때, 할당연산자(=)를 사용하는 것이 의도치 않은 문제를 발생시킬 수 있기 때문에 복사를 사용해야 한다. 복사를 해야 변수 별로 따로 데이터를 관리 할 수 있으며 복사에는 얕은 복사와 깊은 복사가 있다. */
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에서 모두 변하는 것을 볼 수 있다.
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을 통해서 깊은 복사를 할 수 있다.
Reference