Java Script

객체란 물리적으로 존재하거나, 추상적으로 생각할 수 있는 것 중에서 자신의 속성을가지고 있고 다른것과 구별이 가능한 것을 "객체" 라고 말합니다.현실로 반영해서 예를 들자면 자동차,자전거,사람 등은 물리적으로 존재하므로 객체,나이, 천국, 지옥등도 물리적은 아니지만 추

객체의 속성(filed)

Visual Studio Code 소프트웨어로 자바스크립트를 실행할 것 입니다.실행할 때 필요한 확장기능을 설치 해보겠습니다.참조 사이트 :

웹 페이지를 "대화형"으로 만드는 스크립팅 언어

프로그래밍 언어 내부에서 무시하는 코드라인을 주석이라고 합니다.필요성이 없는 코드나, 코드에 대해서 다른 사람들에게 설명을 하기 위한 코멘트를 작성하기 위해서주석을 사용 합니다.

HTML문서 안에서 Java Script언어를 사용할 수 있게 해주는 기능을 보유HTML문서 안에서 <script>태그를 사용하면 자바스크립트 코드가 들어가게 됩니다.

ECMAScript5(ES5)가 등장하면서 새로운 기능들이 여럿 추가되었는데, 기존 기능에 영향을끼치는 기능들도 다수 있었습니다. 이로 인해서 호환성 문제가 생겼기 때문에 변경사항의대부분은 ES5의 기본모드에서 비 활성화 되도록 설계되었습니다.ES5의 변경내용을 활성화

ES6 이후의 버전에서 let이라는 변수가 새로 추가되기 전까지 변수를 선언할 때는 var으로 변수를 선언했습니다. 이 방식은 변수를 선언하는 방식은 let과는 동일하나, 큰 문제점이 하나 있었습니다.선언한 변수를 다시 선언할 수 있어서 데이터를 덮어씌울수가 있었습니다

데이터를 가르키는 이름, 또는 데이터를 저장하는 이름이 붙은 저장소java script에서는 let이라는 키워드를 사용해 변수를 생성 합니다.오래된 소스코드에서는 let 대신에 var이라는 키워드를 사용해서 변수를 생성합니다.변수에 이름은 숫자, 문자, $와 \_ 같은

alert prompt confirm에 대해서 알아보겠습니다.사용자가 웹 페이지를 방문할 때 나타나는 메세지 알림창.사용자가 확인버튼을 누를 때 까지 사라지지 않습니다.alert같은 함수를 사용하면 나타나는 메세지박스를 모달창이라고 합니다.메세지박스와 페이지의 다른부분

Java Script에서 사용하는 값은, 항상 문자열이나 숫자형같은 자료형에 속하게 됩니다.자료형의 종류는 기본적으로 8가지가 있습니다.처음 자료의 타입은 문자열이지만, 숫자형으로도 바뀔 수 있는 언어를 동적타입언어라고 합니다정수와 소수점숫자들을 숫자형이라고 합니다.일

함수와 연산자에 전달되는 값들은, 값에 알맞는 자료형으로 자동 변환 됩니다.이러한 과정을 형변환이라고 합니다.alert함수를 예로들면, 함수에 전달받은 값은 자료형과 관계없이 문자열이라면 문자열로 변환, 전달받은 값이 숫자라면 숫자형으로 자동변환해서 보여줍니다.

변수에 값을 저장할 때 사용하는 연산자입니다.

변수의 값을 증가 시킵니다.변수의 값을 감소 시킵니다.두 숫자의 몫이 아닌 나머지 값을 할당합니다.값을 더하고 할당해줍니다.값을 빼고 할당해줍니다.값을 곱하고 할당해줍니다.값을 나누고 몫을 할당해줍니다.

조건에 따라서 if문과 조건부연산자 ? 를 사용할 수 있습니다.if( ) 괄호안에 들어가는 조건을 평가합니다. 결과가 참이라면 true, 거짓이라면 false를 반환합니다.코드 확인if문은 괄호안의 표현식을 연산하고, 결과를 논리형으로 변환합니다.if문의 결과가 참이라

자바스크립트는 세 종류의 논리 연산자가 있습니다. || : OR 연산자&& : AND 연산자! : NOT 연산자논리 연산자는 피 연산자에 논리형뿐만 아니라 모든 타입의 자료형을 할당 할 수 있습니다.피 연산자가 하나라도 참이라면 true를 반환, 그렇지 않다면 fal

