🔤 Language/🟨 JavaScript

JS. 얕은 복사와 깊은 복사

얕은 복사 / Shallow Copy '주소 값'을 복사한다는 의미한다. 얕은 복사의 경우 주소 값을 복사하기 때문에, 참조하고 있는 실제값은 같다. const user = { name: 'imae', age: 85, emails: ['kurt5451@naver.com'] } const copyUser = user console.log(copyUser === user) // 값: true user.age = 21 console.log(user) // 값: {name: 'imae', age: 21, email: array(1)} console.log(copyUser) // 값: {name: 'imae', age: 21, email: Array(1)} // user와 copyUser가 바라보는 메모리 주소가..

JS. 데이터 불변성(Immutability)

불변성(Immutability) 자바스크립트에서 불변성이란 객체가 생성된 이후 그 상태를 변경할 수 없는 것을 의미한다. 원시 데이터 원시 데이터는 불변성을 가지고 있다. String, Number, Boolean, undefined, null let a = 1 let b = 4 console.log(a, b, a === b) b = a // 변수 b에 a가 바라보는 메모리의 주소를 할당 console.log(a, b, a === b) a = 7 // a에 다른 데이터가 들어가므로 다른 메모리 주소가 할당 console.log(a, b, a === b) let c = 1 console.log(b, c, b === c) // c는 새로운 변수지만 원래 존재했던 데이터 값인 1이 할당되었으므로 // b와 c..

JS. 전개 연산자 / Spread Operator

전개 연산자 ECMAScript6(2015)에서 새로 추가된 전개 연산자(Spread Operator)란 객체나 배열의 값을 하나 하나 넘기는 용도로 사용할 수 있다. 전개 연산자를 사용하는 방법은 점 세개(...)를 붙이면 된다. const fruits = ['Apple', 'Banana', 'Cherry'] console.log(fruits) console.log(...fruits) // console.log('Apple', 'Banan', 'Cherry') function toObject(a, b, c) { return { a: a, b: b, c: c } } console.log(toObject(...fruits)) 실행 결과 [ 'Apple', 'Banana', 'Cherry' ] Apple B..

JS. 구조 분해 할당 / 비구조화 할당 / Destructuring assignment

구조 분해 할당 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. const user = { name: 'imae', age: 21, email: 'kurt5451@naver.com' } const { name, age, address = 'Korea' } = user // E.g, user.address console.log(`사용자의 이름은 ${name}입니다.`) console.log(`${name}의 나이는 ${age}살입니다.`) console.log(`${name}의 이메일 주소는 ${user.email}입니다.`) console.log(address) 실행 결과 사용자의 이름은 imae입니다. imae의 나이는 2..

JS. 객체

Object.assign() Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣는다. 그 후 대상 객체를 반환한다. const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(target); // expected output: Object { a: 1, b: 4, c: 5 } console.log(returnedTarget); // expected output: Object { a: 1, b: 4, c: 5 } 목표 객체에 출처 객체를 복사하는 것이다. b 요소는 중복해서 있었는데..

JS. 배열(2) / Array

.filter() filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. 만들어낸 조건에 맞는 내용을 걸러낸 새로운 배열을 반환한다. const numbers = [1, 2, 3, 4] const fruits = ['Apple', 'Banana', 'Cherry'] const a = numbers.map(number => number number < 3) console.log(b) console.log(numbers) 실행 결과 [ true, true, false, false ] [ 1, 2 ] [ 1, 2, 3, 4 ] .map()을 사용하면 number는 tr..

JS. 배열 (1) / Array

Array JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체이다. zero based를 사용하여 0부터 시작한다. 리터럴([])부분 뒤에 메소드를 붙여서 사용한다. const numbers = [1, 2, 3, 4] const fruits = ['Apple', 'Banana', 'Cherry'] console.log(numbers) console.log(numbers[1]) console.log(fruits) console.log(fruits[2]) 실행 결과 [ 1, 2, 3, 4 ] 2 [ 'Apple', 'Banana', 'Cherry' ] Cherry find() find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. 그런 ..

JS. 수학 객체 / Math

Math Math 는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이다. (※ 함수 객체가 아니다.) Math 는 Number 자료형만 지원한다. toFixed() toFixed() 메소드는 숫자를 고정 소수점으로 표기해 반환한다. const pi = 3.14159265358979 console.log(pi) const str = pi.toFixed(2) console.log(str) console.log(typeof str) 실행 결과 3.14159265358979 3.14 string toFixed() 메소드를 사용하면 String 자료형이다. parseInt() / parseFloat() parseInt() 함수는 문자열 인자를 파싱하여 특정 진수의 정수를 반환한다. parseFloa..

JS. 문자

JS string 검색 방법 string mdn을 검색하여 아래 사이트에 접속한다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN String 전역 객체는 문자열(문자의 나열)의 생성자입니다. developer.mozilla.org 이와 같은 사이트를 접속하면 mozilla에서 제공하는 문자와 관련된 자료를 찾을 수 있다. indexOf()라는 기술을 찾기 위해 command + F 를 눌러서 해당 매서드에 관련된 자료를 찾을 수 있었다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Gl..

JS. 상속(확장)

클래스 상속(확장) 클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있다. extends 클래스 확장 문법으로 우리의 예제를 보면 Vehicle이라는 클래스를 상속, 확장하려고 한다. Bicycle과 Car라는 클래스로 설명해보겠다. class Vehicle { constructor(name, whell) { this.name = name this.whell = whell } } const myVehicle = new Vehicle('운송수단', 2) console.log(myVehicle) 기존의 클래스 함수로써 저번 ES6 Classes에서 배운 내용이다. 운송수단으로써 Vehicle을 클래스로 선언한다. 그러면 Bicycle은 상속이 되는 것이고, Car는 license라는 매소드를 추가하..