5

[Js 딥다이브] 17. 생성자 함수에 의한 객체 생성

Js 에서 객체를 생성하는 방법은 여러가지가 있다. 객체는 프로퍼티를 사용해서 객체의 상태를 표현하고, 객체의 메서드를 활용해서 프로퍼티를 참조하거나 프로퍼티 상태를 변경한다. 리터럴로 생성하는 방법은 간단하고 직관적이라는 장점이 있지만, 동일한 프로퍼티를 갖는 객체를 여러개 생성해야 하는 경우, 같은 코드를 반복적으로 써야 하므로 굉장히 비효율적이다. 이를 해결할 수 있는 생성자 함수로 객체를 생성하는 방법을 알아보자! 1. new 연산자 + Object 생성자 함수 const my_obj = new Object(); my_obj.Id = 'woong'; console.log(my_obj); // {Id : woong} 🧐 생성자 함수? new 연산자와 함께 호출하여 객체를 생성하는 함수를 뜻한다 꼭 ..

카테고리 없음 2022.11.20

[Js 딥다이브] 15. let, const

📌 var 키워드의 단점 1. 변수의 중복 선언 허용 var x = 10; console.log(x); var x = 20; console.log(x); 이미 선언되고 초기화까지 완료된 변수 x 의 중복선언을 허용한다. 전역변수가 의도치않게 값이 변경되면 에러를 발생시킬 가능성이 매우 높다. 2. 함수 레벨 스코프 var x = 1; if(true){ var x = 10; } console.log(x); 함수 레벨 스코프에서 선언한 변수가 아니면, 스코프를 생성하지 않고 전역변수로 취급한다. 이 문제 역시 의도치 않게 변수 값을 변경시킨다. 3. 호이스팅 console.log(x); var x = 1; 런타임 이전 자바스크립트 엔진에 의해서 선언문이 제일 선두로 끌어 올려지고 undefined 로 초기화..

javascript/DeepDive 2022.11.14

[Js 딥다이브] 12. 함수 (1)

📌 Js 에서 함수 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this 바인팅, 프로토타입, 모듈화와 깊은 관련이 있기 때문에 js 함수는 정말 중요한 개념이다! 프로그래밍에서 함수를 사용하는 이유? var x = prompt(); var y = prompt(); if (Number(x) === Number(y)){ console.log(true) }else{ console.log(false) } function is_same(a, b){ return Number(a) === Number(b) } console.log(is_same(x, y)) 함수의 가장 큰 장점은 코드의 재사용이다. 함수 없이 두개를 비교해보는 경우를 생각해보면 if / else 를 반복적으로 써야하지..

javascript/DeepDive 2022.11.05

[DEEP DIVE] 11. 원시 vs 객체

원시 vs 객체 원시 : 원시 값을 변수에 할당하면 변수가 가르키게 되는 메모리의 주소에 실제 값이 저장된다. 이 변수를 다른 변수에 할당하면, 원시 값이 복사되어 전달된다 객체 : 객체를 변수에 할당하면 변수가 가르키게 되는 메모리의 주소에 참조 값(객체를 저장하고 있는 메모리의 첫번째 주소)이 저장된다. 이 변수를 다른 변수에 할당하면, 참조 값이 복사되어 전달된다 1. 원시 값 원시 값은 변경 불가능한 값이다. 즉, 한번 생성된 원시 값은 읽기 전용으로써 변경할 수가 없다. 🧐 '값을 변경할 수 없다.' 의 구체적인 의미가 무엇일까? var x = 10 x = 20 console.log(x) // 20 변수는 메모리 공간에서 주소를 식별하는 식별자이다. x는 10이 저장된 메모리의 주소를 기억하고,..

javascript/DeepDive 2022.11.02

[DEEP DIVE] 10. 객체 리터럴

1. 객체란? JS 는 객체 기반의 프로그래밍 언어이며, JS 를 구성하는 거의 모든 것이 "객체" 이다! 원시타입(Number, String, Boolean ...)의 데이터를 제외한 나머지는 모두 객체로 취급된다고 생각하면 편하다 !! 원시 타입의 데이터들은 변경 불가능 한 값이다 !! var x = 10 x = 20 console.log(x) // 20 이것은, x의 값이 변경된 것 처럼 보이지만 실제로는 10이 저장된 메모리 주소에 접근해서 10을 20으로 변경하는 것이 아니라, 새로운 메모리 주소에 값 20을 넣고 x가 그것을 가르키도록 하는것이다. 값을 변경하는 것이 아니라 x가 가르키는 메모리 주소가 변경된다. 10이 저장된 메모리 주소는 이제 아무런 변수도 가르키고 있지 않기 때문에 자동..

javascript/DeepDive 2022.10.28