??을 사용하는 연산자로 왼쪽의 피연산자가 null 또는 undefined일 때 오른쪽피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 연산자입니다.논리 연산자간의 우선순위는 OR 연산자보다 낮다.NOT > AND > OR > nullish|| 연산자는 참인

동일한 코드를 반복해서 사용해야할 때 쓰이는 조건문을 반복문이라고 합니다.조건문이 참, true라면 실행됩니다.반복문 조건에는 조건문과 동일하게 모든 변수 or 표현식이 올 수 있습니다.조건을 평가하고, 평가후에는 논리형으로 변환합니다. ( true / false )

복수의 if () 조건문을 swtich로 사용하면 간결하게 작성할 수 있습니다.특정 변수를 다양한 상황에서 사용할 수 있게 해줍니다.

수학적인 연산과정에서 사용되는 메서드들을 알아보겠습니다.소수점이 포함된 숫자에서 소수점 뒤를 없애는 메서드수를 내립니다.소수점이 포함된 숫자에서 소수를 올려버리는 메서드0과 1사이에 소수점 숫자를 무작위로 생성하는 메서드인수에 제곱을 구하는 메서드첫 번째 인수가 제곱을

key를 사용해서 식별할 수 있는 값을 담은 컬렉션은 객체라는 자료구조를 이용해 저장합니다.

배열과 관련된 메서드 등을 살펴 보겠습니다.배열의 요소를 추가 / 삭제하는 메서드는 이전 포스팅을 참조바랍니다.배열에서 요소를 1개만 삭제하고 싶다면 배열 또한 객체에 속하므로, 객체의 프로퍼티를 삭제하는delete연산자로 배열을 삭제 해볼 수 있습니다. delete

Javascript로 코드를 작성하다보면, 유사한 동작을 실행하는 코드가 여러곳에서 필요한 경우가있습니다. 사용자가 로그인을 하거나 로그아웃을 했을 때, 안내 메세지를 보여주는 동작같은경우도 이에 포함됩니다. ( alert )함수는, 프로그램을 구성하는 주요 구성 요소

javascript에서는 함수를 특별한 값으로 취급합니다.함수를 선언하는 것 이외에도, 함수를 변수안에 값으로 할당할 수 있습니다.코드 확인즉, 위에서 func 변수를 풀어서 확인해보면 아래와 같습니다.매개변수가 3개 있는 함수를 통해서 콜백 함수를 알아보겠습니다. f

화살표 함수는 함수 표현식보다 간결한 문법으로 함수를 생성할 수 있는 방법입니다.평가해야 할 표현식이나 구문이 여러 개인 함수에서 화살표 함수를 사용하는 방법을살펴보겠습니다. 이때는 중괄호 안에 평가해야 할 코드를 작성해야 합니다. 그리고 return지시자를 사용해서

디버깅은, 스크립트 내부의 에러를 검출해서 제거하는 일련의 과정을 뜻합니다.모던 브라우저(최신 브라우저)와 호스트 환경 대부분은 개발자 도구 안에 UI 형태로디버깅 툴을 제공합니다. 디버깅 툴을 사용하면, 실행 단계마다 어떤 일이 일어나는지 코드 단위로 추적할 수 있다

Console.log 함수를 이용하면, 코드의 출력 결과를 콘솔창에 표시할 수 있습니다.결과는 콘솔창에만 출력되기 때문에 일반 사용자는 볼 수 없습니다. 결과를 보기 위해서는브라우저 상에서 개발자 도구 => 콘솔창으로 확인하거나, 콘솔을 지원하는 프로그램에서 확인하면

코드를 작성할 때, 몇 가지 규칙을 정해서 규칙대로 코딩을 작성하면 가독성이 좋아지고타인이 자신의 코드를 봤을때도 수월하게 이해할 수 있습니다.중괄호를 사용할 때는, 중괄호가 필요한 구문과 같은 라인에서 시작하는 것이 좋다.변수에 문자열을 할당할 때, 따옴표들은 같은

테스트를 수동으로 하면 안되는 이유부터 설명해보겠습니다.특정 함수를 하나 생성해서 함수의 매개변수가 가져오는 결과 값이 예상과 동일한지테스트를 해볼 수 있습니다. 예상과 동일하지 않다면 함수를 수정해가면서 결과 값이예상과 동일할 때 까지 몇 번이나 반복할 것 입니다.

자바스크립트의 진화 JS는 매번 새로운 기능 추가를 위하여 제안하고 분석하고 가치가 있다고 판단되면 이곳에 추가됩니다. 그리고 궁극적으로 명세서에 등록이 됩니다. JS 엔진을 만드는 각 조직은 나름대로 우선순위를 매겨 명세서 내의 어떤 기능을 구현할 지 결정합니다.

