Live and Learn

▣ Window Object 앞서 설명했던 객체 개념을 브라우저 전체에 적용했을 때, 객체 중에 최상위에 존재하는 객체를 윈도우 객체라고 합니다. 즉, 윈도우 객체는 브라우저 환경에서 자바스크립트의 정의된 객체, 메서드, 특성들 뿐만 아니라 선언해서 사용하는 변수 및 함수까지 포함하는 전역 객체(Global object)입니다. 물리적으로 반드시 일치하는 것은 아니지만 개념적으로 설명하자면 아래의 이미지와 비슷하다고 할 수 있습니다. 참고로 윈도우 객체의 특성 중 하나인 'document'는 HTML 문서, 즉 웹 페이지를 의미하며 이 것은 향후 다루게 될 HTML DOM(Document Object Model)의 구조 및 활용과 HTML의 동적 제어를 이해하는데 필수적인 중요한 내용입니다. □ 윈도우 ..

▣ 함수 선언식(Function Declaration) /* Function Declaration */ function greet() { console.log("Hello."); } let result = greet(); console.log(result); function greeting() { return "Hello."; } result = greeting(); console.log(result); 'function' 이라는 선언 키워드(연산자)와 함수 이름 그리고 ( ) 기호 및 { } 블럭을 함께 작성함으로써 함수가 선언되며, 함수 이름과 ( ) 기호를 사용하면 함수를 호출하게 됩니다. { } 블럭 안에는 함수 호출 시 실행되는 명령 구문을 작성합니다. 위의 코드와 아래의 결과를 살펴보면, gr..

