// prototype(프로토타입) /** * JavaScript는 프로토타입 기반 언어! * 프로토타입은 원형 객체를 의미한다. * mdn 프로토타입 : https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes */ // 실습 class Fruit { constructor(name, color, emoji) { this.name = name; this.color = color; this.emoji = emoji; } display() { console.log(`${this.emoji}`); } } let apple = new Fruit('apple', 'red', '🍎'); console.log(apple.name)..
/** * 📌 절차적 언어란? * 순차적인 명령의 조합 * 초기의 프로그래밍 언어는 일반적으로 절차적 언어라고 부름(C, 포트란 등) * * 📌 객체 지향 언어란? * "클래스"라고 부르는 데이터 모델의 청사진을 사용해 코드 작성 -> ✨ 데이터와 기능이 별개로 취급되지 않고, 한 번에 묶어서 처리할 수 있게 되었다!! * 현대의 언어들은 대부분 객체 지향의 특징을 갖고 있음(java, C++, C# 등) * JavaScript: 객체지향언어는 아니지만 객제 지향으로 작성 가능! * * 📌 OOP란? * OOP는 프로그램 설계 철학이다. * OOP의 모든 것은 "객체"로 그룹화된다. * OOP의 4가지 주요 개념을 통해 재사용성을 얻을 수 있다. * * 📌 클래스와 인스턴스란? * 클래스는 일종의 원형(..
/** * 📌 객체 지향 프로그래밍이란? * 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다. * * 🔎 * 메서드 - 메서드란 "객체에 딸린 함수" 이다. * prototype - prototype 이란 "모델의 청사진을 만들 때 쓰는 원형 객체(original form)" 입니다. * constructor - "인스턴스가 초기화될 때 실행하는 생성자 함수" * this - "함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context(execution context) * new 키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 바로 this의 값이 됨" */ // 1️⃣ 클래스 만들기(ES6 클래스 작성 문법!) // 1. 대문자로 시..
📌 클로저 개요 JavaScript에서는 다른 컴퓨터 언어와는 조금 다른 특성을 종종 가지고 있습니다. 그 중 종종 사용되는 클로저라는 개념에 대해서 알아보겠습니다. MDN의 클로저 정의에 따르면, 다음과 같습니다. "함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다." 여기서 주목할 만한 키워드는 "함수가 선언"된 "어휘적(lexical) 환경"입니다. 특이하게도 자바스크립트는 함수가 호출되는 환경과 별개로 기존에 선언되어 있던 환경, 즉 어휘적 환경을 기준으로 변수를 조회하려고 합니다. 이와 같은 이유로 "외부 함수의 변수에 접근할 수 있는 내부 함수"를 클로저 함수라고 합니다. ✏️ 어휘적환경(Lex..
📌 변수 선언과 스코프 블록 스코프 안에서 정의된 변수 i는 블록 범위를 벗어나는 즉시 접근할 수 없습니다. 따라서 결과로는 ReferenceError가 나오게 됩니다. 이번엔 앞서 보았던 코드와 동일하나, 변수 선언을 let 대신 var를 이용했습니다. 이번엔 결과가 어떻게 될까요? 이에 대한 결과는 5입니다. 어떻게 블록을 벗어났음에도 불구하고 변수 i에 접근할 수 있는 것일까요? 결론부터 말하면, var 키워드는 for 문이 만들어낸 블록 스코프를 무시합니다. ⭐️ var 키워드 var 키워드로 정의한 변수는 블록 스코프를 무시하고, 함수 스코프만 따릅니다. 그러나, 주의! - 모든 블록 스코프를 무시하는 건 아닙니다. 화살표 함수의 블록 스코프는 무시하지 않습니다. 함수 스코프는 함수의 실행부터 ..
📌 스코프 개요 JavaScript에서 스코프(Scope)는 무엇일까요? 영어 단어의 뜻 자체도 ‘범위'를 의미하니까, JavaScript에서 이야기하는 스코프 역시 무언가 제한된 범위를 잘 들여다보기 위해 사용되는 개념이라고 추측해 볼 수 있습니다. 컴퓨터 공학, 그리고 JavaScript에서의 스코프는 "변수의 유효범위"로 사용됩니다. ⭐️ 스코프와 주요 규칙 스코프의 정의 - 스코프는 "변수 접근 규칙에 따른 유효 범위"입니다. 범위가 중괄호(블록) 또는 함수에 의해 나누어지고, 그 범위를 스코프라고 부릅니다. 여기서 우리가 알 수 있는 규칙은 바로 다음과 같습니다. 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능합니다. 반면에, 안쪽에서 선언한 변수는 바깥쪽 스코프에서는 사용할 수 없습..
📌 원시 자료형과 참조 자료형 개요 타입 기초에서 학습한 number, string, boolean과 같은 고정된 저장 공간을 차지하는 데이터를 모두 원시 자료형(primitive data type)이라고 합니다. 반면에 대량의 데이터를 다루기에 적합한 배열과 객체는 참조 자료형(reference data type)이라고 분류합니다. 이런 분류는 데이터를 저장하는 방식에 따른 분류입니다. 참조 자료형인 배열과 객체를 학습하면서 원시 자료형과 달리 저장 공간이 계속 늘어날 수도 있을 것 같다는 생각이 드시지 않으셨나요? 만약 그런 질문이 생겼다면, 잘 학습하신 겁니다. 어떻게 저장 공간이 유동적으로 늘어날 수 있을까요? 그 이유는 배열과 객체, 그리고 함수가 담겨있는 저장 공간은 특별한 저장 공간을 사용하..
📌 배열 메서드 📐 원본 배열을 변경하는 메서드 : mutable ✅ push() : 맨 뒤 요소 추가 -> 변경된 배열의 길이 리턴 ✅ pop() : 맨 뒤 요소 제거 -> 제거된 요소 리턴 ✅ unshift() : 맨 앞 요소 추가 -> 변경된 배열의 길이 리턴 ✅ shift() : 맨 앞 요소 제거 -> 제거된 요소 리턴 ✅ splice() : 원본 배열 에서 잘라내기 원본 배열 보존 안됌. 추가도 가능 ✅ reverse() : 배열 인덱스 전체를 뒤집음 ✅ fill() : 배열 요소 전체를 () 로 바꿈 📐 원본 배열을 변경하지 않는 메서드 : Immutable ✅ slice () : 원본 배열 복사 ( 원본 배열 그대로 유지 ) 배열에 대해 얕은 복사가 일어난다. 깊은 복사와 얕은 복사 -> 이..
📌객체 내부에 값으로 들어 있는 배열과 객체 , 함수도 똑같은 방법으로 접근 가능하다. 위와 같은 객체가 있다고 치자. 객체 내부에 배열 키가 수강중인과목인 프로퍼티를 접근하겠다. 위 이미지를 보면 배열에서 쓰는 push() 메서드를 똑같은 방법으로 사용해 수강중인과목이라는 키를 가진 배열 값 끝에 'c언어'를 추가하였다. 객체 내부에 있는 객체인 키가 여자친구 인 프로퍼티를 접근하겠다. 여자친구라는 키를 가진 객체에 사는 곳이라는 키를 가진 프로퍼티 추가 했다. 객체 내부에 있는 함수에 접근하겠다. 키가 기쁨인 함수를 똑같이 호출 가능하다. 📌 객체 메서드 📐 Object.keys() -> key를 모아서 배열로 📐 Object.values( ) -> value(값)을 모아서 배열로 📐 Object.a..
📌 객체 다루기 ✅ 프로퍼티를 참조(Read)하는 방법은 두 가지가 있다. 위 객체를 선언 했다고 치자. 1️⃣ Dot notation Dot notation은 객체이름에 .(점)을 붙이고 키(속성명)을 입력해주면 된다. 2️⃣ Bracket notation Bracket notation은 사용시 반드시 문자열을 입력해야 한다. 위 이미지를 보면 [ ] 안에 문자열이 들어오는걸 볼 수 있다. 키(속성명)을 문자열로 입력해야 작동된다. 만약 문자열로 입력안하면 어떻게 될까? 위 이미지와 같은 에러가 뜨게 된다. 에러가 발생 했을 땐 항상 왜 에러가 발생했는지 읽어보자. ReferenceError , not defined 참조되지않고 정의가 되지않았다. 그렇다면 age,job,여자친구를 변수로 정의해준다면 ..