JS 에는 8가지의 자료형타입이 있고, 이중 객체를 제외한 7개의 자료형은 오직 하나의 데이터(문자열,숫자형 등)만 담을 수 있어 원시형(primitive type)이라고 부릅니다.그런데 객체형은 원시형과 다르게 다양한 자료형을 저장할 수 있습니다. 키로 구분된 데이터

객체와 원시 타입의 근본적인 차이점 중 하나는 객체는 참조에 의해서 복사된다는 것 입니다.원시값(숫자형,문자형,논리형 등)은 값 그대로 복사되고 저장됩니다.객체의 동작 방식은 위 예시와는 다르게 동작합니다.변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어 있

JS는 눈에 보이지 않는 곳에서 메모리를 관리 합니다.메모리에는 원시값, 객체, 함수 등 우리가 생성하는 모든 것들이 들어있습니다.더이상 사용이 필요치 않은 메모리들은 어떻게 관리되고 삭제되는지 확인 해보겠습니다JS는 도달 가능성(reachability)이라는 개념을

객체 리터럴 {...} 방식을 사용하면 간편하게 객체를 생성할 수 있습니다.그러나 객체를 만들다보면 유사한 객체를 여러 개 만들어야할 때가 생깁니다. 복수의 사용자와메뉴의 다양한 기능들을 객체로 표현하려고 하는 경우와 같이 말이죠.new 연산자를 사용해서 객체를 생성하

옵셔널 체이닝(optional chaining)을 사용하면 프로퍼티가 없는 중첩 객체를 안전하게접근할 수 있습니다. ?.를 사용합니다.사용자가 여러 명 있다고 가정 시, 그 중 몇명은 주소 정보를 가지고 있지 않습니다. 이런 경우주서 정보를 알아내기 위해 user.ad

객체의 프로퍼티 키로는 '문자형'과 '심볼형'만을 허용합니다.

객체 간의 덧셈이나 뺄셈 연산을 수행하면 어떤 결과가 나타날까요? obj + obj2객체 간의 산술적인 연산을 할 때는 원시형으로 형 변환을 합니다. 객체는 먼저 원시값으로변환되고 연산이 수행됩니다.모든 객체는 논리 평가시 true를 반환합니다. 모든 객체는 숫자형 또

자바스크립트에서는 원시값을 객체처럼 다룰 수 있게 해줍니다. 원시값에도 객체에서처럼메서드를 호출할 수 있습니다.원시값과 객체는 다음과 같은 차이점이 있습니다.객체의 장점 중 하나는, 프로퍼티에 함수를 할당할 수 있습니다(메서드 생성)JS는 날짜, 오류, HTML 요소등

모던 JS는 숫자를 나타내는 두 가지 자료형을 지원합니다.일반적인 숫자는 '배정밀도 부동소수점 숫자'로 알려진 64비트 형식의 IEEE-745에 저장됩니다. 포스팅에서는 이 방식을 사용할 것 입니다.임의의 길이를 가진 정수는 BigInt 숫자로 나타낼 수 있습니다. 일

JS는 글자 하나만 저장할 수 있는 별도의 자료형이 없습니다. 텍스트 형식의 데이터는길이에 제한이 없이 문자열 형태로 저장됩니다.JS에서 문자열은 페이지 인코딩 방식과는 상관 없이 항상 UTF-16 방식을 따릅니다.문자열을 저장할때는 따옴표를 사용해야 합니다. 큰 따옴

.length 프로퍼티엔 문자열의 길이가 저장됩니다.length 는 함수가 아닌 프로퍼티 입니다. length() 함수처럼 호출할 수 없습니다.문자열 내 특정 위치인 pos에 있는 글자에 접근하려면 \[pos] 같이 대괄호를 이용하거나str.charAt(pos)라는 메

비교 연산자를 사용해서 문자열간의 크기를 비교할 수 있습니다. 알파벳 순서에 따라서크기가 결정되고, 소문자는 대문자보다 크며 z는 a보다 큽니다.다만 문자열간을 비교할 때, 규칙에서 벗어나는 예외 상황이 있습니다.모든 문자열은 UTF-16을 사용해 인코딩 되는데, UT

전체 문자열을 대문자로 변경해주는 메서드원본 문자열은 변형되지 않습니다. (비파괴 메서드)전체 문자열을 소문자로 변경해주는 메서드원본 문자열은 변형되지 않습니다. (비파괴 메서드)문자열의 처음과 끝에 오는 공백을 제거해주는 메서드비파괴 메서드