▣ 반복문(Loop) 반복문에는 아래와 같이 세 가지 정도의 종류가 있으며 겉보기에 구조가 다르지만, 일반적으로 사용되는 코딩 패턴은 모두 다 초기화, 조건식, 반복자 증가, 명령의 네 가지 구문을 공통적으로 포함하고 있습니다.. □ For 반복문 for ( ; ; ) { // } 주로 사용하는 반복문 형태로 초기화, 조건식, 반복자 증가의 구문이 ( )안에 연속해서 들어가고, { } 블럭 안에는 명령 구문이 위치합니다. 코드의 실행은 먼저 초기화가 이루어진 다음, 조건식을 만족할 경우에 명령구문이 실행되고, 그 후에 반복자가 증가됩니다. 그런 다음 다시 조건식의 결과가 참인지 확인하여 참일 경우에 명령 구문도 한번 더 실행되는 순서로 진행되는데, 조건식을 만족하지 않을 때까지 계속됩니다. 참고로 반복자..

▣ 조건문(Conditional statement) 프로그램을 일종의 명령어(Instruction)들의 집합이라고 한다면, 명령어들을 조합하여 상황에 맞는 의사 결정을 하기 위해서 명령어들을 제어할 수 있는 표현문(Statement)이 필요합니다. 이것을 조건문(Conditional statement)이라고 합니다. □ 비교 연산자(Comparison operator) 와 논리 연산자(Logical operator) 조건문에서 참 또는 거짓을 판명하기 위해 필요한 조건식을 표현하는 데 주로 사용되는 기호들이 비교 연산자와 논리 연산자입니다. ① == , != '같다(Equal)' 와 '같지 않다(Not eqaul)'를 의미하며, 앞서 자료형의 종류(Data types)에서 설명한 바와 같이 자바스크립트의..

▣ 객체(Object Literals) 앞서 설명한 대로 '모든 대상을 특성(Property)을 가진 객체로 파악하고, 특성은 고유의 이름(name 또는 key)과 값(value)을 가진다."는 개념에서 디자인된 객체(Object Literals; 자료형 object와 다름)는 모든 정보를 { } 기호 안에 포함하고 있습니다. 즉, 객체는 { } 기호 내에 있는 특성들의 집합으로 정의되고, 특성은 이름과 값의 쌍으로 이루어져 있으며, 값은 숫자, 문자, 함수, 객체 등 다양한 형태가 될 수 있습니다. □ [ ] 표기법(Bracket Notation)과 . 표기법(Dot Notation) /* Object Literals */ const person = { firstName: "John", lastName..

▣ 배열 메서드(Array Methods) 배열 구조의 자료를 처리하기 위한 특성 및 메서드들은 다양한 기능을 포함하고 있습니다. 그중에서 대표적인 몇 가지를 살펴보겠습니다. □ 배열 메서드 예시1 const numbers1 = [43, 56, 33, 23, 44, 56, 5]; const numbers2 = new Array(223, 45, 334, 76, 546); const fruits = ['Apple', 'Orange', 'Banana', 'Pear']; const mixed = [22, 'Hello', true, undefined, null, {a: 1, b: 1}, new Date()]; /* Array.isArray() : method */ console.log(Array.isArray(m..

▣ 스트링 메서드 (String Methods) 아래의 코드를 통해 파악할 수 있듯이 string 자료형을 다루기 위한 특성 및 메서드들은 다양한 기능을 포함하고 있습니다. 그중에서 대표적인 몇 가지를 살펴보겠습니다. □ 스트링 메서드 예시1 const firstName = "Jerry"; const lastName = "Maguire"; const age = 30; /* Escape Sequence */ console.log("That's awesome, I can't wait."); console.log('That\'s awesome, I can\'t wait.'); /* length : property */ console.log(firstName.length); /* Concatenate */ co..

▣ 자료형(Data Types) 변수의 선언, 할당, 그리고 초기화가 데이터를 어디에 담아서 이용할 것인가와 관련된 내용이었다면, 어떤 유형의 값을 변수에 담을 것인가는 '자료형'과 관련이 있습니다. 또한 자료형은 컴퓨터 과학의 자료 구조(Data Structure)와 밀접한 관련이 있으며, 자바스크립트는 동적 타이핑(Dynamic typing)을 지원하여 어떤 자료형이든 변수에 할당될 수 있습니다. 자료형은 크게 기본형(Primitive)과 참조형(Reference)으로 나뉘며, 단편적으로 설명하자면 스택(Stack) 메모리에 값이 직접 저장되는 것이 기본형이고, 실제 값은 힙(Heap) 메모리에 저장되고 그 주소가 스택 메모리에 저장되는 것을 참조형이라고 합니다. 즉 기본형은 스택 메모리에 접근해서 ..

▣ 변수(Variables) 자료(Data)가 저장된 메모리에는 나름의 주소가 있고, 이것은 일반적으로 이해하기 어려운, 굳이 알 필요 없는 숫자들의 집합일 것입니다. 그저 USB 또는 SSD에서 램으로, 다시 CPU로, 소위 말해 컴퓨터의 기억장치와 연산장치 사이에서 자료들이 이동하면서 연산이 이루어진다는 사실 정도만 알고 있어도 상관없습니다. 다만 코딩을 통해 하고자 하는 일은 원하는 프로그램을 만들기 위해 좀 더 적극적으로 컴퓨터의 자원을 이용하고 자료들을 제어하는 것이므로 메모리의 주소까지는 몰라도, 자료를 알아볼 수 있는 어떤 곳에 담아 두고 어떻게 활용할 것인가 정도는 제어할 수 있어야 합니다. 바로 이럴 때 필요한 것이 '변수(Variable)'입니다. '지금부터 이 이름을 변수로 사용함'을..

학습을 시작하기 전에 실습 환경 설치 및 설정과 기본적인 HTML에 대하여 먼저 살펴보길 바랍니다. [자바스크립트] VSC와 크롬 웹 브라우저를 이용한 JavaScript, HTML, CSS 코딩 준비 시작하기 전에 향후 진행할 내용 중 문법 관련은 최소한의 설명만 덧붙일 예정이며 가급적 모질라 개발자 네트워크 문서를 참조하도록 할 것입니다. 그리고 프로젝트에서는 최대한 라이브러리( charlie-lyc.tistory.com ▣ 자바스크립트 콘솔 크롬(Chrome) 브라우저를 열어 상단 메뉴에서 보기(View) - 개발자(Developer) - 자바스크립트 콘솔(JavaScript Console)을 찾아 실행하면 콘솔 창을 열 수 있고, 여기에서 간단한 코딩 실습뿐만 아니라 디버깅 및 실행 시 로그(Lo..