JavaScript

JavaScript | 데이터 타입은 왜 필요한가? 동적 타입 언어의 특징도 알아보자

데이터 타입의 필요성1. 데이터 타입에 의한 메모리 공간의 확보와 참조값은 메모리에 저장하고 참조할 수 있어야 한다. 메모리에 값을 저장하려면 먼저 확보해야 할 메모리 공간의 크기(메모리 셀의 개수(byte 수))를 알고 결정해야 한다. js엔진은 데이터 타입(값의 종류)에 따라 정해진 크기의 메모리 공간을 확보한다 확보되는 메모리 공간의 크기는 js 엔진 제조사에 의해 다를 수 있다. ECMAScript에는 숫자 타입은 배정밀도 64bit(8byte) 부동소수점 형식을 사용하다고 명시되어 있다.var score = 100;위 예제에서 js 엔진은 리터럴 100을 숫자 타입의 값으로 해석하고 이를 저장하기 위해 8byte의 메모리 공간을 확보한 뒤 2진수로 저장한다.💡 심벌 테이블컴파일러 또는 인터프리..

JavaScript 2024.08.02

JavaScript | 원시 타입에 대한 모든 것

데이터 타입데이터 타입은 값의 종류를 말한다. javascript에서 원시 타입은 7개이며, 그 외에는 모두 객체 타입이다. javascript는 객체 기반 언어이므로 거의 모든 것이 객체로 이루어져 있다. 이번 장에서는 원시 타입에 대해 다루고, 객체 타입은 추후 다루고자 한다. js 엔진은 타입을 구별해서 값을 취급한다. 따라서 값이 같더라도 타입에 따라 해석하는 방식이 다르다.ex) 0100 0001 - 숫자로 해석하면 65, 문자로 해석하면 ‘A’ 원시 타입 1 - 숫자 타입(number)C나 java의 경우, 정수와 실수를 구분해서 int, long, float 등 다양한 숫자 타입을 제공한다. 하지만 javascript에서 숫자는 실수 타입만 존재한다. 정수로 표기해도 사실은 실수다.// 숫자..

JavaScript 2024.08.02

JavaScript | 변수는 왜 필요한가?, 어떻게 선언되고 할당되는지도 알아보자 (feat. 메모리)

메모리변수에 대해 알기 전, 먼저 메모리에 대해 간단히 짚고 넘어가겠다.컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다. 메모리 셀 하나는 1Byte이며, 컴퓨터는 메모리 셀 단위로 데이터를 저장하거나 읽어들인다. 각 셀은 고유의 메모리 주소를 갖는다.컴퓨터는 모든 데이터를 2진수로 처리한다(위 그림은 편의상 10진수로 표기했다). 숫자 값 10, 20은 임의의 메모리 주소에 저장되고 CPU는 이 값을 읽어 들여 연산을 수행한다. 연산 결과인 30도 메모리의 임의의 주소에 저장된다. 자, 이제 연산이 끝났고 나는 연산 결과인 숫자 30을 이용해 어떠한 작업을 하고 싶다.하지만, 연산 결과가 메모리에 저장되었지만 재사용을 할 수..

JavaScript 2024.07.31

스코프 체인 - 함수에서 어떤 값에 접근이 가능/불가능한가 따져보기

스코프 (체인)은 함수에서 어떤 값에 접근이 가능/불가능 한가 따져볼 때 사용되는 개념이다.이때 판별하는 범위는 블록 단위인데, 블록은 중괄호로 감싸여진 범위다. const x = "x";function c() { const y = "y"; console.log("c"); function b() { const z = "z"; console.log("b"); c(); }}function a() { const x = "x"; console.log("a"); b(); // b를 선언 안했다는 ERROR}a(); c();위 코드를 실행하면 함수 a 안에 있는 b를 호출할 때 b를 선언하지 않았다는 에러가 발생한다.b가 a의 스코..

JavaScript 2023.02.03

호출 스택 분석하는 법

호출과 선언 명확히 구분할 줄 알아야 하고, 아래 코드를 실행 하기 전에 어떤 결과가 나오는 지 알 수 있어야 한다.const x = "x";function c() { // 선언 const y = "y"; console.log("c"); // 호출 // debugger; // 호출 스택 보는 법}function a() { // 선언 const x = "x"; console.log("a"); // 호출 function b() { // 선언 const z = "z"; console.log("b"); // 호출 c(); // 호출 } b(); // 호출}a(); // 호출 - a, b, cc(); // 호출 - c호출 스택은 호출할 때만 쓰이는 스택이다.함수를 호출할 때마다 스택이 밑에서부터 쌓이..

JavaScript 2023.02.02

함수 호출한 것을 보면, 그 자리에 return한 값을 대체해보자.

함수 선언 방법 중에는 다음과 같이 화살표 함수 방식이 있다.중괄호를 생략하면 return이 포함되어 있다.주의해야 할 점은, 객체를 return할 때는 꼭 소괄호로 감싸줘야 한다. js 엔진은 중괄호를 return이 아닌 함수의 몸체로 보기 때문이다.// 아래 세 개는 같은 표현const add = (a,b) => { return a + b };const add = (a,b) => a+b;const add = (a,b) => (a+b);// 객체를 리턴할 땐 꼭 소괄호로 감싸줘야 함const add = (a,b) => ({a + b}) 함수를 호출할 때, 매개변수에 함수를 넣는다면 주의해야 할 점이 있다. 함수이름 뒤에 () 를 붙으면 함수 호출이 된다는 것이다.const add = (a,b) =>..

JavaScript 2023.01.31

함수 사용하기 - 계산기 (고차 함수 사용, if 문 중첩 제거)

중복(반복)이 있으면 제거하자. 하지만 모든 반복을 제거할 수 없을 수 있으므로 최대한 줄이도록 해보자.이번 시간에는 고차함수를 통해 중복을 제거하는 방법을 알아볼 것이다.고차함수란?const func = () => { return () => { console.log("hello"); };};const innerFunc = func(); // func의 return 값innerFunc(); // hello여기서 innerFunc는 아래 코드와 같다.func()의 리턴값이기 때문이다.const innerFunc = () => { console.log("hello");}함수가 호출된 코드(함수 이름 뒤에 ()가 붙은 코드)가 있다면 그 부분을 실제 return 값으로 치환하면 이해하기 쉽다.c..

JavaScript 2023.01.21

DOM 객체 다루기 - 끝말잇기 게임, 쿵쿵따

순서도순서를 넘기는 경우 아래와 같은 순서를 거쳐야한다.코드 1번째 참가자 제시어: 입력  개념 정리대화상자 띄우기- promt : 대화 상자에 사용자가 입력한 메시지가 문자열 형태로 전달되고, 입력하지 않고 취소를 누르면 null이 전달된다.- alert : 단순 알림창. 호출하면 확인을 누르기 전까지 다음 스크립트 실행이 중단된다.- confirm : 사용자에게 확인을 받을 때 사용. 확인을 누르면 true, 취소를 누르면 false를 전달한다. HTML 태그 선택하기document.querySelector("선택자");document.querySelectorAll("선택자");document.querySelector("#아이디");document.queryS..

JavaScript 2023.01.19