javaScript 94

객체를 커스텀해보자. 프로퍼티어트리뷰트 (플래그)

# 프로퍼티가 뭘까? 다시 생각해보자. const obj = { key: "value", }; 뭐 이런식으로 생긴게 객체라고 생각을 한다.. 저 코드만 봐서 보이는게 obj라는 식별자(객체참조)랑.. key, value라는 키,값이 쌍으로 보인다. 저 코드에선 객체, 키, 값은 명시적으로 보이지만 프로퍼티?라는건 사실 크게 안보인다. 그래서 프로퍼티라는 용어를 난 코딩할때 잘 안썼었음.. 정확히는 저 키와 값 한쌍을 프로퍼티 하나라고 부른단다. 메서드는 뭐 다른 개념이고.. 암튼 그룹개념으로 나눠보면.. 뭐 이렇게 생각을 해보장 # 내부슬롯 내부 메서드 근데 저 위에 그림은 뭔가 좀 음.. 조금 안맞는 느낌이 있어서 그림을 그려보겠다. 일단 이 이유는 아래코드를 쳐보자 console.log(Object...

즉시실행함수

# 일반적인 코드에서 식별자에 접근해서 참조해보자 - var선언 var dog = "무찌"; 개발자도구 콘솔에서 dog를 타이핑하면 저렇게 참조값을 가져와준다. 이게 전역변수로 선언된거다 ++ let이나 const는? 얘네는 개발자도구 콘솔에서 undefined로 뜬다. 그 이유는 실행컨텍스트에서 선언적환경레코드(declarative enviroment record)에 존재한다고 한다. 이건 아직 뭔지모르겠음. # 그럼 코드 전체를 즉시실행함수 리터럴로 감싸고 호출해보면? (function () { var dog = "무찌"; })(); 이렇게 식별자 참조를 할 수가 없게된다. 이렇게 즉시실행 함수로 코드 전체를 감싸면 전역변수생성을 막을 수 있다. # 모듈패턴 사실 오늘 포스팅은 이게 메인이다.. le..

전역변수사용을 억제해야하는 이유?

# 변수의 목숨이 붙어있는 시간 딥다이브에선 이걸 변수의 생명주기라고 하는데.. 그냥 이 변수를 참조할수 있는 시간을 말한다. //존나 //오래 //걸리는 //코드1 var value = '멍청이'; //존나 //오래 //걸리는 //코드2 이런식으로 전역스코프에 변수 value를 선언하였다 이걸 그림으로 그려보면 자바스크립트는 선언부분을 다 끌어올린다. 그래서 모든 식별자에는 메모리주소가 연결되고 그곳에있는 값으로 참조할 수 있다. 그림을 좀 복잡하게 그렸는데 걍 전역에서 선언한 변수는 코드가 끝날때까지 참조할 수 있다는거다.. 사실 그림이 정확하지 않는데 순서대로라면 선언부분 var value부분만 먼저 실행되고 오래걸리는코드1동안 undefined로 참조되고, 그다음 value = '멍청이'재할당문이..

스코프에 관해서

# 스코프란 무엇일까? {} //블록레벨 스코프? function fuc(){} //함수레벨 스코프? 스코프를 대충 중괄호다 라고 생각하는 사람들도 있을거다. 스코프에 대해서 어떤것인지 정확히 생각해보자. # 스코프란 식별자가 유효한 범위다. // --우주어딘가(전역) { // --집밖 var dog = "무찌"; { // -- 우리집 { // -- 무찌전용침대 다이소5천원짜리 } } } 얜왜 테두리 검은색이냐 // --우주어딘가(전역) { // --집밖 let dog = "무찌"; { // -- 우리집 { // -- 무찌전용침대 다이소5천원짜리 } } } 요렇게 var이나 let으로 선언한 dog이라는 변수에 값으로 무찌가 바인딩 되어있다. 그리고 블록문을 중첩해서 써놨다. 대충 이름붙여서 우주/집밖/..

선언문에서 let var const를 빼고 선언한다면?

# 일반적인 선언문 let value = "바보"; console.log(value); 일반적인 선언문은 이렇게 생겼다. 그런데 자바스크립트는 ㅈ같이도 아래와 같은 코드도 동작한다. # let var const없이 선언한 변수 value = "바보"; console.log(value); 잘불러온다..ㅡㅡ 이걸 use strict와 같이쓰면 에러뿜어준다. 될수있으면 선언문을 쓸때 let const를 써서 변수선언을 하자. 파이썬에서 온 사람들은 이거 짜증날거다 ㅠ 근데 이건 변수선언이 아니다! # 이러한 경우에서 호이스팅은? console.log(value); value = "바보"; 없는 value를 참조하려했다고 에러뿜어준다. 이 코드가 변수선언으로 동작할때는 호이스팅이 된다고 볼수 없다.(아래에 더씀..

