목록개발 공부/JavaScript 33가지 필수지식 (10)
코딩일상
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b9II8s/btrSUAn8QYZ/0ltrqzYR76JP5XFtgTOLcK/img.png)
자바스크립트의 특징 자바스크립트는 싱글 스레드 기반의 언어이며 1개의 콜 스택을 사용한다. 1개의 콜 스택을 사용하기 때문에 하나의 함수의 작업이 오래 걸리게 되면 그 이후에 실행될 다른 작업들은 실행이 되지 못하는 상황이 발생하게 된다. 이 문제를 해결하기 위하여 비동기 콜백 방식을 사용하고 있다. 이와 관련된 내용이 메시지 큐와 이벤트 루프다. 들어가기 앞서 자바스크립트는 콜스택과 메모리 힙이라는 메모리 구조를 통해 데이터 및 코드 실행을 관리한다. 1. 콜스택(Call Stack) 원시타입(숫자 등) 데이터가 저장된다. 실행컨텍스트(Execution Context)를 통해 변수 식별자(이름) 저장 스코프 체인 및 this 관리 코드 실행 순서 관리 등을 수행. 실행 콘텍스트(Execution Con..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bSCKQ3/btrSIPk0k0f/uiM86jBAIEWJAD9g2kM1Dk/img.png)
즉시실행함수 IIFE(Immediately-invoked function expression)특성들 1)클래식한 IIFE 스타일 (function () { alert("I am an IIFE, too!"); })(); //alrert창 바로 실행이된다. 표현 그대로 정말 즉시 실행된다. IIFE(private) IIFE 내부에 정의된 어떤 변수라도 바깥 세상에서는 보이지 않습니다 (function IIFE() { // IIFE 밖에서는 접근할 수 없는 Private 변수들입니다. var test = 5; inner(); //inner start console.log(test); //5 // IIFE 밖에서는 접근할 수 없는 Private 함수입니다. function inner() { console.log..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bRqjrT/btrSKu1gb1L/fuzRXrlmkWf5d9tCjJcwU1/img.png)
Expression은 무엇인가 ?? value를 리턴하는 무언가를 의미한다. value를 리턴하는것을 expression이라고 생각하자 varialbe로 저장할 수있는것은 expression이다. Statement는 무엇인가?? 명령 혹은 지시이다. if,else, else if, for, while ... Statement는 varialbe로 저장할 수 없다. 좀 더 자세히 알아보자 Expression 식 (Expression)의 종류는 4가지가 존재한다. 값 연산식 리터럴 함수 호출 //값 =============================== 1 3.14 ;('expression') undefined null //연산식=============================== 1 + 1 // 2 2..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/26hEK/btrSBo1bjk8/ZttvJKCBq22ayueDhqSAek/img.png)
스코프(유효 범위, Scope) 스코프란, 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됩니다. 즉, 스코프는 식별자가 유효한 범위를 뜻합니다. MDN에 따르면 스코프란 현재 실행되는 컨텍스트를 말합니다. 여기서 컨텍스트는 값과 표현식이 "표현"되거나 참조될 수 있음을 의미합니다. 만약 변수 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없습니다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가합니다. 예제 1) function exampleFunction() { var x = "declared inside function"; // x는..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bCfEQf/btrSz7yBfqf/uPjVokfhNr9zt2bZngs3t0/img.png)
비교연산자 ==동등비교(loose equlity)연산자 ===일치비교(strict equlity)연산자 '==' 연산자를 이용하여 서로 다른 유형의 두 변수의 [값] 비교 '==='는 엄격한 비교를 하는 것으로 알려져 있다 ([값 & 자료형] -> true). '0'=='' //false 0 =='' //ture 0 =='0' //true 0 == false // true 0 === false // false console.log(typeof 0); // "number" console.log(typeof false); // "boolean" 2 == "2" // true 2 === "2" // false 주의 해야할점 NaN === NaN //false //Number.isNaN 함수는 지정한 값이 Na..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dw4nWr/btrSqti1TdN/7mtXfGPe126sWARAPIbGQ1/img.png)
들어가기 앞서 형변환에 대해 설명을하고 내용에 들어가겠다. 형변환이란? 프로그램을 작성하면서 문자를 숫자로, 숫자를 문자로 변환해야한는 경우가 생긴다. 이렇게 타입형태를 바꾸는 것을 형변환이라고 하며, 형변환에 방법에는 명시적 변환, 암시적 변환이 존재한다. 명시적 변환이란? 명시적 변화은 개발자가 의도적으로 형변환을 하는것이다. 기본적인 형변환은 Object(),Nubmer(),String(), Boolean()과 같은 함수를 이용한다. let variable = 100 console.log(variable, typeof variable) // 100 "number" variable = Object(variable) console.log(variable, typeof variable) // Number..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nMDL6/btrSqXRdiWA/ZmK9VRUpaVNmyQQlkkWJI1/img.png)
JavaScript의 변수타입 JavaScript의 변수 타입에는 크게 원시타입과 참조타입으로 나누어져있습니다. 원시타입(PrimitiveType)의 변수들은 데이터복사가 일어날때 메모리공간을 새로 확보하며 독립적인 값을 저장한다. 참조타입(ReferneceType)은 메모리에 직접접근이 아닌 메모리의 위치(주소)에 대한 간접적인 참조를 통해 메모리에 접근하는 데이터 타입이다. 값 타입(Value Type) JavaScript에서 원시타입은 변수에 할당될때, 메모리의 고정크기로 원시값을 저장하고 해당 저장된 값을 변수가 직접적으로 가리키는 형태이다. 값이 절대 변하지 않는 불변성을 갖고 있기 때문에 재할당시 기존 값이 변하는 것처럼 보일지 몰라도 사실 새로운 메모리에 재할당한 값이 저장되고 변수가 가리키..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/4ZJEN/btrSeOVtsDw/qMZhxNV2nVKEsv0rUBiD40/img.png)
들어가기 앞서 오늘은 자바스크립트의 원시형 타입에 대해 알아보고자한다. 들어가기 앞서 자바스크립트의 전체 데이터 타입에 대해 소개하고 들어가겠다. 자바스크립트는 아래와 같은타입들을 가지고있다. 그림을 보게되면 원시형 타입 그리고 참조형타입으로 크게 나누어져있다. 두 데이터 타입에 대해 정말 간다하게 설명을 하자면 아래와같다. 원시형: 값을 바로할당 참조형: 값이 저장된 주소값을 할당 혹시라도 잘 이해가 가지 않으면 추후에 이 두가지 타입에 대해 포스팅하겠다. 원시형 타입(Primitive Types)?? 원시형 타입이 현재 7가지가 있으며 아래와 같은 타입들이 있다 숫자형 Biginit 문자형 불린 null undefined Symbol 1)숫자형 숫자형(numbertype)은 정수 및 부동 소수점 숫자..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/PgafS/btrSeiVHhDi/KtZ3ytSEXHiaTtRiRlk9v1/img.png)
호출스택(Call Stack)?? 자바스크립트가 함수실행을 핸들링하는 방법중 하나이다. 이를 좀 더 쉽게 이해 하기위해서는 스택(Stack)을 먼저 이해 하면 편하다. 스택(stack)?? 할일들을 쌓아두고 가장 위에 쌓여있는 일부터 실행하는 방식이라고 생각하면 편하다 이해가 안가도 괜찮다. 아래 내용들을 진행하면서 스택은 계속 활용되니 말이다. 호출스택 작동방식 우선, 자바스크립트는 단일스레드 프로그래밍 언어이다. (단일스레드: 일을 처리하는 곳이 하나 인것라고 간단히 우선 생각) 그렇기에 단일 호출스택이 있으며, 즉 한 번에 하나의 일(Task)를 처리 할 수있다는 뜻이다. 호출스택이란 프로그램에서 우리가 어디에 있는지를 기본적으로 기록하는 데이터구조이다. 함수를 실행하면 해당함수의 기록을 스택에 추..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c67djQ/btrSeg4tXQq/d4I4oCQ9gViJDVgDBg6HVk/img.png)
소개 아래 깃허브 오픈레포지토리를 기준으로 자바스크립트 개발자로써 필수로 알아야하는 33가지 개념을 정리해나아가보려합니다. GitHub - leonardomso/33-js-concepts: 📜 33 JavaScript concepts every developer should know. 📜 33 JavaScript concepts every developer should know. - GitHub - leonardomso/33-js-concepts: 📜 33 JavaScript concepts every developer should know. github.com 시리즈 작성과정 33가지에 주제를 나열해둔뒤 주제별 공부후 블로그 글이 작성이되면 링크를 부여해놓도록 하겠습니다. 목차 호출스택 원시자료형 값 ..