📌 변수 선언과 스코프 블록 스코프 안에서 정의된 변수 i는 블록 범위를 벗어나는 즉시 접근할 수 없습니다. 따라서 결과로는 ReferenceError가 나오게 됩니다. 이번엔 앞서 보았던 코드와 동일하나, 변수 선언을 let 대신 var를 이용했습니다. 이번엔 결과가 어떻게 될까요? 이에 대한 결과는 5입니다. 어떻게 블록을 벗어났음에도 불구하고 변수 i에 접근할 수 있는 것일까요? 결론부터 말하면, var 키워드는 for 문이 만들어낸 블록 스코프를 무시합니다. ⭐️ var 키워드 var 키워드로 정의한 변수는 블록 스코프를 무시하고, 함수 스코프만 따릅니다. 그러나, 주의! - 모든 블록 스코프를 무시하는 건 아닙니다. 화살표 함수의 블록 스코프는 무시하지 않습니다. 함수 스코프는 함수의 실행부터 ..
📌 스코프 개요 JavaScript에서 스코프(Scope)는 무엇일까요? 영어 단어의 뜻 자체도 ‘범위'를 의미하니까, JavaScript에서 이야기하는 스코프 역시 무언가 제한된 범위를 잘 들여다보기 위해 사용되는 개념이라고 추측해 볼 수 있습니다. 컴퓨터 공학, 그리고 JavaScript에서의 스코프는 "변수의 유효범위"로 사용됩니다. ⭐️ 스코프와 주요 규칙 스코프의 정의 - 스코프는 "변수 접근 규칙에 따른 유효 범위"입니다. 범위가 중괄호(블록) 또는 함수에 의해 나누어지고, 그 범위를 스코프라고 부릅니다. 여기서 우리가 알 수 있는 규칙은 바로 다음과 같습니다. 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능합니다. 반면에, 안쪽에서 선언한 변수는 바깥쪽 스코프에서는 사용할 수 없습..
📌 원시 자료형(primitive data type) 객체가 아니면서 method를 가지지 않는 6가지의 타입 = string, number, bigint, boolean, undefined, symbol, (null) ✅ 원시 자료형 특징 1) 변수 하나당 하나의 데이터만을 담는다. 2) 원시 자료형은 고정된 크기의 보관함(stack)에 담긴다.'stack'이라는 저장공간에 변수이름과 데이터가 함께 저장된다. 3) 원시 자료형이 변수에 할당될 때 값(value) 자체가 담긴다. 4) 원시 자료형 데이터를 복사할 때, 복사본을 수정해도 원본데이터에는 영향을 주지 않는다.(immutable) let A = 1; B = A; B;//1 B = 9; A;//1 B;//9 변수 A에 담긴 원시 자료형을 B에 복..
📌 원시 자료형과 참조 자료형 개요 타입 기초에서 학습한 number, string, boolean과 같은 고정된 저장 공간을 차지하는 데이터를 모두 원시 자료형(primitive data type)이라고 합니다. 반면에 대량의 데이터를 다루기에 적합한 배열과 객체는 참조 자료형(reference data type)이라고 분류합니다. 이런 분류는 데이터를 저장하는 방식에 따른 분류입니다. 참조 자료형인 배열과 객체를 학습하면서 원시 자료형과 달리 저장 공간이 계속 늘어날 수도 있을 것 같다는 생각이 드시지 않으셨나요? 만약 그런 질문이 생겼다면, 잘 학습하신 겁니다. 어떻게 저장 공간이 유동적으로 늘어날 수 있을까요? 그 이유는 배열과 객체, 그리고 함수가 담겨있는 저장 공간은 특별한 저장 공간을 사용하..
📌 배열 복사하기 배열을 새로운 변수에 할당해도 배열이 복사되지는 않습니다. 새로운 변수에는 원본 배열을 가리키는 참조만 할당되며, 원본 배열의 값을 바꾸면 새 변수에서도 그 변경점이 반영됩니다. let array1 = [1,2,3] let array1Reference = array1; array1[1] = 9; console.log(array1Reference); // Array [1,9,3] - array1의 변화가 array1Reference에도 나타남 - 복사본이 아님 배열의 복사본을 만들기 위해서는 새 배열을 위한 변수를 생성하고, 원본 배열 각각의 원시 요소에 대해서도 새로운 변수를 생성해야 합니다. (변수를 원시 값으로 초기화하면 참조를 할당하지 않고 값을 복사합니다.) JavaScript에..
🌼 GUI (Graphical User Interface) 그림이나 아이콘, 버튼 등을 통해 소통하는 방식이다. 우리가 마우스를 통해서 컴퓨터에서 어떤 작업을 할 때 그때의 환경을 GUI라고 한다. GUI 방식은 CLI에 비해 접근성이 좋아 GUI 방식의 도입으로 컴퓨터가 널리 활용되게 되었다. 🌼 CLI (Command Line Interface) CLI는 글자의 입출력을 통해 사용자와 컴퓨터 간 소통하는 방식이다. 초창기 컴퓨터가 발명되었을 때는 마우스가 없었기 때문에 자연스럽게 CLI 방법을 사용하였는데 CLI는 GUI와 다르게 새로운 언어를 배우는 것처럼 배워서 사용해야 해 진입 장벽이 있다. ❓개발자가 GUI 보다 CLI 환경을 더 선호하는 이유? 1) 성능 : CLI를 사용하면 Graphic ..
📌 배열 메서드 📐 원본 배열을 변경하는 메서드 : 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,여자친구를 변수로 정의해준다면 ..
📌 객체 객체 개요 JavaScript의 객체는 게임 캐릭터에 비유할 수 있습니다. 사용자들의 캐릭터는 동일하게 직업과 능력을 가지고 있지만, 세부적인 내용은 다릅니다. 누군가는 김코딩이라는 ID와 마법사라는 직업을 가지고 있지만, 다른 누군가는 박해커라는 ID와 전사라는 직업을 가지고 있습니다. 마찬가지로 사용자가 유어클래스에 가입할 때 입력할 항목은 모두 같지만, 입력하는 정보는 사용자마다 다릅니다. 이렇게 각기 다른 값을 가질 수 있지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있습니다. 이렇게 공통적인 속성을 가지는 경우 객체를 사용해야 합니다. ✏️ 객체란? 객체는 배열과 마찬가지로 다량의 데이터를 한 번에 다룰 수 있는 참조자료형 데이터 객체는 {..
