[JS] JS 기초 (타입,배열,객체)

Updated: 2024.05.21

Categories: javascript

Tags: js, 개념정리

📌 개인적인 공간으로 공부를 기록하고 복습하기 위해 사용하는 블로그입니다.
정확하지 않은 정보가 있을 수 있으니 참고바랍니다 :😸
[틀린 내용은 댓글로 남겨주시면 복받으실거에요]

타입

JAVA 참조 타입 : 함수,객체, 배열

int[]arr=new int{1,2,3};

int[]arr2=arr;

하면 주소 값이 동일함, ==얕은 복사 shallow copy ⇒ 참조자료형은 조심해야함.

배열 요소 하나를 다 for loop 돌리는 것이 맞음

자바에서 배열의 요소 추가, 삭제, 수정 가능한지????

Untitled

가능, 안되는 건 재할당, list = new ArrayList<>();

Untitled

Number (typeof 연산자로 숫자 타입 확인가능)

typeof 연산자: 해당 값이 숫자 타입인지 확인 가능

 typeof 100; // 'number'
 typeof -100; // 'number'
 typeof 100.123; // 'number'

Math 내장 객체

Math.floor(): 괄호 안의 숫자를 내림하여 반환
Math.ceil(): 괄호 안의 숫자를 올림하여 반환
Math.round(): 괄호 안의 숫자를 반올림하여 반환
Math.abs(): 괄호 안의 숫자의 절대값을 반환
Math.sqrt(): 괄호 안의 숫자의 루트값을 반환
Math.pow() : 괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수인 숫자를 반환

 Math.floor(100.621); // 100
 Math.ceil(100.621);  // 101
 Math.round(100.621); // 101
 Math.round(100.421); // 100
 Math.abs(-100); // 100
 Math.abs(100); // 100
 Math.sqrt(4); // 2
 Math.sqrt(2); // 1.4142135623730951
 Math.pow(2, 5); // 32

String