함수 호이스팅

# 호이스팅이란? https://jacobowl.tistory.com/136 변수 호이스팅, 그리고 초기화 initialize, Temporal Dead Zone 초기화는 변수선언시에 최초로 undefined가 할당이 되는것을 말한다. 먼저 그림으로 살펴보면, let value = 'hello world'; 라는 코드가 실행되면 먼저 식별자 value가 가르키는 메모리주소1이 생성되고 이 jacobowl.tistory.com 이전에 변수의 호이스팅에 대해서 포스팅을 했었다. 코드는 위에서 아래로 순차적으로 실행되지만 변수를 선언하기전에 참조가 가능한걸 변수호이스팅이라고 한다. 함수도 이렇게 정의(함수는 선언이 아니라 정의라고함)하기 이전에 호출이 가능한걸 함수 호이스팅이라고 한다. # 함수 선언문에서의 ..

함수의 진짜 이름

# 기명함수와 익명함수console.log(function fuc() { return "뿩!"; }, ": 기명함수/ 이름이 있는 함수래~"); console.log(function () { return "뿩!"; }, ': 익명함수/ 이름이 없는 함수래~');둘다 함수리터럴로 평가되서 함수객체를 참조한다. 기명함수와 익명함수를 함수리터럴로 참조해서 콘솔로찍어보면 저렇게 참조한다. 브라우저에서 console.dir로 보면 명확히 알 수 있다.브라우저상에서 console.dir로 프로퍼티들을 살펴보면 name을 키로 갖는 프로퍼티에 기명함수는 'fuc'라는 스트링이 값으로 나와있고, 익명함수는 그냥 빈 스트링 ""이 나와있다. # 함수이름console.dir(function fuc() { return "뿩..

함수 리터럴에 대해서

# 먼저 리터럴에 대해서 다시 살펴보자. https://jacobowl.tistory.com/137 값(value), 리터럴(literal), 표현식(expression), 문(statement)# 리터럴(literal) 리터럴은 사람이 알아보는 기호로 적은 표기법을 말한다. 이전 '메모리에 저장되는 기본구조' 포스팅에서 컴퓨터는 데이터를 2진법으로 저장한다고 했었다. 메모리에 저장되는 jacobowl.tistory.com 위 포스팅에서 리터럴에 대해서 설명을 했었다. 리터럴이란 우리가 직접 vs코드에 치는 사람이 알아볼수 있는 코드이고, 이 리터럴이 자바스크립트엔진에의해 평가되어 메모리에 값으로 저장된다. 리터럴은 표현식에 포함된다. # 함수는 객체다 https://jacobowl.tistory.com..

primitive타입, object타입 mutable(변경가능함)

원시타입은 흔히 우리가 변수에 할당하는 스트링 넘버 등이 있고, 객체타입은 말그대로 객체타입이다. 어레이, 객체, 함수등이 있다. 원시타입과 객체타입은 근본적으로 메모리접근,참조방법에서 다르다. # 원시타입의 메모리 활용방법 원시타입인 값은 그냥 뭐 스트링 숫자 이런거다.. 뭐 이전 포스팅에서 오지게 설명했던 부분이다. 변수(식별자)는 메모리주소랑 연결되어있고 이 메모리주소는 실제 데이터가 들어있는 공간에 접근하여 데이터를 가져온다. # 원시타입은 immutable(변경불가능한)값이다!! let value = 'muzzi'; value = 'dori'; 예시로 이 코드에서 메모리공간이 활용되는 것을 보자. 참고로 우리집 개들 이름이 무찌랑 도리다.. 앞으로 자주보게될거다.. 맨처음 value를 선언할때 ..

객체, 배열 반복문의 종류 / 어레이 순환 프로토타입 메서드

const arr = ["가", "나", "다"]; const obj = { key1: "value1", key2: "value2", key3: "value3" }; 이렇게 어레이와 오브젝트를 하나씩 만들었다. 이걸 반복문을 사용해서 처리를 해보자. ## for in 반복문 (배열 ok, 객체 ok) # 배열 반복 for (i in arr) { console.log(i); } // 출력 0,1,2 0,1,2를 출력한다. 배열의 인덱스를 하나씩 출력하는것이다. 따라서 아래와같이 배열의 인덱스를 참조하는 코드로 쓰면, for (i in arr) { console.log(arr[i]); } //출력 가,나,다 이렇게 배열의 요소를 각각 출력해준다. + i를 선언해도, 안해도 된다. for (let i in a..

javaScript/concept 2023.05.10