요소가 같다고 해서, 배열의 값 또한 같지는 않습니다.예를 들어, 동일한 요소를 가진 변수는 동등,일치 연산자를 통해서 비교해보면 true로나올 수 있지만, 배열은 요소가 같다고 해서 동등,일치 하지 않습니다.배열이 요소를 만들 때는, 메모리의 한 공간을 할당해서 해당

객체와 배열을 따로 사용할수도 있지만, 객체에서 요소들이 순서가 필요한 경우에는배열과 같이 사용하면 더욱 강력합니다.( 반대의 경우도 해당 )

배열같은 순환이 필요한 요소를 일반 for 문보다 실용적으로 작동하는 반복문입니다.IE 환경에선 지원하지 않으므로, 사용전에 지원하는 브라우저를 확인 하세요.

메서드는 객체에 종속된 특성으로 함수에 포함되는 개념이다.메서드는 이름 앞에 . 을 찍어서 사용합니다. 모든 메서드는 함수지만, 모든 함수가 메서드는 아닙니다.메서드는 객체 안에서 속성으로 추가된 함수를 뜻합니다. (객체안에 함수가 있다면 메서드라고 생각합시다.)객체안

함께 사용하며, 자바스크립트에서 오류 및 예외를 처리합니다.오류를 잡아내서 코드 실행이 정지되거나 중단되지 않도록 하는 역할을 수행한다.Catch 란 뭔가가 잘못되어 try 안에서 예외나 오류가 나왔을 때 실행하는 코드블럭🔔 Try & Catch 사용은 중요하다 오류

함수를 인수로 받아들인다. ForEach는 배열안의 요소에 대해 함수와 코드를 한 번씩 실행한다.그래서 어떤 함수를 넣든 상관없이 함수가 아이템별로 한 번씩 호출되고 각각의 아이템이함수에 자동으로 전달됩니다.단순하게 배열안의 요소를 출력하기 위함이라면 for..of 반

배열 메서드는 아닌 함수지만 콜백 함수를 전달 해야 합니다.두 함수들은 실행을 연기, 대기, 중단하거나 추후의 날짜로 실행을 연기할 수 있으며기본적인 작업 일정을 정하는 함수입니다.콜백 함수를 ~초 이후에 실행시키는 함수콜백함수를 인자로 전달하지 않는다면 오류가 발생합

요소로 구성된 배열에서 필터링을 하거나 부분 집합을 모아서 새로운 배열을생성할 때 사용되는 메서드비파괴 메서드 ( 원본수정 X )

배열을 가져가 요소를 점차 줄여가면서 마지막에는 1개의 값만 남기는 메서드 입니다.자동적으로 처리하지 않기에, 사용자가 입력한 값에 따라서 작동합니다.두개의 매개변수를 갖는 메서드다.

JS에서 this는 상황에 따라 다른식으로 바인딩 됩니다.대표적으로 this가 바인딩 되는 값들은 아래와 같습니다.전역공간의 this (전역 객체)메서드 호출 시 메서드 내부의 this (메서드를 호출한 객체)함수 호출 시 함수 내부의 this (undefined)3번

매개변수를 입력하지 않았을 경우에 대비해서 매개변수의 기본값을 정해줄 수 있습니다.최신 기술에서는 매개변수의 괄호안에서 기본값을 정의할 수 있습니다.

배열과 같이 반복 가능한 객체를 전개구문을 사용해서 확장할 수 있다.배열같은 요소를 인수로 전달할 때, 전개구문을 사용하면 배열안의 요소들을 하나하나개별적인 요소로 분리해서 인수로 전달할 수 있다.전개 구문은 ... 점 3개를 인수앞에 붙이면 확장됩니다.Math.max

우리는 함수를 만들 때, 인수 객체라는 값이 함수로 전달됩니다.인수 객체는 배열과 비슷해보여서 유사배열객체 라고도 부릅니다.요소에 접근하려면 인덱스를 사용해야 하지만, 배열은 아니기에 배열 메서드는사용할 수 없습니다. ( pop, push, reduce 등 )인수객체는

배열의 요소를 해체하고 필요한 요소를 꺼내어 선정하는 간편한 방식입니다.기존의 배열을 해체해서 별개의 변수 형태로 만들 수 있다.배열이므로 순서를 기준으로 분해 & 선정 됩니다.객체안의 키와 쌍으로 된 요소들을 분해하고 꺼내서 변수에 저장할 수 있습니다.배열이 아니므로