큰따옴표(”), 작은따옴표(’), 백틱(`)으로 값을 감싸면 문자열(string) 타입

템플릿 리터럴(template literal)

템플릿 리터럴 내부에 ${}를 사용하여 변수를 삽입

이때, 문자열이 할당되지 않은 변수도 문자열로 취급

let course = 'FE';
let cohort = 99;
let name = 'kimcoding';
console.log(`${course} ${cohort} ${name}`); // 'FE 99 kimcoding'

변수

let : 변수 , const : 상수

변수let 에는 JavaScript에서 사용이 가능한 모든 타입의 값을 할당

아무것도 할당하지 않은 변수 : undefined 자동 할당

재할당

let키워드로 선언한 변수에 새로운 값을 할당 가능, 이를 재할당

let 키워드가 아닌 const 키워드를 사용하면 재할당이 금지

var키워드는 let키워드와 const키워드가 등장하기 이전에 사용되던 변수 선언 키워드- 사용하지말 것 ,레거시 함, 호이스팅과 스코프에도 문제가 있으므로 안 쓰는게 맞음.

식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함가
JavaScript에서는 일반적으로 카멜 케이스(camelCase)를 사용

조건문

비교연산자 ===

if /else/else if

3항 조건 연산자

  let num = 5;
  num % 2 === 0 ? console.log('짝수') : console.log('홀수'); // '홀수'
    
  (조건식) ? true일때 실행되는 코드 : false일때 실행되는 코드
    
  if(num % 2 === 0) {
    console.log('짝수');
  } else {
    console.log('홀수');
  }

JAVA와 완전히 같음

조건문은 달라지는게 한개도 없음

Switch문 도 있음.- break 사용도 동일

조건식 넣는 것이 조금 까다로울 순 있음 ,타입을 안가려서)

반복문

let result = 0;

for (let num = 1; num <= 100000; num++) {
  result = result + num;
}

console.log(result); // 5000050000

JS도 for-each문 있는데 java랑 조금 다름

JS⇒ for in 문법(배열 순회 시 많이 사용) , for of문법 (객체 순회 시 많이 사용)

JS 접근제어자, return 타입 없음.

접근제어자가 없다는 것은 캡슐화 X? → 다른 방식으로 캡슐화 함!

JS는 함수에 함수를 매개변수로 넣어서 호출 가능= 커링함수

[JavaScript] - 커링에 대해 알아보자 (velog.io)

JS 는 커링, 클로저 사용해서 캡슐화를 함

typeof func() ===’function’

함수

Untitled

함수선언식

 function greeting () {
 	console.log('hello world')
 };
    
 // 문자열 '함수선언문'을 출력하는 declared라는 이름의 함수를 함수선언문으로 정의해 보세요.
 function declared () {
 	console.log('함수선언문');
 }

함수표현식

 let greeting = function () {
 	console.log('hello world')
 };
    
 let expression = function () {
 	console.log('함수표현식');
 }

함수 호출
```
1
2
3
4
5
 function greeting () {
   console.log('hello world')
 };
    
 greeting() // 'hello world'
```
뒤에 소괄호가 있으면 함수나 메서드를 호출한다는 것을 알아야 함.

java에서 배열 length 불러올때 인스턴스화 되었기때문에 프로퍼티로 가지고 있어서 ()없듯이 js도 소괄호가 없으면 함수나 메서드가 아님.

console.log()

자바나 js나 점이 붙으면 객체에 해당하는 변수나 함수, 메서드에 접근하는 것
매개변수, 전달인자

자바에서는 매개변수가 2개라면 무조건 2개를 보내야함, 하나만 보내면 실행 못함

JS는 undefined가 나옴 - 선언만 하고 할당을 할 수가 없어서 undefined

블록 스코프 가지기 때문에 중괄호 내에서만 number 가능하고

userName도 마찬가지, 둘 다 없는 변수를 참조하고 있기 때문에 오류남 (선언조차 안된 변수)

JS는 오버로딩 불가능

typeof [] ===’object’ //true

Array는 Array.isArray([])===true

배열[]

배열 선언

java에서는 배열 선언과 초기화할때 int[]arr=new int[]{1,2,3}

js에서 배열은 갯수안따지고 타입안따져서 arr=[1,2,3] 이 끝

java는 비어있는 배열 → new int[4]

js는 비어있는 배열이 불가능 굳이 하자면 [undefined, undefined,undefined]

빈 배열을 선언하고 5번 인덱스에 값을 넣는다면??

Untitled

배열의 길이
배열 마지막 요소에 추가 : .push , 반환 값은 배열의 길이
1. push 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환
배열 마지막 요소를 삭제 : .pop() , 반환 값은 삭제한 요소
1. pop 메서드는 배열의 마지막 요소를 제거하고, 그 요소를 반환
2. 배열이 비어있을 경우 undefined를 반환
배열 첫번째 요소에 a 추가: .unshift(a) - 배열 길이 리
배열 첫번째 요소를 a 삭제: .shift(); - 삭제한 요소 리턴
배열의 요소를 출력 : 반복문

배열 메서드

Array.isArray 메서드

Array.isArray(value) 함수는 value가 배열이면 true, 아니면 false를 반환

console.log(Array.isArray([1, 2, 3]));  // true
console.log(Array.isArray({foo: 123})); // false
console.log(Array.isArray('Hello'));    // false
console.log(Array.isArray(undefined));  // false

빈 배열 일 경우에도 true반환

활용

1) 배열과 비배열 타입 구분

 const arr = [1, 2, 3];
 const obj = {key: 'value'};
 const string = "I'm a string";
 const number = 42;
            
 console.log(Array.isArray(arr));    // true
 console.log(Array.isArray(obj));    // false
 console.log(Array.isArray(string)); // false
 console.log(Array.isArray(number)); // false

2) 함수 인자가 배열인지 확인

 function processArray(input) {
   if (Array.isArray(input)) {
     console.log('Array Found:', input);
     // 배열을 처리하는 로직
   } else {
     console.log('Input is not an array:', input);
   }
 }
            
 processArray([5, 10, 15]);
 processArray('Not an array');

3) 중첩 배열 확인

 const nestedArray = [1, [2, 3], [4, 5]];
            
 for (let i = 0; i < nestedArray.length; i++) {
   const item = nestedArray[i];
   console.log(Array.isArray(item) ? 'Found an array!' : 'Not an array!');
 }
            
 // 다차원 배열을 일차원 배열로 변환하는 함수
 function flattenArray(arr) {
     // 결과를 저장할 빈 배열을 생성합니다.
     let flatArr = [];
            
     // 주어진 배열을 순회합니다.
     for(let i = 0; i < arr.length; i++) {
         // 현재 요소가 배열이 아닌 경우, 그대로 결과 배열에 추가합니다.
         if(!Array.isArray(arr[i])) {
             flatArr.push(arr[i]);
         } else {
             // 현재 요소가 배열인 경우, 내부 요소를 반복하여 결과 배열에 추가합니다.
             for(let j = 0; j < arr[i].length; j++) {
                 flatArr.push(arr[i][j]);
             }
         }
     }
            
     // 일차원 배열을 반환합니다.
     return flatArr;
 }

let arr= [1,[2,3[4,[5]],7]]; // 4번중첩배열

arr가 해당 메서드로 가능? no

그럼 아예 불가능? no ⇒ 재귀함수로 구현 가능. - 실무에서는 효율똥망이라 안씀

4) Array.isArray와 다른 타입 검사 메서드 결합

 const items = [true, 10, 'string', [1, 2, 3], {key: 'value'}];
            
 for (let i = 0; i < items.length; i++) {
   const item = items[i];
   if (Array.isArray(item)) {
     console.log('Item is an array:', item);
   } else if (typeof item === 'string') {
     console.log('Item is a string:', item);
   } else {
     console.log('Item is of a different type:', item);
   }
 }

indexOf

배열에서 특정 요소를 찾고, 그 위치(인덱스)를 반환, 요소 없을 경우 -1 반환

 let numbers = [1, 2, 3, 4, 5];
 let index = numbers.indexOf(4);
            
 if (index !== -1) {
   console.log('Number found at index:', index);
 } else {
   console.log('Number not found');
 }

메서드 구현

검증기능은 빠져있음.

 let_indexOf=fuction(arr,target){
 	for(let i=0; i<arr.length; i++){
 			if(arr[i]===target){
 				return i;
 			}
 		}
 		return -1;
 	}

includes

배열에 특정 요소가 포함되어 있는지 여부를 확인하여 true 또는 false를 반환

 let numbers = [1, 2, 3, 4, 5];
            
 if (numbers.includes(3)) {
   console.log('Array includes the number 3');
 } else {
   console.log('Array does not include the number 3');
 }

메서드 구현

 let_includes=fuction(arr,target){
 if(!Arrays.isArray(arr)|| arr.length===0) return false;
 for(el in arr){
 		if(el===target)return true;
 	}
 	return false;
 }

indexOf와 includes의 차이점
1. 반환 값
  - indexOf는 요소의 인덱스를 반환하거나, 요소가 없을 경우 -1을 반환
  - 반면, includes는 요소의 포함 여부에 따라 true 또는 false를 반환
2. 읽기 쉬움
  - includes 메서드는 indexOf보다 의도를 더 명확하게 표현할 수 있음. 조건문에서는 includes가 더 직관적일 수 있음

예제

예제 1 : 여러 데이터 타입 검사

 let mixedArray = [1, 'hello', true, { key: 'value' }];
            
 console.log(mixedArray.indexOf(true)); // 2
 console.log(mixedArray.includes('hello')); // true
 console.log(mixedArray.indexOf({ key: 'value' })); // -1
 console.log(mixedArray.includes({ key: 'value' })); // false

예제 2 : 조건부 로직에서의 사용

 let tasks = ['wash car', 'write code', 'read book'];
            
 if (tasks.indexOf('write code') !== -1) {
   console.log('Time to code!');
 } else {
   console.log('No coding today.');
 }
            
 if (tasks.includes('read book')) {
   console.log('Remember to read.');
 } else {
   console.log('No reading today.');
 }
            

객체{} ✨✨

[오브젝트 - JavaScript

증권 시세 표시기 (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)

객체 중요하고 배워야 하는 이유 : JSON

프론트와 백은 쓰는 언어가 다른데 어떻게 주고 받을 수 있는지?

JSON

(JS : JAVASCRIPT / O : Object / N : Notation)

객체를 문자열로 바꿔서 묶는 것이 JSON

프론트에서 백으로 보낼때도 JSON

백에서 프론트로 보낼때도 JSON

네트워크 통신방식 AXIOS? FETCH?

JSON 바꾸는 방식을 직렬화.

역직렬화

백에서 프론트에서 받을때도 프론트에서 백으로 받을때 해당 언어로 바꿔서 사용하는 것을 역직렬화,

자바에서 쓸 수 있는 형태로 받을때는 클래스로 인스턴스화시킨 객체로 받음.

JAVA에서 Key-value와 비슷하다.

Key value는 순회하지 않고 키만 알면 순회 필요 없이 바로 값을 알 수 있음- 조회할때 엄청 빠름, 대신 키를 알고 있을때만 빠른 것,

value만 알고 있으면 순회 해야 함, value는 중복을 허용하므로 조회하기 어려움

객체의 선언

 let user = {
 ﬁrstName: ‘Steve’,
 lastName: ‘Lee’,
 email: ‘steve@google.com’,
 city: ‘Seoul’
 };

객체는 키와 값 쌍 (key-value pair)으로 이루어져 있습니다.
key와 value 사이는 콜론으로 구분, 중괄호를 이용하여 객체 만듦.
key value pair은 쉼표로 구분
모든 key는 문자열이다.

객체의 value 사용법
1. dot notation - key로 직접할당 / bracket notation - 변수활용
2. 방법 1: Dot notation
  1. user.firstName; //’Steve’
  2. user.city; //’Seoul’
3. 방법 2: Bracket notation
  1. 내에는 변수가 들어오는 것이므로 key 문자열 일 경우 ‘ ’를 붙여줘야한다.
  2. user[’firstName’]; //’Steve’
  3. user[’city’]; //’Seoul’
4. Dot notation vs Bracket notation
  - Dot notation
    - 속성 이름이 고정되어 있고, 코드 작성 시 속성 이름을 알고 있을 때 사용.
    - 장점: 간결하고 읽기 쉬움.
    - 단점: 동적으로 속성 이름을 참조할 수 없음.
  - Bracket notation
    - 속성 이름이 동적으로 결정되거나 변수로 참조할 때, 또는 속성 이름에 공백이나 특수 문자가 포함될 때 사용.
    - 장점: 동적으로 속성 이름을 참조할 수 있음.
    - 단점: 코드가 조금 더 복잡해질 수 있음.

객체 (key와 value) 추가 - dot/Bracket notation을 이용

 let tweet={
 	writer : 'stevelee',
 	createdAt:'2019-09-10 12:03:33',
 	content : '프리코스 재밌어요!'};

아래와 같이 tweet 객체에 추가할 수 있음

tweet[‘categoty’] = ‘잡담’;

tweet.isPublic = True;

tweet.tag = [‘#Javascript’, ‘Java’]

 let tweet={
 	writer : 'stevelee',
 	createdAt:'2019-09-10 12:03:33',
 	content : '프리코스 재밌어요!',
 	category : '잡답',
 	isPublic : True,
 	tag : [‘#Javascript’, ‘Java’]};

기존에 키가 있다면 값이 수정됨.

객체 삭제 - delete

 delete tweet.createdAt;
 // tweet={
 	writer: 'stevelee',
 	content:'프리코스 재밌어요!'}

키 존재 여부 확인 : in 연산자

 'content' in tweet; //true
 'updatedAt' in tweet; //false

Hezzi

[JS] JS 기초 (타입,배열,객체)

타입

Number (typeof 연산자로 숫자 타입 확인가능)

String

템플릿 리터럴(template literal)

변수

조건문

반복문

함수

배열[]

객체{} ✨✨

javascript 카테고리 내 다른 글 보러가기

Leave a comment

최근 글 10 개 :)